[Flutter]画面の下(screen bottom)にTabBar(タブバー)を表示するには？

どうも、ちょげ(@chogetarou)です。

画面の下にTabBarを表示する方法を紹介します。

方法
使用例

方法

画面の下にTabBarを表示するには、Scaffoldの引数「bottomNavigationBar」を使います。

具体的には、Scaffoldの引数「bottomNavigationBar」にTabBarを指定します。

Scaffold(
  body: Center(),
  bottomNavigationBar: TabBar(
      tabs: [
        ・・・・
      ],
  ),
),

Scaffoldの引数「bottomNavigationBar」を使えば、TabBarを画面の下に表示することができます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: DefaultTabController(
        length: 3,
        child: Scaffold(
          body: Center(),
          bottomNavigationBar: Container(
            color: Colors.blue,
            child: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.person)),
                Tab(icon: Icon(Icons.today)),
                Tab(icon: Icon(Icons.settings)),
              ],
            ),
          ),
        ),
      ),
    );
  }