Flutter_see_for_a_moment

今日はEveryDaySoft代表の永田です。

今回はFlutterの挙動で起動時に１度だけ表示したい画面の対応を共有します。

２度目は表示しない実装です。

Flutterでは僕が確認した中では、起動時は遅延実行ができませんでした。

ということは永続化したデータを読み込む場合に、起動してから表示までにデータ取得が間に合わない状態になります。

なので、起動時は常に同じ状態である、ということです。

起動した瞬間に状態別になるということです。

挙動

左上に123が表示されて、その後321になります。

回避策、起動時はbuilderの返り値がnullになっているので、FutureBuider初期化時は起動時のような画面を見せる。　です。

参考ソース

この記事では表示画面の内容を変える方法です。参考になりました。ありがとうございます。

https://qiita.com/yu124choco/items/b…

コード部分のFutureBuilderは、Widget build(BuildContext context) 内で非同期処理を実行する方法です。_getFutureValue() が実行されると、builder内の関数が実行されますが、以前から初期化時にも実行されていました。以前はたまたまスピードの関係で、表示が上手くいっていた時があったのかもしれませんが、Flutter2.8から起動スピードが上がり、問題を顕著に発見しました。

class MyApp extends StatelessWidget {
  int _counter = 0;

  Future<String> _getFutureValue() async {
    SharedPreferences pref = await SharedPreferences.getInstance();
    var data = pref.getInt("myCount");
    if (data != null) {
      _counter = data;
      print(_counter);
      return _counter.toString();
    }
    return "";
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FutureBuilder(
          future: _getFutureValue(),
          builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
            if (snapshot.data == null) {
              // dummy
              return Text("");
            } else if (snapshot.data.toString().isNotEmpty) {
              // every day
              return MyHomePage(title: "321",);
            } else {
              // only one
              return MyHomePage(title: '123',);
            }
          },
        ),
      ),
    );
  }
}

挙動　初回起動は123を表示し、２回目以降は起動後321を表示します。

このUXにより、ログインの同線なども表示コントロールできるようになりました。

貴重な時間をお読み下さいまして、誠にありがとうございます。