見出し画像

【Flutter/Dart】FutureBuilderって、なに？🤔

ごろじ

FutureBuilderって、なに？🤔

FutureBuilderはFlutterで非同期プロセスを扱う際に使われるウィジェットです。
これにより、データの読み込みや他の時間がかかる処理をバックグラウンドで実行しつつ、UIを適切に更新できます。
FutureBuilderは`future`と`builder`の2つの主要なプロパティを持ち、`future`に非同期処理を指定し、`builder`で処理結果に基づいたウィジェットを構築します。
処理中にはローディングインジケーターを、完了後にはデータを表示し、エラーがあればエラーメッセージを表示します。
このウィジェットは、アプリの応答性とユーザーエクスペリエンスを向上させるために重要です。

FutureBuilderのサンプルコード

FutureBuilder<String>(
  future: fetchUserData(), // 非同期関数を指定
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator(); // ローディングインジケーターを表示
    } else if (snapshot.hasError) {
      return Text('エラー: ${snapshot.error}'); // エラー時の処理
    } else {
      return Text('ユーザーデータ: ${snapshot.data}'); // データを表示
    }
  },
)

このコードでは、fetchUserData() 関数の結果を待ち、その結果に基づいて異なるウィジェットを表示します。FutureBuilder は、非同期データの読み込み中にユーザーにフィードバックを提供し、データが利用可能になったら内容を更新するのに便利です。

snapshotとcontextとは？？🤔

`context` と `snapshot` は `FutureBuilder` で使用される重要なパラメータです。

  • context: `BuildContext` のインスタンスで、現在のウィジェットツリー内の位置を表します。これにより、ウィジェットは、テーマやロケールなど、アプリの他の部分からの情報にアクセスできます。

  • snapshot: `AsyncSnapshot<T>` タイプのオブジェクトで、非同期操作の最新の状態を含みます。`snapshot` は非同期操作の結果（データやエラー）やその状態（完了、待機中など）を表します。これにより、非同期操作の結果に基づいてUIを適切に更新できます。

`FutureBuilder` を使用する際、これらのパラメータを適切に利用することで、非同期操作の結果を効率的にウィジェットに反映させることができます。

（難しいっすけど、なんとなく、分かってきた気がするっす！😁）


よろしくお願いしますッ！