Flutter

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

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

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

FutureBuilderの使い方

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

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

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

関連記事

日記 自作物

2020/5/14

GitHubのコントリビューション数をグラフ化してみた

先日、ブログのトップページにGitHubの草を表示してみたという記事をあげました。 Corgi Lab. ~備忘録のための技術ブログ~ブログ内にGithubの草を生やしてみた今回はちょっとした小ネタです。お気づきの方もいるかもしれませんが、PC限定でブログのページ上部にGithubのコントリビューションを表示してみました。俗にいう「草を生やす」というやつです。特に深い意図はありませんが、これがあるだけでぐっと技術系ブログ色が... GitHubの草(コントリビューション)は日々の活動が可視化されるので、個 ...

この記事を読む

RaspberryPi

2020/5/6

Raspberry Pi4上のUbuntu ServerでCPUクロックを制限する方法

Raspberry Pi4は消費電力が大きく発熱がちょっと心配です。そのため、用途によっては意図的にCPUの動作クロックを絞って消費電力と発熱を抑えるという運用もアリかと思います。 CPUクロックの設定方法の多くはRaspbianを例に挙げていますが、Ubuntu Serverでも同じ方法で設定できたので、備忘録として残しておきたいと思います。 動作環境は、 ・Raspberry Pi4本体:モデルB(メモリ4GB) ・OS:Ubuntu Server 20.04 です。 目次CPU状態のチェッククロック ...

この記事を読む

RaspberryPi Linux

2020/5/2

RaspberryPi4でUbuntu Server 20.04を動かしてみた

新しい遊び道具として、RaspberryPi4(ModelB 4GBメモリ)を買いました。 前モデルと比べて大幅に性能アップしているということで、学習用のLinux環境としても実用的なものになりそうです。ということで、今回はRaspbian(ラズパイの標準OS)ではなく、Ubuntu Serverをインストールして使ってみたいと思います(・∀・) 目次OSイメージのダウンロードSDカードにイメージを書き込む初期起動+設定固定IPアドレスを設定する OSイメージのダウンロード まずはUbuntu Serve ...

この記事を読む

日記

2020/5/14

ブログ内にGithubの草を生やしてみた

今回はちょっとした小ネタです。 お気づきの方もいるかもしれませんが、PC限定でブログのページ上部にGithubのコントリビューションを表示してみました。俗にいう「草を生やす」というやつです。 特に深い意図はありませんが、これがあるだけでぐっと技術系ブログ色が強まるので、遊び半分で組み込んでみました。そこまで難しくないので、その方法を紹介しようと思います。 目次生やすだけなら簡単ちょっとひと工夫画像の取得はwget+Cronであとはブログ内に貼るだけ後日談:自分でグラフをつくってみました 生やすだけなら簡単 ...

この記事を読む

Flutter

2020/4/12

【Flutter】リリースチャンネルについて調べてみた

この記事を書いている2020/04/12時点で、FlutterのiOS実機ビルドが以下のようなエラーで通らなくなっています(´・ω・) Building for iOS, but the linked and embedded framework 'App.framework' was built for iOS Simulator. どうやら、最新のXcode11.4とstableチャンネルの組み合わせが原因らしく、Flutterのチャンネルを切り替えてあげればOKとのことでした。 とりあえず、stab ...

この記事を読む

-Flutter

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