🐩

【flutter】Cloud FirestoreとAuthenticationを使ってwebアプリをつくれるオススメの記事

2022/05/10に公開約1,400字

はじめに

Cloud FirestoreとAuthenticationを使ってwebアプリをつくれるとても良い記事があるのですが、少し古いせいかうまく行かない部分があるので、補足をします。

上から順にやってみてもらいたいのですが、その際に設定してほしいことがいくつかあります。

https://www.flutter-study.dev/firebase/cloud-firestore
https://www.flutter-study.dev/firebase/authentication
https://www.flutter-study.dev/firebase/cloud-firestore-try

1. pubspec.yamlのpackageのバージョンを変更する

記事にある通りの実装ではcloud_firestoreがうまく動きませんでした。

pubspec.yaml
  firebase_core: ^1.0.1
  firebase_auth: ^1.0.1
  cloud_firestore: ^3.1.13

2022/05/11現在は上記を設定すれば問題なく動きます。

2. index.htmlのbodyタグ内の上部にscriptタグを貼る

ビルドしてボタンを押したときfirebase関連の関数を呼び出すのですが、その時エラーがたくさん出ました。以下のSDKがインストールできていないから手動で追加するとよいと記事にあり、実際行うと解消されます。
あらかじめ貼っておくと良いと思います。

index.heml
  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>

3. FirebaseOptionsに引数を追加する

"FirebaseOptions cannot be null when creating the default app."このようなエラーが出るので以下の記事を参考に設定してみてください。

https://zenn.dev/maropook/articles/f82c98a56b14ca

4. コードを修正する

こちらの記事での話です。

https://www.flutter-study.dev/firebase/cloud-firestore-try

バージョンが上がったことでsnapshotが持っているデータが変わったようです。

ドキュメント一覧を取得
documentList = snapshot.documents;
     ↓
documentList = snapshot.docs;
修正するとエラーが消えるかと思います。

Discussion

ログインするとコメントできます