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

上記画像のように 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: () {
        },
        child: Icon(
          Icons.home,
          color: Colors.white,
        ),
        elevation: 0.0,
      ),

以上

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

あとは真ん中のボタンがbodyに飛び出ているのでスクロール前提のUIになります。

よろしければTwitterのフォローお願いします。
https://twitter.com/iori_eth