FlutterでTabBarを使ったカテゴリ切り替えUIを実装する

Flutterで買い物リストアプリを作成していた際に、
「食品」「日用品」を切り替えるカテゴリタブUIを実装したので紹介します。

今回は以下を実装します。

• TabBar
• TabBarView
• TabController

実装イメージ

TabControllerを作成する

まずは TabController を作成します。

class _ShoppingPageState extends State<ShoppingPage>
    with SingleTickerProviderStateMixin {

  late TabController _tabController;

  @override
  void initState() {
    super.initState();

    _tabController = TabController(
      length: 2,
      vsync: this,
    );
  }
}

length にはタブ数を指定します。

TabBarを実装する

TabBar(
  controller: _tabController,

  tabs: const [
    Tab(text: '食品'),
    Tab(text: '日用品'),
  ],
)

TabBarViewを実装する

Expanded(
  child: TabBarView(
    controller: _tabController,

    children: [
      FoodPage(),
      DailyPage(),
    ],
  ),
)

children に各タブで表示したいWidgetを設定します。

AppBarに表示する

Scaffold(
  appBar: AppBar(
    title: const Text('買い物リスト'),

    bottom: TabBar(
      controller: _tabController,

      tabs: const [
        Tab(text: '食品'),
        Tab(text: '日用品'),
      ],
    ),
  ),
)

完成コード

class ShoppingPageQiita extends StatefulWidget {
  const ShoppingPageQiita({super.key});

  @override
  State<ShoppingPageQiita> createState() => _ShoppingPageQiitaState();
}

class _ShoppingPageQiitaState extends State<ShoppingPageQiita>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  // ダミーデータ
  final List<ShoppingItem> foodItems = [
    ShoppingItem(
      id: '1',
      name: '牛乳',
      category: 'food',
      createdBy: '',
      isChecked: false,
    ),

    ShoppingItem(
      id: '2',
      name: '卵',
      category: 'food',
      createdBy: '',
      isChecked: true,
    ),
  ];

  // ダミーデータ
  final List<ShoppingItem> dailyItems = [
    ShoppingItem(
      id: '3',
      name: 'ティッシュ',
      category: 'daily',
      createdBy: '',
      isChecked: false,
    ),

    ShoppingItem(
      id: '4',
      name: '洗剤',
      category: 'daily',
      createdBy: '',
      isChecked: true,
    ),
  ];

  @override
  void initState() {
    super.initState();

    _tabController = TabController(length: 2, vsync: this);
  }

  void _toggleCheck(ShoppingItem item) {
    // TODO チェック処理
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('買い物リスト'),

        bottom: TabBar(
          controller: _tabController,

          tabs: const [
            Tab(text: '食品'),
            Tab(text: '日用品'),
          ],
        ),
      ),

      body: TabBarView(
        controller: _tabController,
        children: [
          ItemList(items: foodItems, onToggle: _toggleCheck),
          ItemList(items: dailyItems, onToggle: _toggleCheck),
        ],
      ),
    );
  }
}

ItemListやShoppingItemは環境によって実装が異なるため、今回は割愛しています。