フラッターでFutureBuilderを使用する方法

フラッターのFutureBuilderについて解説

フラッターの非同期処理に役立つウィジェット、FutureBuilderについて詳しく解説します。FutureBuilderは、特定の結果が準備されるまで待機中のウィジェットの表示状態を自動的に管理します。

FutureBuilderの主要な機能

• 非同期データの読み込み： ウィジェットの初回ビルド時に、Futureオブジェクトからデータを自動的に取得し、さまざまな方法で表示用に処理します。
• 読み込みインジケーター： データ待機中に、CircularProgressIndicatorなどの読み込みインジケーターを表示します。
• エラーハンドリング： エラーを処理し、エラーに関連したユーザーフレンドリーなメッセージを表示します。

FutureBuilderを使用すると、さまざまな状況を効果的に管理するウィジェットを簡単に実装できます。以下では、FutureBuilderをより理解しやすくするために簡単な例を紹介します。

FutureBuilderの基本的な使用例

以下の例では、FutureBuilder を使用してシンプルな非同期データロードタスクを実行する方法を示しています。

非同期データ取得のためのFuture関数の作成

まず、Future オブジェクトを返す非同期関数を作成します。この例では、3 秒待機してから文字列データを返す関数を作成します。

Future<String> getData() async {
  await Future.delayed(Duration(seconds: 3));
  return 'Hello!';
}

FutureBuilder ウィジェットの設定

データの取得が準備できたので、FutureBuilder ウィジェットを使用してデータをロードできます。

FutureBuilder<String>(
  future: getData(),
  builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data);
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    }
    return CircularProgressIndicator();
  },
)

この例では、getData()関数を呼び出してfutureプロパティを設定します。データがロード中の間はCircularProgressIndicatorが表示され、データが準備できたときに結果が表示されるか、エラーが発生した場合は関連するエラーメッセージが表示されます。

FutureBuilderを使用する際の注意点

FutureBuilderを使用してタスクを効果的にこなすために、いくつか考慮すべき点があります。ここでは、FutureBuilderを使用する上での重要なポイントをいくつか紹介します。

1. FutureBuilderを適切に配置する

FutureBuilderは、データ取得に関連するウィジェットだけを含めるように、必要な場所にのみ配置するべきです。そうでないと、データが変更されるたびに他のウィジェットが意図せずに再描画される可能性があります。

2. Futureオブジェクトの再作成を避ける

ビルドメソッド内でFutureオブジェクトを作成すると、ビルドが呼ばれるたびにオブジェクトが再作成されます。これを防ぐために、StatefulWidgetを使用してinitStateメソッド内でFutureオブジェクトを作成するか、カスタムクラスや別の方法でオブジェクトを作成することが推奨されます。

3. ConnectionStateを適切に利用する

FutureBuilderのスナップショットを通じて、様々なConnectionStateのステータスに応じてウィジェットを直接実装できます。ConnectionStateを利用することで、デフォルトのウィジェット、読み込み状態、エラー状態、完了状態の遷移が適切に処理されます。

これらのポイントを考慮することで、FutureBuilderを用いたアプリケーション開発がより効率的になります。次のセクションでは、実践的な例を通じてFutureBuilderの使用をさらに理解深めていきます。

実践的な例 - APIからのデータ取得と表示

このセクションでは、実際のAPIを使用してFutureBuilderでデータを取得し表示する例を紹介します。

1. API呼び出し用のhttpパッケージをインストール

まず、API呼び出しのためにプロジェクトにhttpパッケージを追加する必要があります。pubspec.yamlファイルに以下のコードを追加してください。

dependencies:
  http: ^0.13.3

2. API呼び出し関数の作成

非同期API呼び出しを行う関数を作成します。この例では、JSONPlaceholder APIから投稿データを取得します。

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<List<Map<String, dynamic>>> fetchPosts() async {
  final response = await http.get('https://jsonplaceholder.typicode.com/posts');

  if (response.statusCode == 200) {
    return List<Map<String, dynamic>>.from(json.decode(response.body));
  } else {
    throw Exception('Failed to load posts');
  }
}

3. FutureBuilderを使用してAPIデータを表示

作成したAPI呼び出し関数とFutureBuilderを使用してAPIからのデータを表示します。

FutureBuilder<List<Map<String, dynamic>>>(
  future: fetchPosts(),
  builder: (BuildContext context, AsyncSnapshot<List<Map<String, dynamic>>> snapshot) {
    if (snapshot.hasData) {
      return ListView.builder(
        itemCount: snapshot.data.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(snapshot.data[index]['title']),
            subtitle: Text(snapshot.data[index]['body']),
          );
        },
      );
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    }
    return CircularProgressIndicator();
  },
)

この例を通じて、APIからデータを取得して表示する基本的な方法を体験しました。これを基に、さまざまなシーンでFutureBuilderを活用してアプリを開発することができます。