Flutter bottomNavigationBar に FAB を載せてメインタブを強調する

Flutter

上記画像のように bottomNavigationBar にFloating Action Button を乗せることでメイン機能を強調するカスタマイズをしてみました。

まず5タブの Bottom Navigation Bar を作成し、

BottomNavigationBarItem(
            icon: Icon(
              Icons.message, 
            ),
            title: Text(
              '投稿',
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.functions),
            title: Text(
              '機能',
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              IconData(59621, fontFamily: 'MaterialIcons'), 
            ),
            title: Text(
              'HOME',
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.info,
            ),
            title: Text(
              'お知らせ',
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
            ),
            title: Text(
              'マイページ',
            ),
          ),

floting action button の Location を centerdock に指定して載せます。

 floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.black,
        onPressed: () {
          setState(() {
            this._index = 2;
          });
        },
        child: Icon(
          Icons.home,
          color: Colors.white,
        ),
        elevation: 0.0,
      ),

以上

 

注意点としては、FABボタンを複数付ける場合には HeroTag が必要になるのでFABを他の場所でも使い場合にはHeroTagが必須になります。

あとはBottom Navigation Bar がbodyに飛び出ているのでスクロール前提のUIになります。

コメント

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