[Flutter]Cupertino(クパチーノ)( iOS風 )でBottomNavigationBarを表示するには？

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

CupertinoでBottomNavigationBarを表示する方法を紹介します。

方法
使用例
まとめ

方法

CupertinoでBottomNavigationBarを表示するには、CupertinoTabScaffoldを使います。

まず、buildメソッドでCupertinoTabScaffoldをreturnします。

  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold();
  }

次に、CupertinoTabScaffoldの引数「tabbar」でBottomNavigationBarを実装します。

実装の仕方としては、まずCupertinoTabBarを指定します。

そして、CupertinoTabBarの引数「items」に、タブをBottomNavigationBarItemで実装します。

  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: [
          BottomNavigationBarItem(
            icon: /*アイコン*/,
            label: 'ラベル',
          ),
          BottomNavigationBarItem(
            icon: /*アイコン*/,
            label: 'ラベル',
          ),
          BottomNavigationBarItem(
            icon: /*アイコン*/,
            label: 'ラベル',
          ),
　　　　　　　　　・・・
        ],
      ),
    );
  }

最後に、CupertinoTabScaffoldの引数「tabBuilder」で、ページを返します。

tabBuilderに指定する関数は、「Widget (context, index){}」のようになっており、第２引数のindexで、選択されたタブのインデックスを使うことが出来ます。

  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: [
          ・・・
        ],
      ),
      tabBuilder: (context, index) {
        return Page(); //ページを返す
      },
    );
  }

引数「tabBuilder」で、インデックスとif文やswitch文、配列などを使うことによって、ページの切り替えをすることが出来ます。

これでCupertinoでBottomNavigationBarを表示することが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite),
            label: 'Favorite',
          ),
        ],
      ),
      tabBuilder: (context, index) {
        switch (index) {
          case 0:
            return Container(
              child: Text('Settings'),
              alignment: Alignment.center,
              color: Colors.green[100],
            );
          case 1:
            return Container(
              child: Text('Home'),
              alignment: Alignment.center,
              color: Colors.blue[100],
            );
          case 2:
            return Container(
              child: Text('Favorite'),
              alignment: Alignment.center,
              color: Colors.pink[100],
            );
          default:
            return Container();
        }
      },
    );
  }