[Flutter]Cupertino( iOS風 )でBottomNavigationBarを表示するには?

Flutter

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

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

スポンサーリンク

方法

インターフェース, インターネット, プログラム, ブラウザ, Www

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){}」のようになっており、第2引数の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();
        }
      },
    );
  }

スポンサーリンク

まとめ

CupertinodeBotttomNavigationBarを使うには、CupertinoTabScaffoldを使います。

コメント

タイトルとURLをコピーしました