[Flutter]BottomNavigationBarItemのアイコン(icon)にバッジ(badge)を表示する方法

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

BottomNavigationBarItemのアイコンにバッジを表示する方法を紹介します。

方法
使用例
まとめ

方法

BottomNavigationBarItemのアイコンにバッジを表示するには、StackとContainerを使います。

まず、BottomNavigationBarItemの引数「icon」にStackを指定し、Stackの引数「children」にアイコンを指定します。

BottomNavigationBarItem(
  icon: Stack(
    children: [
      Icon(/*アイコン*/),   
    ],
  ),
  label: 'ラベル',
),

次に、Iconの後ろに、Positionedを指定し、引数「right」に0を指定します。

そして、Positionedの引数「child」にContainerを指定します。

指定したContainerをバッジっぽくカスタマイズします。

BottomNavigationBarItem(
  icon: Stack(
    children: [
      Icon(/*アイコン*/),
      Positioned(
        right: 0,
        child: Container(
          decoration: BoxDecoration(
            color: Colors.red,//色
            shape: BoxShape.circle,//丸
          ),
          constraints: BoxConstraints(
            minHeight: 12,//最小の高さ
            minWidth: 12,//最小の幅
          ),
          alignment: Alignment.center,
        ),
      ),
    ],
  ),
  label: 'ラベル',
),

最後に、Containerのchildでバッジの内容を指定すれば、BottomNavigaationBarでバッジが表示できます。

使用例

以下は、使用例です。

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  var _currentIndex = 0;

  var _pages = <Widget>[
    Container(
      child: Text('Settings'),
      alignment: Alignment.center,
    ),
    Container(
      child: Text('Home'),
      alignment: Alignment.center,
    ),
    Container(
      child: Text('Favorite'),
      alignment: Alignment.center,
    ),
  ];

  void _onTap(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  var _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Stack(
              children: [
                Icon(Icons.settings),
                Positioned(
                  right: 0,
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.red,
                      shape: BoxShape.circle,
                    ),
                    constraints: BoxConstraints(
                      minHeight: 12,
                      minWidth: 12,
                    ),
                    child: Text(
                      '$_count',
                      style: TextStyle(
                        fontSize: 8,
                        color: Colors.white,
                      ),
                    ),
                    alignment: Alignment.center,
                  ),
                ),
              ],
            ),
            label: 'Settings',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite),
            label: 'Favorite',
          ),
        ],
        currentIndex: _currentIndex,
        onTap: _onTap,
      ),
    );
  }
}