Flutterアプリケーション開発概論

【パッケージ設定】firebase_core・firebase_auth・cloud_firestoreを追加する

第7節LINE風チームタスク管理アプリを作りながら、ログイン・データベース・権限管理を学ぶ
FlutteriOSAndroidMacOSWindows基礎から学ぶ開発アプリ開発

このページでやること

このページでは、FlutterアプリでFirebaseを使うためのパッケージを追加します。

パッケージとは、アプリに機能を追加するための部品です。

今回追加するのは、この3つです。

パッケージ一言説明
firebase_coreFlutterでFirebaseを使うための土台
firebase_authログイン・新規登録を使うための部品
cloud_firestoreFirestoreにデータを保存・取得するための部品

Firebase公式のFlutterセットアップ手順でも、Flutterプロジェクトに firebase_core を追加してFirebaseを初期化する流れが案内されています。

https://firebase.google.com/docs/flutter/setup (

firebase.google.com

)

今日のゴール

このページのゴールは、pubspec.yaml に次の3つが入った状態にすることです。

dependencies:
  firebase_core:
  firebase_auth:
  cloud_firestore:

ただし、手で書かなくても大丈夫です。

基本はコマンドで追加します。

作業の流れ

1. Flutterプロジェクトのフォルダへ移動する
↓
2. firebase_coreを追加する
↓
3. firebase_authを追加する
↓
4. cloud_firestoreを追加する
↓
5. pubspec.yamlを確認する
↓
6. flutter pub getを実行する
↓
7. main.dartでimportできるか確認する
↓
8. flutter runで起動確認する

今回は、必要最低限だけ進めます。

まずFlutterプロジェクトに移動する

ターミナルを開きます。

Terminalとは、文字でパソコンに命令を出す画面です。

まず、Flutterプロジェクトのフォルダへ移動します。

例：

cd ~/dev/app_flutter_firebase_work

自分のプロジェクト名が違う場合は、そのフォルダ名に変えてください。

移動できたか確認します。

pwd

pwd は、今いるフォルダを表示するコマンドです。

次に、Flutterプロジェクトの中にいるか確認します。

ls

次のようなファイルが見えればOKです。

pubspec.yaml
lib
android
ios

pubspec.yaml は、Flutterアプリで使うパッケージを管理するファイルです。

Step 1：firebase_coreを追加する

まず、Firebaseの土台になる firebase_core を追加します。

flutter pub add firebase_core

flutter pub add は、Flutterプロジェクトにパッケージを追加するコマンドです。

firebase_core は、Firebaseを初期化するために必要です。

初期化とは、アプリがFirebaseを使える状態にする準備のことです。

Step 2：firebase_authを追加する

次に、ログイン機能を使うために firebase_auth を追加します。

flutter pub add firebase_auth

firebase_auth は、Firebase AuthenticationをFlutterから使うためのパッケージです。

Firebase Authenticationとは、ログインや新規登録を担当するFirebaseの機能です。

Firebase公式のAuthentication for Flutterでも、Flutterプロジェクトのルートで flutter pub add firebase_auth を実行する手順が案内されています。

https://firebase.google.com/docs/auth/flutter/start (

firebase.google.com

)

Step 3：cloud_firestoreを追加する

次に、Firestoreを使うために cloud_firestore を追加します。

flutter pub add cloud_firestore

cloud_firestore は、Cloud FirestoreをFlutterから使うためのパッケージです。

Cloud Firestoreとは、アプリのデータを保存するデータベースです。

今回のアプリでは、ユーザー、チーム、メンバー、タスクをFirestoreに保存します。

Cloud Firestoreは、FirebaseとGoogle Cloudが提供するモバイル・Web・サーバー開発向けの柔軟でスケーラブルなデータベースです。

https://firebase.google.com/docs/firestore (

firebase.google.com

)

3つまとめて追加してもOK

1つずつ実行しても大丈夫ですが、まとめて入れることもできます。

flutter pub add firebase_core firebase_auth cloud_firestore

初心者の方は、エラーが出たときに原因を見つけやすいので、最初は1つずつがおすすめです。

Step 4：pubspec.yamlを確認する

パッケージを追加すると、pubspec.yaml が自動で更新されます。

確認します。

open pubspec.yaml

またはVS Codeで開いて確認してもOKです。

次のような行が入っていれば成功です。

dependencies:
  flutter:
    sdk: flutter

  firebase_core:
  firebase_auth:
  cloud_firestore:

実際には、後ろにバージョン番号が付いていることがあります。

例：

firebase_core: ^3.15.0
firebase_auth: ^5.6.0
cloud_firestore: ^5.6.0

バージョン番号とは、パッケージの版を表す数字です。

表示されていればOKです。

Step 5：flutter pub getを実行する

通常、flutter pub add を実行すると自動で flutter pub get も動きます。

ただ、念のため次を実行しておきます。

flutter pub get

flutter pub get は、pubspec.yaml に書かれたパッケージを実際に使える状態にするコマンドです。

最後にエラーが出なければOKです。

Step 6：main.dartでimportを確認する

lib/main.dart を開きます。

上の方に次の3行があるか確認します。

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';

それぞれの意味は次の通りです。

import一言説明
cloud_firestore.dartFirestoreを使うため
firebase_auth.dartログイン機能を使うため
firebase_core.dartFirebase初期化をするため

import とは、別の機能をこのファイルで使えるように読み込むことです。

Step 7：firebase_options.dartも確認する

前のページで作った firebase_options.dart も読み込みます。

import 'firebase_options.dart';

これは、FlutterアプリとFirebaseプロジェクトをつなぐ設定ファイルです。

flutterfire configure で生成したファイルです。

Step 8：Firebase初期化コードを確認する

main() の中に、次のコードがあるか確認します。

await Firebase.initializeApp(
  options: DefaultFirebaseOptions.currentPlatform,
);

完成形はこのようになります。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  runApp(const WorkBoardApp());
}

WidgetsFlutterBinding.ensureInitialized() は、Flutterの準備を先に完了させるための処理です。

Firebase.initializeApp() は、Firebaseを使える状態にする処理です。

DefaultFirebaseOptions.currentPlatform は、iOS、Android、Webなど、今動かしている環境に合ったFirebase設定を選ぶものです。

Step 9：アプリを起動する

最後に実行します。

flutter run

ログイン画面が表示されればOKです。

まだログインできなくても大丈夫です。

このページでは、パッケージが入り、アプリが起動できることがゴールです。

うまくいった状態

ここまで成功すると、次の状態になります。

pubspec.yamlに3つのパッケージが入っている
↓
main.dartでimportできる
↓
Firebase.initializeAppが書ける
↓
flutter runでアプリが起動する

よくあるエラーと直し方

エラー原因直し方
pubspec.yaml not foundFlutterプロジェクトの外で実行しているcd でプロジェクトへ移動する
flutter: command not foundFlutterのPATHが通っていないFlutter SDKのPATHを確認する
Target of URI doesn't existパッケージが入っていないflutter pub get を実行する
firebase_options.dart がないflutterfire configure を実行していない前ページの手順を実行する
DefaultFirebaseOptions が見つからないfirebase_options.dart の読み込み漏れimport 'firebase_options.dart'; を追加する
Firebase.initializeApp が見つからないfirebase_core が入っていないflutter pub add firebase_core

Target of URI doesn't exist** が出たとき**

たとえば、次のようなエラーです。

Target of URI doesn't exist: 'package:firebase_core/firebase_core.dart'

これは、パッケージがまだ入っていないときに出やすいです。

次を実行してください。

flutter pub get

それでも直らない場合は、もう一度追加します。

flutter pub add firebase_core firebase_auth cloud_firestore

firebase_options.dart** がないと言われたとき**

次のようなエラーが出ることがあります。

Error: Error when reading 'lib/firebase_options.dart'

これは、firebase_options.dart がまだ作られていない状態です。

前のページの手順に戻って、Flutterプロジェクトの中で次を実行してください。

flutterfire configure

その後、もう一度確認します。

ls lib

firebase_options.dart があればOKです。

pubspec.yaml** のインデントに注意**

pubspec.yaml は、スペースの位置が大事です。

インデントとは、行の先頭に入れる空白のことです。

たとえば、これはOKです。

dependencies:
  flutter:
    sdk: flutter
  firebase_core:
  firebase_auth:
  cloud_firestore:

これはNGです。

dependencies:
flutter:
sdk: flutter
firebase_core:

手で編集する場合は、スペースの位置に注意してください。

不安な場合は、手で書かずに flutter pub add を使うのが安全です。

npmや環境変数はこのページで必要？

このページでパッケージを追加するだけなら、基本的にnpmは使いません。

npmとは、Node.jsのパッケージ管理ツールです。

前のページでFirebase CLIを入れるときに使いました。

このページで使う主役は、Flutterのコマンドです。

flutter pub add
flutter pub get
flutter run

環境変数とは、パソコン全体で使う設定値のことです。

このページでは、基本的に新しい環境変数の設定は不要です。

ただし、flutter: command not found と出る場合は、FlutterのPATH設定が必要です。

PATHとは、ターミナルがコマンドを探す場所の設定です。

最短コマンドまとめ

すでにFlutterプロジェクトの中にいる場合は、これだけです。

flutter pub add firebase_core
flutter pub add firebase_auth
flutter pub add cloud_firestore
flutter pub get
flutter run

まとめて入れるなら、これでもOKです。

flutter pub add firebase_core firebase_auth cloud_firestore
flutter pub get
flutter run

このページのチェックリスト

できたか確認しましょう。

□ Flutterプロジェクトのフォルダで作業している
□ firebase_coreを追加した
□ firebase_authを追加した
□ cloud_firestoreを追加した
□ flutter pub getを実行した
□ pubspec.yamlに3つのパッケージがある
□ main.dartに3つのimportがある
□ firebase_options.dartをimportしている
□ Firebase.initializeAppが書いてある
□ flutter runでアプリが起動する

全部できていなくても大丈夫です。

まずは、上から1つずつ確認してください。

ミニ確認問題

Q1. firebase_core は何のために使いますか？

回答

FlutterアプリでFirebaseを使うための土台です。

Firebase.initializeApp() を使うために必要です。

Q2. firebase_auth は何のために使いますか？

回答

ログイン、新規登録、ログアウトなどの認証機能を使うために必要です。

Q3. cloud_firestore は何のために使いますか？

回答

Cloud Firestoreにデータを保存したり、取得したりするために必要です。

今回のアプリでは、ユーザー、チーム、メンバー、タスクを保存します。

このページのまとめ

  • このページでは、Firebase用の3つのパッケージを追加した。
  • firebase_core はFirebaseを使うための土台。
  • firebase_auth はログイン・新規登録を使うための部品。
  • cloud_firestore はFirestoreにデータを保存・取得するための部品。
  • パッケージ追加は flutter pub add を使う。
  • 追加後は flutter pub get を実行する。
  • main.dart で3つのimportを確認する。
  • firebase_options.dart も読み込む。
  • 最後に flutter run で起動確認する。

次のページでやること

次のページでは、main.dart の準備をします。

Firebaseを初期化して、FlutterアプリがFirebaseを使える状態になるまでの流れを確認します。

前の節【Firebase接続】flutterfire configureでfirebase_options.dartを生成する次の節【main.dart準備】Firebase.initializeAppでアプリ起動前にFirebaseを初期化する
教材トップへ戻る