[Flutter]AnimatedSwitcherを使ってウィジェットの表示切り替えをいい感じにする

AnimatedSwitcherとは

FlutterにはAnimatedSwitcherというウィジェットがあり、これを使うとウィジェットの切り替え時のアニメーションを楽に実装することができ、便利なウィジェットだと思ったため、今回紹介したいと思います。

公式リファレンスはこちら
https://api.flutter.dev/flutter/widgets/AnimatedSwitcher-class.html

サンプルで作るもの

今回はわかりやすいように、以下のようなボトムナビゲーションのitemをクリックすると文字がアニメーションされながら切り替わるという超絶シンプルなものを作ってみます。

実装

検証環境

コード

全体のコードは以下になります。

my_home_page.dart

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  String text = 'home';
  int index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        alignment: Alignment.center,
        child: AnimatedSwitcher(
          duration: Duration(milliseconds: 500),
          transitionBuilder: (child, animation) {
            return ScaleTransition(child: child, scale: animation);
          },
          child: Text(
            text,
            key: ValueKey<String>(text),
            style: Theme.of(context).textTheme.title.copyWith(
                  fontSize: 30.0,
                ),
          ),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: index,
        onTap: (i) {
          setState(() {
            index = i;
            if (i == 0) {
              text = 'home';
            } else if (i == 1) {
              text = 'list';
            } else {
              text = 'notification';
            }
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.format_list_bulleted),
            title: Text('list'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.notifications),
            title: Text('notification'),
          ),
        ],
      ),
    );
  }
}

重要なのはこちら。アニメーションしたいウィジェットをAnimatedSwitcherでラップし、必要に応じて、transitionやduration, curveを設定します。

また、アニメーションさせるウィジェットにはKeyを渡されている必要があるそうです。

my_home_page.dart

...

AnimatedSwitcher(  // animationさせたいウィジェットをラップする
  duration: Duration(milliseconds: 500),   // 必要に応じて、Durationを指定
  transitionBuilder: (child, animation) {  // 必要に応じて、Transitionを指定
    return ScaleTransition(child: child, scale: animation);
  },
  child: Text(
    text,
    key: ValueKey<String>(text),  // Keyを付与
    style: Theme.of(context).textTheme.title.copyWith(
        fontSize: 30.0,
    ),
  ),
),

...

コードはこちらにあがっています。
https://github.com/youmitsu/animated_switcher_test_app

最後までご覧いただきありがとうございました。