[Widget]StatelessWidgetでタブ切り替えをする

公開日: 2022-02-11更新日: 2022-02-12

動作環境: Flutter 2.8.1 Dart 2.15.1

アプリを作っているとタブで画面を切り替える構成にしたい、というのはよくあります。
FlutterはTabBarやTabBarViewを使うことで簡単に実装できます。

このページではStatelessWidgetで実装するパターンを紹介します。
まずはサンプルコードをまるっと掲載します。

lib/main.dart

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'タブバーを試す',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const TabBarScreen(),
    );
  }
}
class TabBarScreen extends StatelessWidget {
  const TabBarScreen({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 1,
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('タブバーのサンプル'),
          bottom: const TabBar(
            tabs: [
              Tab(
                icon: Icon(Icons.home),
                text: 'ホーム',
              ),
              Tab(
                icon: Icon(Icons.access_time_sharp),
                text: '通知',
              ),
              Tab(
                icon: Icon(Icons.build),
                text: '設定',
              ),
            ],
          ),
        ),
        body: const TabBarView(
          children: [
            Center(
              child: Text('ホーム画面'),
            ),
            Center(
              child: Text('通知画面'),
            ),
            Center(
              child: Text('設定画面'),
            ),
          ],
        ),
      ),
    );
  }
}

ひとつひとつポイントを見ていきましょう。

まず、最初に28行目のようにDefaultTabControllerで囲んであげます。
initialIndex:で初期表示するタブの番号を指定します。
タブの番号は1から始まります。
length:にはタブの合計数を指定します。

lib/main.dart

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 1,
      length: 3,

次はタブメニューの部分です。
以下のコードを見てください。

lib/main.dart

      child: Scaffold(
        appBar: AppBar(
          title: const Text('タブバーのサンプル'),
          bottom: const TabBar(
            tabs: [
              Tab(
                icon: Icon(Icons.home),
                text: 'ホーム',
              ),
              Tab(
                icon: Icon(Icons.access_time_sharp),
                text: '通知',
              ),
              Tab(
                icon: Icon(Icons.build),
                text: '設定',
              ),
            ],
          ),
        ),

32行目からはじまるAppBarのbottom:にTabBar Widget を設定しています。
その中のtabs:にTab Widgetを必要な数だけ追加しています。

Tabにはicon:とtext:でラベルを指定します。どちらか一方でも大丈夫です。

そして、タブで切り替えて表示する中身の部分は
TabBarViewを使います。
以下のコードを見てください。

lib/main.dart

        body: const TabBarView(
          children: [
            Center(
              child: Text('ホーム画面'),
            ),
            Center(
              child: Text('通知画面'),
            ),
            Center(
              child: Text('設定画面'),
            ),
          ],
        ),

51行目でbody:にTabBarViewを設定しています。
その中のchildren:にタブで切り替えたときに画面を配置していくことになります。

サンプルはシンプルにCenterとTextしかありませんが、
ここはアプリごとにぐんぐん変わってくるところですね。

タブを押したときのイベントをコードで受け取りたいような場合は
このようにStatelessWidgetで組み上げてしまう方が簡単です。
タブバーのサンプル

「Widget」のページ

サイトマップ

Flutterの記事

Dartの記事

お問い合わせ

執筆/運営

おかゆ

ツール系アプリの個人開発者です。
このサイトの感想や質問など、お気軽にメッセージください。