[Flutter]FutureBuilderは正確には非同期処理を待ってからWidgetを生成するわけではない

Flutterには非同期処理の結果を待ってからWidgetを生成してくれる「FutureBuilder」というWidgetがありますが、

blank

これは正確には、非同期処理の結果を「待って」からWidgetを生成するわけではありません。

というのも、Widgetがbuildメソッドのタイミングで描画されないということはFlutterのフレームワーク上許容していないからです(buildメソッド発動のタイミングでは必ずWidgetは描画される)。

なぜなら、非同期処理の結果が出るまで描画しないと、アプリを使っているユーザーからすると画面が固まってしまう状態が続くことになり、応答なしエラー(Application Not Responding:ANR)が発生してしまう可能性があるからです。

Android アプリの UI スレッドが長時間ブロックされると、アプリケーション応答なし(ANR)エラーが発生します。アプリがフォアグラウンドにある場合、図 1 に示すように、ユーザーにダイアログが表示されます。ANR ダイアログにより、ユーザーはアプリを強制終了できます。UI の更新を担当するアプリのメインスレッドがユーザー入力イベントを処理または描画できず、ユーザーに不満が生じるため、ANR は問題です。

https://developer.android.com/topic/performance/vitals/anr

ということで、FutureBuilderというのは、正確には

  • 非同期処理の完了を待って「最初の」描画をするのではなくて、
  • 非同期処理の完了を待って「再」描画してくれるWidget

ということになります。

たとえば、以下のコード例の場合は、

  • 非同期処理の結果が出るまでの間はLoginScreenが
  • 非同期処理の結果が出たら(かつ正常な結果の場合は)HomeScreenが

描画されることになります。

return MaterialApp(
  home: FutureBuilder(
    future: loginViewModel.isSingIn(),
    builder: (context, AsyncSnapshot<bool> snapshot){
      print("FutureBuilder#builder: ${snapshot.data}");
      if (snapshot.hasData && snapshot.data == true){
        return HomeScreen();
      } else {
        return LoginScreen();
      }
    },
  ),
);

(詳しくは、以下の動画で解説していますので、よろしければご覧ください)

blank

こんな記事も読まれています

今すぐプレゼントを受け取る(約6時間のFlutter初級編体験版動画講座を無料でプレゼント)
blank

はじめての方へ

blank
みんプロ式プログラミング講座体系・ラインナップ
みんプロ式プログラミング講座受講の流れ(割引特典利用方法)
サイトマップ(みんプロHPコンテンツ一覧)
運営会社概要

おすすめコンテンツ

プログラミングを学ぶとどんないいことがあるのか
みんプロ式を選んでいただける6つの理由
ぼくの人生挫折ヒストリー(代表者プロフィール)
ぼくのプログラミング挫折ヒストリー(無料メール講座・6大特典付き)
今最も注目のアプリ開発ツール「Flutter(フラッター)」ミニ動画講座

みんプロ作成アプリ

blank
blank
blank
blank
blank

みんプロ式動画講座(コア・Flutter)

ゼロからのFlutter(初級編)-はじめてのプログラミングからアプリリリースまで-
Flutter中級編1-Web通信・設計・状態管理・DIの基礎-
Flutter中級編2-Firebase/地図・カメラ連携等の基礎-
Flutter中級編3-広告/アプリ内課金等の基礎-
Flutter中級編4-Webアプリとレスポンシブデザインの基礎-

みんプロ式動画講座(サテライト)

Flutter/Dartトラブルシューティング・小ネタ集(コア初級編受講で無料プレゼント)
ゼロからのGit・GitHub(コマンドラインツールを極力使わないバージョン管理入門)
Flutter/Dartにおける設計・状態管理・DIの解説集
Dart逆引き大辞典
Flutterにおけるテストの基礎
blank
blank

TOP