Flutter勉強中です。Firestone からデータを取得して表示するときに躓いてしまったので備忘録。
非推奨なメソッドや返り値の扱いに戸惑ってしまった。
FutureBuilderやStreamBuilderといかに組み合わせて使うかがポイントだった。
※Firebase.initializeApp()
などの初期化は省略しています。
FutureBuilder (最初に一度だけ読み込む)
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
class HogeApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// ★1 FutureBuilderを使う
return FutureBuilder<QuerySnapshot>(
// ★2 futureに`Future<QuerySnapshot>`を渡す。
future: FirebaseFirestore.instance.collection('posts').get(),
builder: (context, snapshot) {
if (snapshot.hasData) {
// ★3 `List<DocumentSnapshot>`をsnapshotから取り出す。
final List<DocumentSnapshot> documents = snapshot.data.docs;
return ListView(
children: documents
.map((doc) => Card(
child: ListTile(
title: Text(doc['text']),
subtitle: Text(doc['email']),
),
))
.toList());
} else if (snapshot.hasError) {
return Text('エラーだよ');
}
});
}
}
-
FutureBuilder
を使う -
futureに
Future<QuerySnapshot>
を渡す。
FirebaseFirestore.instance.collection('posts').get()
古いチュートリアルなどで載っているgetDocuments()
は非推奨。get()
を使うべし。 -
List<DocumentSnapshot>
をsnapshotから取り出す。mapとかで操作するために。ここもdocuments
は非推奨。docsを使うべし。
StreamBuilder (データの更新があるたびに自動で更新)
チャットアプリなどデータの更新が頻繁なものに有効です。
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
class HogeApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// ★1 StreamBuilderを使う
return StreamBuilder<QuerySnapshot>(
// ★2 streamに`Stream<QuerySnapshot>`を渡す。
stream: FirebaseFirestore.instance.collection('posts').snapshots(),
builder: (context, snapshot) {
if (snapshot.hasData) {
// ★3 `List<DocumentSnapshot>`をsnapshotから取り出す。
final List<DocumentSnapshot> documents = snapshot.data.docs;
return ListView(
children: documents
.map((doc) => Card(
child: ListTile(
title: Text(doc['text']),
subtitle: Text(doc['email']),
),
))
.toList());
} else if (snapshot.hasError) {
return Text('エラーだよ');
}
});
}
}
-
StreamBuilder
を使う -
streamに
Stream<QuerySnapshot>
を渡す。
FirebaseFirestore.instance.collection('posts'). snapshot()
-
List<DocumentSnapshot>
をsnapshotから取り出す。ここは同じ。
まとめ
- FutureやStreamを渡して、builderで返り値のsnapshotを処理する
- 躓いたら公式ドキュメントやクラスの定義などを調べよう。
間違いがあれば指摘していただけるとありがたいです。