[Flutter]Widget(ウェジェット)をスケールアニメーション(scale animation)で切り替える(switch)には？

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

Widgetをスケールアニメーションで切り替える方法を紹介します。

方法
使用例
まとめ

方法

Widgetをスケールアニメーションで切り替えるには、AnimatedSwitcherを使います。

まず、AnimatedSwitcherの引数「duration」に、Durationでアニメーションの長さを指定します。

AnimatedSwitcher(
  duration: Duration(/*時間*/),
),

次に、引数「child」に表示するウェジェットを指定します。

AnimatedSwitcher(
  duration: Duration(/*時間*/),
  child: Widget()
),

そして、引数「transitionBuilder」で、ScaleTransitionをreturnします。

AnimatedSwitcher(
  duration: Duration(seconds: 1),
  transitionBuilder: (Widget child, Animation<double> animation) {
    return ScaleTransition(child: child, scale: animation); //スケールアニメーション
  },
  child: Widget()
),

最後に、変数などを使って、childに指定しているウェジェットが切り替わるようにします。

ここでは、例として三項演算子を使います。

AnimatedSwitcher(
  duration: Duration(/*アニメーションの時間*/),
  transitionBuilder: (Widget child, Animation<double> animation) {
    return ScaleTransition(child: child, scale: animation);
  },
  child: isChanged ? Widget1() : Widget2(),//ウェジェットの切り替え
),

~~~省略~~~

ElevatedButton(
  onPressed: () {
    setState(() {
      isChanged = !isChanged;
    });
  },
  child: Text('Switch'),
)

これでスケールアニメーションでウェジェットを切り替えることが出来ます。

AnimatedSwitcherの注意点は、keyの設定です。

アニメーションで切り替えるウェジェットには、keyを指定しなければいけません。

使用例

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

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

class _HomeState extends State<Home> {
  var isChanged = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedSwitcher(
              duration: Duration(seconds: 1),
              transitionBuilder: (Widget child, Animation<double> animation) {
                return ScaleTransition(child: child, scale: animation);
              },
              child: isChanged
                  ? Container(
                      key: ValueKey(1),
                      color: Colors.blue,
                      height: 200,
                      width: 200,
                    )
                  : Container(
                      key: ValueKey(2),
                      color: Colors.green,
                      height: 200,
                      width: 200,
                    ),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  isChanged = !isChanged;
                });
              },
              child: Text('Switch'),
            )
          ],
        ),
      ),
    );
  }
}