Zenn
😽

FlutterとFirebaseの連携

2023/11/18に公開
Firebase
Flutter
Google Cloud
tech

公式ドキュメントの手順をもとに、FlutterとFirebaseの連携を行います

https://firebase.google.com/docs/flutter/setup?hl=ja&platform=web

前提条件

  • IDEをインストール：VS-codeをインストール
  • Flutterをインストール：VMインスタンスにsudo snap install flutter --classicでインストール
  • Firebaseにログイン：プロジェクトの作成まで行う

step1

  • 1.インストールする
「Firebase CLI をインストール」


VMインスタンスへSSH接続し以下のコマンドを実行

  • curl -sL https://firebase.tools | bash
  • firebase login --no-localhost
  • firebase projects:list
  • curl -sL https://firebase.tools | upgrade=true bash
  • 2.firebase loginはFirebase CLIインストール時に行ったので不要
  • 3.VMインスタンスでdart pub global activate flutterfire_cliを実行
  • flutterfireのパスを通すため.bashrcなどにexport PATH="$PATH":"$HOME/.pub-cache/bin"を追記

step2

Flutterアプリの作成
  • githubから取得する場合はgit clone https://github.com/yukip-20000418/hello.gitを実行
  • 新規作成の場合はflutter create helloを実行
Firebaseプロジェクトの作成
  • Firebaseコンソールからプロジェクトを作成する（画面は割愛）
  • 今回は既存のGoogleCloudのプロジェクトを指定した
  • firebase projects:listで表示されればOK
  • Flutterプロジェクトのディレクトリ内でflutterfire configureを実行

step3

  • 1.flutter pub add firebase_core
  • 2.flutterfire configure
  • 3.4.flutter create helloなどで新規作成した場合行う
  • 5.行わない

step4


今回はFirestoreを使用するのでFirestoreのプラグインを追加する

  • 1.flutter pub add cloud_firestore
  • 2.flutterfire configure
  • 3.行わない
  • データベース関連のコーディングを行う

実際に作業した動画はこちら

https://youtu.be/5fWEvScBQG8

Discussion