🐩

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

2022/05/11に公開

Firebase

はじめに

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

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

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."このようなエラーが出るので以下の記事を参考に設定してみてください。

4. コードを修正する

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

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

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