こんにちは、木崎 誠です。
前回に引き続きToDoアプリのようなものを作っていきます。
今回やりたいこと
今回はFlutterとFirebaseの連携を行いたいです。
このように作ったデータをリアルタイムに読み込んで、アプリに表示することが目標です。
読み込み
FirebaseFirestore.instance.collection(コレクション名);設定さえ済ませると、上記プログラムでFirebaseのデータを読み込むことができました。
StreamBuilder<QuerySnapshot>(
stream: wantToDos.snapshots(),
builder: (context, snapshot) {
//読み込み中の場合にスピナーを表示する
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
}
//ListView.builderは複数の要素を自動で表示してくれるメソッド
return ListView.builder(
//表示数の設定
itemCount: snapshot.data.docs.length,
//表示する項目の設定
itemBuilder: (context, index) {
return ListTile(
title: Text(snapshot.data.docs[index].data()['name']),
subtitle: Text(snapshot.data.docs[index].id),
trailing: Text(snapshot.data.docs[index].data()['point'].toString()),
// trailing: IconButton(
// icon: Icon(Icons.edit),
// onPressed: () {
// showModalBottomSheet(
// context: context,
// builder: (context) {
// return SafeArea(
// child: Column(
// mainAxisSize: MainAxisSize.min,
// children: [
// ListTile(
// leading: Icon(
// Icons.edit,
// color: Colors.blueAccent,
// ),
// title: Text('編集'),
// onTap: () {
// Navigator.pop(context);
// Navigator.push(
// context,
// MaterialPageRoute(
// builder: (context) => AddEditMemoPage(
// memo: snapshot.data.docs[index],
// )));
// },
// ),
// ListTile(
// leading: Icon(
// Icons.delete,
// color: Colors.redAccent,
// ),
// title: Text('削除'),
// onTap: () async {
// await deleteMemo(snapshot.data.docs[index].id);
// Navigator.pop(context);
// },
// ),
// ],
// ),
// );
// });
// },
// ),
onTap: () {
// 確認画面に遷移
Navigator.push(context,
MaterialPageRoute(builder: (context) => WantToDoPage(wantTodo: snapshot.data.docs[index])));
},
);
},
);
}),続いて、StreamBuilderとListView.builderを利用してデータを表示します。
StreamBuilderはstreamに設定されたDBの値が変わるとbuilderを再描画するメソッド、
ListView.builderは複数の要素を自動で表示してくれるメソッドとなります。
無事、データを表示することができました。
苦戦した部分
今回は、やりたいことを選んだ先にそれぞれのタスクを設定しています。
やりたい度の下にある横線からは、別ファイルのページを読み込んでいます。
ここに、 StreamBuilderとListView.builderを表示することに苦戦しました。
問題点は以下の二つです。
- 使うべきwidgetが何かわからない
- FirebaseでやりたいことのIDによる検索ができない
まず1つ目。
すでにScaffoldを使っており、なにが適性か判断できませんでした。
現状、Expandedで画面いっぱいに広げたContainerを利用しています。
2つ目。
以下クエリを投げても結果を取得することがうまくできませんでした。
FirebaseFirestore.instance.collection('task').where('wantId', isEqualTo: widget.wantId);原因は、この問い合わせ結果を格納している変数の型でした。
前例に倣ってCollectionReferenceを利用していたのですが、それではだめ。
Android Studioのエラー検出で提示されたFuture<QuerySnapshot>でもだめ。
結果的に、Queryで結果を取得することで、正しく検索結果を表示することができました。
そのおかげで、やりたいことの固有IDを持っているタスクを検索して、ページ遷移時に絞って表示することができています。
終わりに
まだまだFlutterの学習不足だと痛感しました。
実際にコーディングしてみないと出会わない問題ばかりで、かなり疲れましたが楽しむことができました。
作りたいアプリに最低限ほしい機能はもう少しで完成するので、まずは作りきってからどんどん改善していきたいです。
コメント