ブログ

[読書会]タブを操作する

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

１．TabController の作成

　Flutterのタブ（Tab）機能を使用する際に必要なTabControllerについて触れています。

（１）TabController の役割

　タブ機能を使用する際、ユーザがタブを選択したときに、それに対応するコンテンツを表示する必要があります。
これを行うのが TabController の役割です。タブとそのコンテンツの状態を同期するために使われます。

（２）TabController の作成方法

TabController を使用するには、２つの方法があります。

① 手動で作成する
② DefaultTabController ウィジェットを使用する

（３）DefaultTabController

  • DefaultTabController は TabController を自動的に作成し、全ての子ウィジェットにそれを利用可能にします。
  • 最もシンプルな方法で、（開発者が TabController を手動で設定する、という）手間を省くために使われます。
DefaultTabController が TabController を自動的に作成し、Scaffold に関連付けられる（例）：
return MaterialApp(
  home: DefaultTabController(
    length: 3,  //タブの数を指定
    child: Scaffold(),  //タブのUIを作成
  ),
);

２．タブの作成

　TabBar ウィジェットを使用して、タブバーを作成する方法について触れています。

（１）タブの作成方法

  • TabBar ウィジェットを使用して、タブを作成します。
  • 各タブは、Tab ウィジェットとして表現され、アイコンやテキストを表示できます。
  • タブが選択されると、対応するコンテンツを表示する必要があります。
DefaultTabControllerを使用して、3つのタブを作成する（例）：
//各タブにはアイコンが設定されており、それぞれ車、公共交通機関、自転車
//のアイコンが表示されます。これにより、タブの内容を視覚的に区別できます。
return MaterialApp(
  home: DefaultTabController(
    length: 3,  //タブの数を指定
    child: Scaffold(
      appBar: AppBar(
        bottom: const TabBar(  //TabBarをAppBarの下部に配置
          tabs: [
            //車のアイコンを持つタブ
            Tab(icon: Icon(Icons.directions_car)),
            //公共交通のアイコンを持つタブ
            Tab(icon: Icon(Icons.directions_transit)),
            //自転車のアイコンを持つタブ
            Tab(icon: Icon(Icons.directions_bike)),
          ],
        ),
      ),
    ),
  ),
);

（２）ポイント

  • DefaultTabController は、タブバーが属するタブコントローラを自動的に探し出し、それに基づいてタブを管理します。
  • TabBar は、タブのリストを定義し、AppBar の下に配置されています。
    これにより、上部ナビゲーションバーにタブが表示されます。
  • アイコンの使用
    　各タブは Icon ウィジェット を使ってビジュアルを表現しますが、テキストや他のウィジェットもタブ内に配置可能です。

（３）TabBar の利用時の注意点

　TabBar を使用する場合、タブコントローラが必要です。
DefaultTabController を使用しない場合は、手動で作成した TabController を TabBar に渡す必要があります。

３．各タブのコンテンツ作成

　各タブが選択された時に表示されるコンテンツを作成する方法について触れています。

（１）各タブのコンテンツの作成

  • TabBarView ウィジェットを使用して、タブが選択された時に表示するコンテンツを管理します。
  • TabBarView は、タブごとに異なるコンテンツを表示するためのウィジェットであり、タブの順序に対応してコンテンツも設定する必要があります。

（２）重要な点

  • 順序に注意
    　TabBar で指定したタブの順番と、TabBarView で指定するコンテンツの順番が一致している必要があります。
    （例えば、最初のタブに表示されるコンテンツが最初の位置にあり、次のタブには次の位置のコンテンツが対応する形です。）
  • children プロパティ
    　TabBarView の children プロパティには、各タブに対応するコンテンツをリスト形式で渡します。
    ここでは、３つのアイコンがそれぞれのタブの内容として表示されています。
Dart
body: const TabBarView(
  children: [
    Icon(Icons.directions_car),  //1つ目のタブに対応するコンテンツ
    Icon(Icons.directions_transit),  //2つ目のタブに対応するコンテンツ
    Icon(Icons.directions_bike),  //3つ目のタブに対応するコンテンツ
  ],
),

ここでは、TabBarView を使用して、タブごとのコンテンツを設定しています。
各々のタブ（車、公共交通機関、自転車）に対応するアイコンが表示され、タブを選択すると、対応するアイコンが表示されます。

４．インタラクティブな例

Dart
import 'package:flutter/material.dart';

void main() {
  runApp(const TabBarDemo());
}

class TabBarDemo extends StatelessWidget {
  const TabBarDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: const TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: const Text('Tabs Demo'),
          ),
          body: const TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

コメントを残す