【Flutter】AnimatedSwitcherの使い方｜アニメーションで表示切り替え

2023年3月5日

Flutterのウィジェット「AnimatedSwitcher」の使い方を紹介します。

「AnimatedSwitcher」を使えばアニメーションで表示されているウィジェットを切り替えできます。

AnimatedSwitcherの使い方

「AnimatedSwitcher」を使用する大まかな流れとしては「child」に表示したいウィジェットをif文などで切り替えできるようにし、「setState」で表示を切り替えます。アニメーション時間は「duration」で指定します。

下記コードでは三項演算子で真偽値「_flag」の値によって表示されるウィジェットを切り替えできるようにし、「FloatingActionButton」で「_flag」の値を切り替えています。

また「AnimatedSwitcher」のアニメーションによる表示切り替えをするには「child」の引数となるすべてのウィジェットに異なる「key」が必要となります。

class _MyAppState extends State<MyApp> {
  bool _flag = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter')),
        body: Center(
          child: AnimatedSwitcher(
            duration: Duration(seconds: 1),
            child: _flag
                ? Container(
                    key: Key('1'),
                    width: 200,
                    height: 200,
                    color: Colors.red,
                  )
                : Container(
                    key: Key('2'),
                    width: 200,
                    height: 200,
                    color: Colors.blue,
                  ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.check),
          onPressed: () => setState(
            () => _flag = !_flag,
          ),
        ),
      ),
    );
  }
}

フェードイン・フェードアウト別に時間を指定

アニメーションで表示が切り替わる際、フェードインとフェードアウト別に時間を指定したい場合は「duration」と一緒に「reverseDuration」を使用します。

「duration」には新しく表示されるウィジェットのアニメーション時間、「reverseDuration」には消えていくウィジェットのアニメーション時間を指定できます。

AnimatedSwitcher(
  duration: Duration(seconds: 2),
  reverseDuration: Duration(seconds: 6),
  child: _flag
      ? Container(
          key: Key('1'),
          width: 100,
          height: 200,
          color: Colors.red,
        )
      : Container(
          key: Key('2'),
          width: 200,
          height: 100,
          color: Colors.blue,
        ),
),

アニメーションの変更

表示が切り替わる際のアニメーションを変更するには「switchInCurve」と「switchOutCurve」を使用します。

「switchInCurve」には新しく表示されるウィジェットのアニメーション、「switchOutCurve」には消えていくウィジェットのアニメーションを指定できます。

AnimatedSwitcher(
  switchInCurve: Curves.ease,
  switchOutCurve: Curves.bounceIn,
  duration: Duration(seconds: 2),
  child: _flag
      ? Container(
          key: Key('1'),
          width: 100,
          height: 200,
          color: Colors.red,
        )
      : Container(
          key: Key('2'),
          width: 200,
          height: 100,
          color: Colors.blue,
        ),
),

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _flag = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter')),
        body: Center(
          child: AnimatedSwitcher(
            duration: Duration(seconds: 2),
            reverseDuration: Duration(seconds: 6),
            switchInCurve: Curves.ease,
            switchOutCurve: Curves.bounceIn,
            child: _flag
                ? Container(
                    key: Key('1'),
                    width: 100,
                    height: 200,
                    color: Colors.red,
                  )
                : Container(
                    key: Key('2'),
                    width: 200,
                    height: 100,
                    color: Colors.blue,
                  ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.check),
          onPressed: () => setState(
            () => _flag = !_flag,
          ),
        ),
      ),
    );
  }
}

以上です。