【Flutter】FutureBuilderとは

Flutter開発においてFutureBuilderを使用することが多く自分なりに理解を深めてまとめたいと思いました。
備忘録としてここに記載します。

非同期処理とは
Futureとは
FutureBuilderとは
使用例
最後に

非同期処理とは

FutureBuilderを説明する前に前提として非同期処理とは何かを理解する必要があると思います。
こちらのサイトを参考にしてみてください。

Error 403 (Forbidden)｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

403エラーページです。用語の意味を「ざっくりと」理解するためのIT用語辞典です。

私の中では、Twitterのいいねの数の増加などアプリでは非同期がないとユーザーがイライラするよという認識です。

Futureとは

非同期処理を実装するためのクラス

FutureBuilderとは

非同期処理に対応するためのメソッド

使用例

簡単な例として以下２点のシンプルなアプリを作成してみます。

Firebaseのユーザーデータを取得する
データあり→アプリの画面へ　なし→Container表示

全体コード

FutureBuilder(
            future: Firestore.getUser(ユーザーのID),
            builder: (context, snapshot) {
              //処理呼び出し中はぐるぐるを表示
              if(snapshot.connectionState == ConnectionState.waiting) {
                return const Center(
                      child: CircularProgressIndicator(),
                );
              }
              if(snapshot.hasData) {
                return  AppMainPage();
              } else {
                print('future not data');
                return Container();
              }
            },
          );

  static Future<dynamic> getUser(String uid){
     final users = FirebaseFirestore.instance.collection('users');
    try{
      -- ここにユーザー取得などの処理記載

      print('ユーザ取得成功'); 
      return true;
    } on FirebaseException catch(e) {
      print('ユーザ取得失敗: $e'); 
      return false;
    }
  }

future:

FutureBuilderの書き方として以下のように書く必要があります。

FutureBuilder(
            future: Future関数

Future関数

今回使用したFuture関数です。

引数のユーザーIDがあればtrueをなければfalseを返しています。
Firebaseのエラーハンドリングとして on FirebaseException catchを使用しています。

static Future<dynamic> getUser(String uid){
     final users = FirebaseFirestore.instance.collection('users');
    try{
      -- ここにユーザー取得などの処理記載

      print('ユーザ取得成功'); 
      return true;
    } on FirebaseException catch(e) {
      print('ユーザ取得失敗: $e'); 
      return false;
    }
  }

snapshotの使い方

Future関数で取得したものを使うためにsnapshotを使用する必要があります。
snapshotは何種類かあったりと理解が難しいですが、下記サイトがわかりやすかったです。

FlutterでFirestoreのデータを取得するキホン

今回は、connectionStateとhasDateを使用して分岐処理を行なっています。
二つともその名の通りで下記のようなイメージです。

connectionState: データ取得の通信状態(通信中なのか、通信が終わったのか)
hasDate: データが存在するか（データあり、データなしか）

   if(snapshot.connectionState == ConnectionState.waiting) {
                return const Center(
                      child: CircularProgressIndicator(),
                );
              }
              if(snapshot.hasData) {
                return  AppMainPage();
              } else {
                print('future not data');
                return Container();
              }

最後に

今回はデータがあるかどうかの確認のみですが、本来はデータを使って表示させる、更新されるなどいろんな処理がFutureBuilderによって可能になります。その辺も後日まとめていきたいと思います。

ではまた。