タブを操作する

コンテンツ

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

このレシピでは、次の手順を使用してタブ付きの例を作成します。

を作成しますTabController。
タブを作成します。
タブごとにコンテンツを作成します。

1.`TabController`

タブが機能するには、選択したタブとコンテンツを保持する必要がありますセクションが同期しています。これはの仕事ですTabController。

を作成するか、TabController手動で、または、を使用して自動的にDefaultTabControllerウィジェット。

使用するDefaultTabControllerが最も単純なオプションです。を作成しますTabControllerそして、それをすべての子孫ウィジェットで利用できるようにします。

return MaterialApp(
  home: DefaultTabController(
    length: 3,
    child: Scaffold(),
  ),
);

2. タブを作成する

タブが選択されている場合は、コンテンツを表示する必要があります。タブを作成するには、TabBarウィジェット。この例では、TabBar3つでTabウィジェットを作成して、AppBar。

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)),
          ],
        ),
      ),
    ),
  ),
);

デフォルトでは、TabBarウィジェットツリーを検索して最も近いものを探しますDefaultTabController。手動で作成している場合は、TabController、それをに渡しますTabBar。

3. 各タブのコンテンツを作成する

タブが作成されたので、タブが選択されたときにコンテンツを表示します。この目的のために、TabBarViewウィジェット。

body: const TabBarView(
  children: [
    Icon(Icons.directions_car),
    Icon(Icons.directions_transit),
    Icon(Icons.directions_bike),
  ],
),

インタラクティブな例

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),
            ],
          ),
        ),
      ),
    );
  }
}