Flutter

【Flutter】FutureBuilderで非同期にWidgetを生成する

ここ最近、Flutterでアプリを作ってきてある程度の知識がたまってきたので、徐々にこちらでもアウトプットしていこうと思います。

アプリの機能が複雑になってくると、外部との通信や重たい処理の終了を待ってからWidgetを生成したいときがあります。そんなときはFutureBuilderという仕組みを使うと簡単に非同期でWidgetが生成できます。

FutureBuilderの使い方

FutureBuilderはその名の通り、「Future = 非同期処理」の結果を受けてWidgetをビルドする仕組みです。使い方としては、終了を待ちたい処理をfutureに、その結果を受けて実際にWidgetを生成する処理をbuilderに定義します。構文的には以下のような形です。

FutureBuilder(
  future: <何らかの非同期処理>,
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (snapshot.hasData) {
      <処理終了後のWidget生成処理>
    } else {
      <処理中のWidget生成処理>
    }
  },
)

これだけだとよく分からないので、もう少し詳細に解説します。

builderについて

builderに指定する処理の中でWidgetを生成するわけですが、その処理はBuildContextAsyncSnapshotの2つを引数に持つ必要があります。

この内、AsyncSnapshotfutureで指定した非同期処理の結果が詰め込まれるため、このデータを使ってWidgetを生成します。

非同期処理の状態を見る

futureに指定する処理は非同期なので、Widgetツリーの構築時点で処理が終了しているかどうか分かりません。FutureBuilderの場合、指定した非同期処理が終了したかどうかはAsyncSnapshothasDataというメンバで判断することができます

これがtrueであれば終了(=データがある)状態、falseであれば処理待ち(=データがない)状態になります。

非同期処理の結果を取り出す

hasDatatrueであれば、AsyncSnapshotdataメンバを使って処理の結果を受け取ることができます。あとはそのデータを使ってWidgetを生成してあげればOKです。

注意ポイント

true/falseどちらの状態に対してもWidgetを生成する必要があるので、falseなら処理中表示だったり空Containerを作るなどの対応が必要になります。

まとめ

FutureBuilderを使えば、簡単に非同期でWidgetを生成することができます。非同期処理の待ち合わせをフレームワーク内で解決してくれるのは嬉しい限りです。

FutureBuilderはあくまでも、Widgetツリーの生成時に1回だけWidgetを生成する仕組みになります。一度Widgetツリーを構築したあとで、ピンポイントで動的にWidgetを再生成したいときはStreamBuilderという別の仕組みを使うことになりますが、それはまた別の記事で紹介したいと思います。

ではでは

参考

FutureBuilder class - widgets library - Dart API - Flutter API

広告の表示がブロックされています。
広告の表示がブロックされています。

関連記事

Flutter プログラミング

2021/8/2

【Flutter】アプリ内の設定値を実装する方法

アプリ内で独自の設定を作る場合、そのデータを保持する方法を考える必要があります。 SQL、テキストファイルなど選択肢は多々ありますが、shared_preferencesというパッケージを使えば簡単に実装することができます。 Dart packages  2 Users 31 Pocketsshared_preferences | Flutter PackageFlutter plugin for reading and writing simple key-value pairs. Wraps ...

この記事を読む

RaspberryPi Linux

2021/4/18

YoctoでRaspberryPi4のイメージをビルドしてみた

昨今、様々なデバイスでLinuxが動くようになっている中、組み込みLinuxのデファクトスタンダードとなりつつあるのが「Yocto」と呼ばれるビルドシステムです。 組み込みの現場ではその名前を聞くことが増えましたが、まだまだ日本ではドキュメントも乏しくイマイチ掴み所がありません。そこで、まずは使ってみようということでRaspberry Pi4のイメージをビルドしてみることにしました。 目次1 Yoctoとは?2 Raspberry Pi4のイメージを作ってみる2.1 下準備2.2 Yocto本体+ラズパイ ...

この記事を読む

C++ 自作物

2021/8/1

言語処理系をつくろう(第7回):比較演算子を実装する

自作の言語処理系開発日記の第7回です。前回までで変数の実装が終わったので、ここからはいよいよ制御構文を実装…と思ったのですが、制御のためには比較演算子を実装する必要がありました。 ということで、今回は比較演算子を実装していきます。基本的には四則演算と変わりないのであまり難しくはありません。 目次1 比較演算子の仕様2 実装してみる2.1 トークナイザ2.2 構文解析器2.3 コード生成器2.4 実行系(仮想マシン) 比較演算子の仕様 比較演算子を実装する前に、その仕様について少し考えておきます。 比較演算 ...

この記事を読む

C++ 自作物

2021/8/1

言語処理系をつくろう(第6回):変数を実装する

自作の言語処理系開発日記、第6回です。 これまでは四則演算など、電卓レベルの機能実装に取り組んでいましたが、いよいよ変数を扱えるようにしていきたいと思います。これでかなりプログラミング言語っぽくなるかも(・∀・) 今回は新しい仕組みを入れたりと、割と修正がごちゃごちゃしてしまったので、うまくまとめきれていません。ごめんなさい…。 目次1 変数の実装について2 実装してみる2.1 トークナイザ2.2 構文解析器2.3 コード生成器2.4 実行系(仮想マシン) 変数の実装について これまでは即値しか扱っていな ...

この記事を読む

C++ 自作物

2021/8/1

言語処理系をつくろう(第5回):連続した式の実行

自作の言語処理系開発日記の第5回です。 前回までで括弧を含んだ四則演算ができるようになりましたが、このままでは単なる電卓止まりです。ということで、今回は複数の式を連続して実行できる仕組みを実装していきたいと思います。 目次1 生成規則を考える2 実装してみる2.1 構文解析器2.2 コード生成 生成規則を考える これまでは入力全体を1つの式として解釈していましたが、今回は式の区切りを定義して複数の式として解釈できるようにします。 C言語だと「;」や「,」が区切り文字として使われますが、開発中の言語(roo ...

この記事を読む

  • このブログの中の人

Ryo Yoneyama

とある会社でソフトウェアエンジニアをしています。技術的な備忘録を中心にまとめてます。ネタがあれば日記も書きます。

-Flutter

© 2021 Corgi Lab. ~備忘録のための技術ブログ~