Flutter_see_for_a_moment
今日はEveryDaySoft代表の永田です。
今回はFlutterの挙動で起動時に1度だけ表示したい画面の対応を共有します。
2度目は表示しない実装です。
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を表示し、2回目以降は起動後321を表示します。
このUXにより、ログインの同線なども表示コントロールできるようになりました。
貴重な時間をお読み下さいまして、誠にありがとうございます。
1件の返信
Right here is the perfect web site for anyone who hopes to find out about this topic. You understand a whole lot its almost hard to argue with you (not that I actually would want toÖHaHa). You definitely put a new spin on a topic that has been discussed for decades. Excellent stuff, just great!