こんにちは。ゆうきです。
最近はFlutterを使ってチャットアプリを開発しています。
今回は画面描画完了後にアニメーションの開始処理を行う方法について調べて実装したので、そのやり方を共有しようと思います。
まずはこの記事で出来るようになることのイメージをどうぞ。
こんな感じで画面描画時にアニメーション再生したり等、任意の処理を行うことが出来るようになります。
今回は画面描画時に画像をフェードインさせるだけのサンプルコードで解説します。
まずはサンプルコードの全体像をどうぞ
import 'package:flutter/material.dart';
class SplashPage extends StatefulWidget {
const SplashPage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<SplashPage> createState() => _SplashPageState();
}
class _SplashPageState extends State<SplashPage> {
// フェードインアニメーションの発火フラグ
bool _opacity = false;
@override
void initState() {
super.initState();
// ここがミソ！
WidgetsBinding.instance.addPostFrameCallback((_) {
setState(() {
_opacity = true;
});
});
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
// フェードインアニメーション
return Scaffold(
// フェードインアニメーション用のWidget
body: AnimatedOpacity(
opacity: _opacity ? 1 : 0,
duration: const Duration(seconds: 3),
child: Image.asset('assets/images/logo.png'),
),
);
}
}
サンプルコードの解説にうつる前に、今回使用するWidgetの「AnimatedOpacity」について、簡単に説明します。
AnimatedOpacityとはその名の通り、子WidgetのOpacity(透明度)を変化させる際にアニメーションをつける為のWidgetです。
setStateでopacityが書き換えられた際に、指定した秒数でいい感じにアニメーションをつけてくれます。
より詳しく知りたい方はこの記事でAnimatedOpacityについて詳しく解説があるので、併せてチェックしてみてください。
それではサンプルコードの解説をします。
重要な箇所をそれぞれ見ていきましょう
// フェードインアニメーションの発火フラグ
bool _opacity = false;まず14行目でフェードインアニメーションの発火フラグを宣言し、falseで初期化しています。
そして、20行目からの下記部分でsetStateを呼び出し、_opacity変数をtrueにすることでアニメーションを発火させます。
ここが今回のミソ（大事なところ）です。
WidgetsBinding.instance.addPostFrameCallback((_) {
setState(() {
_opacity = true;
});
});WidgetsBinding.instance.addPostFrameCallbackというメソッドを呼んでいますね。WidgetsBinding.instance.addPostFrameCallbackとはWidgetのbuild完了後に実行されるコールバック関数を定義するためのメソッドです。
このコールバック関数内で_opacity変数を書き換えることによって、Flutterの画面描画のフローは下記のようになります。
- _opacityの値をfalseで初期化する
- initState内でbuild完了時に実行する処理を定義する（WidgetsBinding.instance.addPostFrameCallback）
- Widgetのbuildを行う ⇦この時_opacityはfalseなので、AnimatedOpacityの子Widgetは透明の状態でbuild
- build完了後にWidgetsBinding.instance.addPostFrameCallbackでsetStateが実行される
- ↑setStateにより、画面を再描画 ⇦_opacityはtrueなので、AnimatedOpacityの子Widgetが表示される
というわけで、画面描画時のフェードインアニメーションを実装した際に学んだことを解説してみました。
今回学んだWidgetsBinding.instance.addPostFrameCallbackはアニメーションの実行だけでなく、任意の処理を実行できるので、画面描画終了直後に何か処理を行いたいときはこれを使って書こうと思います。
それでは皆さんも良い開発ライフを〜
