[Flutter]2つのテキストをクロスフェードアニメーションで切り替えるには?

Flutter

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

2つのテキストをクロスフェードアニメーションで切り替えるには、どうしたらいいのでしょうか?

スポンサーリンク

方法

            AnimatedCrossFade(
                firstChild: Text('Hello'),
                secondChild: Text('こんにちは'),
                crossFadeState: isEng
                    ? CrossFadeState.showFirst //firstChildを表示
                    : CrossFadeState.showSecond,//secondChildを表示
                duration: Duration(seconds: 1), //アニメーションの時間
            ),

テキストをクロスフェードアニメーションで切り替えるには、「AnimatedCrossFade」を使います。

AnimatedCrossFadeを使うには、fiestChildとsecondChildに切り替えるテキストを指定します。

そして、crossFadeStateで表示するテキストを条件分岐で切り替えます。

これでテキストのクロスフェードアニメーションが出来るようになります。

全体のコード

  bool isEng = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Sample'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              AnimatedCrossFade(
                firstChild: Text('Hello'),
                secondChild: Text('こんにちは'),
                crossFadeState: isEng
                    ? CrossFadeState.showFirst
                    : CrossFadeState.showSecond,
                duration: Duration(seconds: 1),
              ),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    isEng = !isEng;
                  });
                },
                child: Text('Switch'),
              )
            ],
          ),
        ));
  }

コメント

タイトルとURLをコピーしました