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

関連記事

Linux

2020/3/28

SSHで公開鍵認証を設定する方法

これまでに何度かLinuxでサーバーを立てて遊んだりしていますが、毎回忘れてしまうのがSSHの公開鍵認証の設定方法です。一度設定してしまえば頻繁に触るものでもないので、ついつい忘却の彼方へ消えてしまいます(´・ω・`) この先、毎回調べなおすのも面倒なので、これを機に手順をまとめておくことにしました。ちなみに、サーバー(接続される側)がLinuxの想定です。 目次手順1:クライアント側で鍵ペアを作る手順2:サーバーに公開鍵を設定する手順3:SSHサーバーの設定 手順1:クライアント側で鍵ペアを作る まずは ...

この記事を読む

Flutter

2020/3/10

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

ここ最近、Flutterでアプリを作ってきてある程度の知識がたまってきたので、徐々にこちらでもアウトプットしていこうと思います。 アプリの機能が複雑になってくると、外部との通信や重たい処理の終了を待ってからWidgetを生成したいときがあります。そんなときはFutureBuilderという仕組みを使うと簡単に非同期でWidgetが生成できます。 目次FutureBuilderの使い方builderについて非同期処理の状態を見る非同期処理の結果を取り出すまとめ参考 FutureBuilderの使い方 Fut ...

この記事を読む

日記 自作物

2020/3/7

FlutterでToDoアプリをつくってみた

最近、Flutterを使ったモバイルアプリの開発にハマっているのですが、前回このブログでも紹介した「SaltyStock」というアプリに続き、新しいアプリをリリースしました(・∀・) App Store‎CotoMemo‎CotoMemoはタブ型のToDoアプリです。仕事からプライベートまで、日々のやるべきこと(Coto)を気軽にメモ(Memo)する感覚で整理することができます。【主な機能】・タブによるタスク管理タブ毎にタスク整理ができるので、このアプリ1つで仕事もプライベートもあら... リリースしたの ...

この記事を読む

日記 自作物

2019/12/22

FlutterでiOS/Androidアプリを作ってみた

2019年の密かな目標の1つとして「スマホアプリを作ってリリースする」というのを掲げていたのですが、なんとか年内に達成することができました(・∀・) どうせ作るならiOS/Android両対応がいい!ということで、FlutterというGoogle製のフレームワークを使いました。開発したのは「SaltyStock」というアプリです。長期保有して塩漬け状態になっている株式銘柄を管理するというかなりニッチなアプリです笑。 「個人的にこういうのあったらいいな」というものを作ることができたので、概ね満足です。もし興 ...

この記事を読む

Linux

2020/3/10

Docker + Growiでイントラ向けWikiを立ち上げる

チーム開発をしていくうえで、課題の1つになるのが情報共有です。チームの歴史が長いと経験値は溜まっていきますが、それらが情報として整理されていないとメンバー交代時などに大きなコストが発生します。 そこで、イントラ向けのナレッジベース(Wiki)を探していたところ、Growiという良さげなOSSを見つけたので、お試し環境を立ち上げてみることにしました。手元の環境はUbuntu18.04ですが、Linuxであれば大体同じような手順になると思います。 目次DockerのインストールGrowiの準備接続ポートの変更 ...

この記事を読む

-Flutter

Copyright© Corgi Lab. ~備忘録のための技術ブログ~ , 2020 All Rights Reserved.