はじめに
今回はFirebaseのFirestoreを使えるようにして、さらに、FirebaseのhostingにdeployしてWebアプリとして公開できるようにしようと思います。
更新履歴
2021.5.7 初回投稿
環境
- macOS Big Sur(11.2.3)
- Flutter (Channel stable, 2.0.6, on macOS 11.2.3 20D91 darwin-x64, locale ja-JP)
- Android toolchain - develop for Android devices (Android SDK version 30.0.3)
- Xcode - develop for iOS and macOS
- Chrome - develop for the web
- Android Studio (version 4.1)
- VS Code (version 1.56.0)
参考にしたサイト
準備
- Firebaseにプロジェクトを作成し、hostingを有効にしておく
やりたいこと
- WebでFirebase Firestoreを使って公開したい
実装手順
1.Firebaseのプロジェクトでhostingを設定する(準備でできているはず)
2.Flutterでプロジェクト作成
null safetyにしないと怒られるので、pubspec.yamlのsdkを以下のように変更
pubspec.yaml
environment:
sdk: ">=2.12.0 <3.0.0"
3.Flutterプロジェクト内でfirebase初期化
firebase init
・What do you want to use as your public directory?では、build/webを指定
? What do you want to use as your public directory? build/web
? Configure as a single-page app (rewrite all urls to /index.html)? No
? File build/web/404.html already exists. Overwrite? No
i Skipping write of build/web/404.html
? File build/web/index.html already exists. Overwrite? No
4.webアプリをビルド
flutter build web
5.デプロイ
firebase deploy
6.表示されたURLで動作を確認。いつものデモ画面が表示されます。
Firestore設定
1.別記事を参照して実装
【Flutter】iOS/Android/WebでFirebase Firestoreを使えるようにする。 - Qiita
2.webアプリをビルド
flutter build web
3.デプロイ
firebase deploy
- 表示されたURLで動作を確認。
5.上記のように表示されればOK。FABを押して、Firestoreに追加されていればOK
サンプルソースコード
以上