2020/10/17 Flutter : Work with tabsの訳

タブを利用は、マテリアルデザインガイドラインに従ったアプリの一般的なパターンです。Flutterにはマテリアルライブラリの一部として、タブレイアウトを生成する便利な方法が用意されています。

Cupertino appでタブを利用するには、Building a Cupertino app with Flutter コードラボを見てみましょう。

ここでは以下の手順でタブを使ったサンプルを見ていきます。

  1. TabControllerを生成する。
  2. タブを生成する。
  3. それぞれのタブに対応するコンテンツを生成する。

1.TabControllerを生成する。

タブを利用するためには、選択されているタブと、そのタブに対応するコンテンツを同期的に保持する必要があります。その仕事をするのがTabControllerクラスです。

TabControllerインスタンスを自分で生成する方法と、DefaultTabControllerウィジェットを利用して自動的に生成する方法があります。

DefaultTabControllerウィジェットはTabControllerを生成し、自身(DefaultTabControllerウィジェット)の子孫ウィジェットがそのTabControllerを使用できるようにするので、DefaultTabControllerウィジェットを利用するのはシンプルな選択肢です。

DefaultTabController(
  // lengthパラメータに、表示するタブの個数を指定する。
  length: 3,
  child: // 次のセクションで実装する。
);

2.タブを生成する。

特定のタブが選択されると、そのタブに対応するコンテンツを表示する必要があります。タブを生成するにはTabBarウィジェットを使います。このサンプルでは、三つのTabウィジェットを配置したTabBarウィジェットを生成し、それをAppBarウィジェット内に配置します。

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [