🐇

【Flutter】buildメソッドの完了を待って処理を行う方法(after_layoutパッケージ)

2022/05/26に公開

Flutter勉強中のcub_236です。
after_layoutパッケージを用いて、画面起動後最初のbuildメソッドの完了を待って任意の処理を行う方法を紹介します。
https://pub.dev/packages/after_layout

背景

個人開発しているアプリのある画面で、起動直後のbuildメソッド中にriverpodの状態変化をしてしまうことでエラーが発生していました。
これを回避するために、buildメソッドの完了を判断できないかを調査したところ、after_layoutパッケージを用いることで対応できることがわかりました。

環境

flutter doctorによるバージョン情報

Flutter (Channel stable, 3.0.1, on Microsoft Windows [Version 10.0.19043.1706], locale ja-JP)

実装手順

after_layoutパッケージの取得

いつもどおりpub addし、after_layoutパッケージを取得します。

$ flutter pub add after_layout

with AfterLayoutMixinの適用

対象の画面クラスに対して、with句で「AfterLayoutMixin」を適用します。

class _HogePageState extends State<HogePage> with AfterLayoutMixin<CountDownView> {

言わずもがなですが、importが必要です。

import 'package:after_layout/after_layout.dart';

afterFirstLayoutメソッドのオーバーライド

対象の画面クラスにて、afterFirstLayoutメソッドをオーバーライドし、bulidメソッド完了直後に行いたい処理を記述します。


void afterFirstLayout(BuildContext context) {
  /* buildメソッド完了直後に行いたい処理 */
}

Discussion