flutter for webからFirestore上のデータを取得する
flutter for webからは以下の記事があったが、うまく動かなかったので他の方法で試行錯誤。
fetchMessages()内の処理が呼ばれなかった。。。もしかしたらStatelessWidgetの中で動かそうとしたからかも？
モバイル用flutterとの違いを中心に解説。
違い1
code: pubspec.yaml
// モバイル用flutter の場合
dependencies:
flutter:
sdk: flutter
firebase_core: ^0.3.0
cloud_firestore: ^0.9.5
// flutter for webの場合
dependencies:
flutter_web: any
flutter_web_ui: any
uuid: any
firebase: ^5.0.0
code: main.dart
// モバイル用flutter の場合
import 'package:cloud_firestore/cloud_firestore.dart';
// flutter for webの場合
import 'package:firebase/firebase.dart';
import 'package:firebase/firestore.dart' as fs;
違い2
当然ウェブとモバイル（iOS/ Android）ではFirebaseアプリの追加の方法が異なる
ここ、うまくやる方法がある気がする。。。
initializeApp()はJavaScriptで行わず、Dartコード側で行うことにした。（どっちでもできるのかも？）
code: index.html
main.dartのmain()の中で、Firebase構成オブジェクトをセットしinitializeApp()
code:main.dart
void main() {
initializeApp(
apiKey: "...",
authDomain: "...",
databaseURL: "...",
projectId: "...",
storageBucket: "...",
messagingSenderId: "...",
);
runApp(MyApp());
}
以下を参考にStreamBuilderを使ってFirestoreからデータを取得し、表示する。
topicsというFirestoreコレクションからデータを取得・表示している
前述のように上記の記事と使用しているFirebaseプラグインが異なるので、若干メソッド名などが異なる
でもこの方法（StreamBuilder）だと、UI描画コードと、データ取得コードが混じるからいやだなあ。前述の記事の実装の方が良さそう。
code: main.dart
class Tiles extends StatelessWidget {
@override
Widget build(BuildContext context) {
return StreamBuilder<fs.QuerySnapshot>(
stream: firestore().collection('topics').onSnapshot,
builder: (BuildContext context, AsyncSnapshot<fs.QuerySnapshot> snapshot) {
if (snapshot.hasError)
return Text('Error: ${snapshot.error}');
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return Text('Loading...');
default:
return GridView.count(
crossAxisCount: 3,
shrinkWrap: true,
children: snapshot.data.docs.map((fs.DocumentSnapshot document) {
return ListTile(
title: Text(document.get('name')),
);
}
).toList(),
);
}
},
);
}
}