🔰

Flutter × Firebase をはじめよう！【導入編】

に公開
Firebase
Flutter
初心者
環境構築
tech

概要

FlutterでFirebaseの環境構築を何度も行うので、見返せるように手順をまとめました!
Firebaseプロジェクトの作成から、Flutterアプリで使えるようにするまでをカバーしています。

環境

・Mac：M4
・macOS ：Sequoia 15.5
・Visual Studio Code
・Flutter:3.32.7
・パッケージ
・firebase_core: ^4.0.0
・cloud_firestore: ^6.0.0
・firebase_auth: ^6.0.0

Firebaseでプロジェクトを作成する

まずは Firebase 側の設定からスタート！

  1. Firebase公式サイトにアクセス
    https://firebase.google.com/?hl=ja
  2. 「Go to Console」へ移動（未ログインの場合は Google アカウントでログイン）
  3. 「Firebaseプロジェクトを作成する」 → 手順に沿って Firebase プロジェクトを作成

🎉 これで Firebase 側の準備は完了です！

FlutterにFirebaseを追加する

基本的に公式サイト通りに進めていきます。

必要なツールのインストール

  1. Firebase CLIのインストール
    https://firebase.google.com/docs/cli?hl=ja#setup_update_cli

  2. Google アカウントで Firebase にログイン（以下全てターミナルで実行）

firebase login

Firebase を使用するようにアプリを構成する

  1. 任意のディレクトリで次のコマンドを実行して、FlutterFire CLI をインストール
    dart pub global activate flutterfire_cli

  2. 作成したFlutterプロジェクトディレクトリで、次のコマンドを実行して、アプリの構成ワークフローを開始

flutterfire configure

  1. 先ほど作成したFirebaseプロジェクトを選択

  2. 作成するアプリを選択しEnter（スペースキーでチェックのオンオフ可能）

アプリで Firebase を初期化する

  1. Flutterプロジェクトディレクトリで、コアプラグインをインストール
flutter pub add firebase_core

他にも必要なプラグインがあれば以下から探して追加する。
https://firebase.google.com/docs/flutter/setup?hl=ja&platform=ios#available-plugins

flutter pub add <プラグイン名>
  1. 続いて次のコマンドを実行して、Flutter アプリの Firebase 構成を最新にします。
flutterfire configure
  1. Flutter アプリケーションを再ビルドします。
flutter run

まとめ

お疲れ様です！FlutterアプリからFirebaseを使えるようになりました！
次回はFirebase　Authenticationを使用してサインアップ機能とログイン機能を作成していきます！

Discussion