[Flutter]BottomNavigationBarの画面遷移(page transition)にアニメーション(animation)をつけるには？

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

BottomNavigationBarの画面遷移にアニメーションをつける方法を紹介します。

方法
使用例
まとめ

方法

BottomNavigationBarの画面遷移にアニメーションをつけるには、PageViewを使います。

まず、Controllerの変数の用意と初期化、破棄を指定します。

  PageController? _controller;
  
  @override
  void initState() {
    super.initState();
    _controller = PageController(); //初期化
  }

  @override
  void dispose() {
    _controller?.dispose();//破棄
    super.dispose();
  }

次に、PageViewの引数「controller」に用意した変数、引数「children」に遷移するページを指定します。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _controller,
        children: [
          Page1(),
          Page2(),
          page3(),
          ・・・
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          ・・・
        ],
        currentIndex: _currentIndex,
        onTap: _onTap,
      ),
    );
  }

最後に、BottomNavigationBarのタップ処理に変更を加えます。

タップ処理ではBottomNavigationBarのインデックスの更新をした後に、PageControllerのanimateToメソッドを呼び出します。

このanimateToメソッドでは、画面遷移先の指定とアニメーションの設定を行います。

  void _onTap(int index) {

    setState(() {
      _currentIndex = index;//インデックスの更新
    });

    _controller?.animateToPage(
      index,//PageViewの画面遷移先
      duration: Duration(/*アニメーションの時間*/),
      curve: /*アニメーションの仕方をCurvesで指定*/,
    );

  }

あとは、BottomNavigationBarの引数「onTap」に用意したタップ処理を指定します。

これでBottomNavigationBarの画面遷移にアニメーションをつけることが出来ます。

使用例

以下は、使用例です。

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

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

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

  @override
  void initState() {
    super.initState();
    _controller = PageController();
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _controller,
        children: [
          Container(
            child: Text('Settings'),
            alignment: Alignment.center,
            color: Colors.green,
          ),
          Container(
            child: Text('Home'),
            alignment: Alignment.center,
            color: Colors.blue,
          ),
          Container(
            child: Text('Favorite'),
            alignment: Alignment.center,
            color: Colors.pink.withOpacity(0.3),
          ),
        ],
      ),
      bottomNavigationBar: 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: _onTap,
      ),
    );
  }

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

    _controller?.animateToPage(
      _currentIndex,
      duration: Duration(seconds: 2),
      curve: Curves.bounceInOut,
    );
  }
  
}