【日本語版】【Flutter】Widget of the Week – #14 StreamBuilder【要約】

動画

要約

  • 現代のアプリは様々なイベントが様々なタイミングで発生する
    (だれかが「いいね」してくれたり、新規で画像をアップロードしたり)
  • このイベントのことをDartではStreamと呼び、DartはStreamを良くサポートしている
  • FlutterでStreamBuilderを使えば、なにかイベントが起きるたびその情報を自動でキャッチし、アプリの表示に反映させることができる

内容

現代のアプリは非同期性が高いです。

様々なことが、いつでも、どんな順序でも起こり得ます。
(補足:誰かがいいねする、画像をアップロードする、返信をくれる、など)
 

現代のアプリはいつどんなイベントが起きるかわからない。

開発者はこれらのイベントをStream(データの流れ)として考えることができ、DartではそのままStreamと呼んでいます。
 

これらのイベントをデータの流れと考え、Stream(流れ)と呼ぶ。

DartはStreamを使ったデータの非同期を非常によくサポートしています。

さて、FlutterアプリではStreamをどのように使えばいいでしょうか?
 

FlutterではStreamBuilder widgetを使ってください!
 

StreambuilderはStreamから流れてくるイベントを監視(リッスン)します。

新しいイベントが発生するたびに、再ビルドすることができ、
常に最新の状態を表示することができます。
 

StreamBuilderがクラウド上のデータを監視してくれて、
変更があった場合はその変更をキャッチし、画面に反映してくれる。
開発者はわざわざクラウドの状態を確認するロジックを書く必要が無い。

StreamBuilderの使い方についてですが、まずStreamBuilderにStreamを渡します。
 

その後、ビルダーを書いてください。
snapshotからデータを取得できるので、そのデータをもとに画面に表示するwidgetを返します。
 

最初のsnapshotを取得できるまでの間、何らかのwidgetを表示するために、初期値を設定することも可能です。
 

initialDataとして、42を指定。
クラウドからデータが取得できるまでは、42という値でwidgetを構築する。

initialDataを使わない場合は、スナップショットにデータがあるかどうかを確認してください。
まだデータを取得できていない場合(snapshot.hasDataがfalseの場合)、ローディングのwidget(下図のCircularProgressIndicator)を表示できます。
 

より詳細に確認するには、connectionStateを確認してください。
 

また、いつもあなたがやっているように、エラーのチェックもしてください。
その際、snapshot.hasErrorが役に立つでしょう。
 

StreamBuilderはFirebaseからのデータ、センサーイベント、さらにはネットワーク接続ステータス等で使用できます。
 

StreamBuilderと他のすべてのウィジェットの詳細については、flutter.ioを見ててください。

まとめ

Widget of the Weekの#14 StreamBuilderの日本語翻訳版でした。

StreamBuilderは非同期処理の主役とも言えるwidgetです。

おそらく、Firebaseを使う場合は必ず使うことになると思います。
基本的な実装の流れやconnectionStateやhasErrorなど押さえておくべきポイントをしっかり理解しておくととても役に立ちそうです。

■ 次の記事はこちら
#15 – InheritedModel

■Widget of the Week まとめ
Widget of the Week 一覧