[Flutter]BottomNavigationBarにリップルエフェクト(ripple effect)を追加(add)するには？

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

BottomNavigationBarにリップルエフェクトを追加する方法を紹介します。

方法
使用例
まとめ

方法

BottomNavigationBarにリップルエフェクトを追加するには、Themeを使います。

まず、BottomNavigationBarをThemeでラップします。

次に、Themeの引数「data」にThemeDataを指定します。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: Theme(
        data: ThemeData( ),
        child: BottomNavigationBar(
          items: [
            ・・・
          ],
        ),
      ),
    );
  }

最後に、ThemeDataの引数「splashFactory」に「InkRipple.splashFactory」、引数「splashColor」にリップルエフェクトの色を指定します。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: Theme(
        data: ThemeData(
          splashFactory: InkRipple.splashFactory,
          splashColor: /*リップルエフェクトの色*/,
        ),
        child: BottomNavigationBar(
          items: [
          ・・・
          ],
        ),
      ),
    );
  }

これでBottomNavigationBarにリップルエフェクトをつけることが出来ます。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: _pages,
      ),
      bottomNavigationBar: Theme(
        data: ThemeData(
          splashFactory: InkRipple.splashFactory,
          splashColor: Colors.pink[100],
        ),
        child: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: 'Settings',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.favorite),
              label: 'Favorite',
            ),
          ],
          currentIndex: _currentIndex,
          onTap: (int index) {
            setState(() {
              _currentIndex = index;
            });
          },
        ),
      ),
    );
  }