ネットワーク通信中などでユーザーの操作を防ぎたい時には、全画面をやや暗くしてローディングアニメーションを表示する手法がよく使用される。
この様なUIを実現するためのパッケージはpub.devにも多く存在するが、折角なのでスクラッチで作成してみる。
完成アプリの動作
ソースコード
以下に重要そうな箇所を抜粋して説明する。詳細はリポジトリを参照。
Stackウィジェット
本アプリではStackウィジェットを使用して画面全体を覆うレイヤーをScaffoldウィジェットの上に重ねている。
Stackウィジェットのchildrenプロパティは、下に記述するものほどアプリ上では上に表示されるので順番に注意。
if(_isLoading)記法
childrenプロパティに渡すリストにて、if(...)と記述すると、直後のウィジェットの表示非表示を制御できる。
本アプリでは_isLoadingというフラグを用いてロードアニメーションの表示非表示を制御しているので、条件式には_isLoadingを渡す。
Opacityウィジェット
子ウィジェットの透明度を調整できるウィジェット。今回は透明度を30%に設定した。
opacityプロパティが1に近づくほど不透明になる。
ModalBarrierウィジェット
ModalBarrierウィジェットの下に表示されているウィジェットへのユーザー操作を妨げるウィジェット。
今回だとScaffoldウィジェットが該当する。
CircularProgressIndicatorウィジェット
material designのローディングアニメーションを実装するためのウィジェット。 プロパティをいじることで挙動を制御できる。今回はデフォルトのまま。
_startOverlayLoadingAnimationメソッド
_isLoadingフラグを制御するためのメソッド。
ボタンをタップするとFuture.delayed()で3秒間_isLoadingをtrueにする。その後_isLoadingをfalseに戻し、ロードアニメーションを非表示にしている。
