どうも、ちょげ(@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'),
)
],
),
));
}
コメント