Flutter でタブを切り替える場合、Tab を使用します。

まずは、AppBarから作成してみましょう。

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(
        home: DefaultTabController(
            length: 3,
            child: Scaffold(
                appBar: AppBar(
              title: const Text("Tabs"),
            ))));
  }
}

image2

appBarbottomTabbarを設定します。

TabBarの中にTabを設定します。

Widget build(BuildContext context) {
  return MaterialApp(
      home: DefaultTabController(
          length: 3,
          child: Scaffold(
            appBar: AppBar(
                title: const Text("Tabs"),
                bottom: const TabBar(
                  tabs: [
                    Tab(
                      icon: Icon(Icons.camera_alt),
                    ),
                    Tab(
                      icon: Icon(Icons.description_outlined),
                    ),
                    Tab(
                      icon: Icon(Icons.account_box),
                    ),
                  ],
                )),
          )));
}

image3

タブを設置することができました。

タブの中のコンテンツを作成します。

Scaffoldの中にbodyを設定し、TabBarViewを設定します。

現在タブが 3 点あるので、TabBarViewの中に、コンテンツを 3 点作成します。

Widget build(BuildContext context) {
  return MaterialApp(
      home: DefaultTabController(
          length: 3,
          child: Scaffold(
              appBar: AppBar(
                  title: const Text("Tabs"),
                  bottom: const TabBar(
                    tabs: [
                      Tab(
                        icon: Icon(Icons.camera_alt),
                      ),
                      Tab(icon: Icon(Icons.description_outlined)),
                      Tab(icon: Icon(Icons.account_box)),
                    ],
                  )),
              body: const TabBarView(children: [
                Center(child: Text("Camera's tab")),
                Center(child: Text("Document's tab")),
                Center(child: Text("Account's tab"))
              ]))));
}

では、実際に動作するか確認します。

image4

ドキュメントのアイコンをクリックすると、

image5

ドキュメントのコンテンツになりました。

さらに、アカウントのアイコンをクリックすると、

image6

アカウントのアイコンになりました。

タブのアイコンの下にタイトルを表示させるには、Tabの中にtextを設定します。

appBar: AppBar(
  title: const Text("Tabs"),
  bottom: const TabBar(
    tabs: [
      Tab(
        icon: Icon(Icons.camera_alt),
        text: "Camera",
      ),
      Tab(
          icon: Icon(Icons.description_outlined),
          text: "Document"),
      Tab(icon: Icon(Icons.account_box), text: "Account"),
    ],
  )),

ブラウザで確認すると、

image7

アイコンの下にタイトルが表示されました。

ブログ一覧