文系プログラマーが語る

主にプログラミング関連の記事を書いています。

トップ > Flutter > 【まとめ】Windows環境でFlutterとFirebaseの連携をする

【まとめ】Windows環境でFlutterとFirebaseの連携をする

Flutter

こんにちは！文系プログラマーいおです！

今回はWindowsでFlutterとFirebaseを使ってアプリを開発する環境を構築するための手順をまとめようと思います。

 

はじめに

前提としてFlutterの環境構築およびFlutterプロジェクトの作成は終えていることとします。もしまだでしたら下記記事を参考にして、準備ができてから本記事を読み進めてください！

 

①Firebaseにプロジェクトを追加する

1.Firabaseのサイトにログイン

まずは、下記URLをクリックして「使ってみる」をクリック。

https://firebase.google.com/

 

次に「プロジェクトを作成」をクリック。

 

基本的には、画面に出てくる指示に従っていればOKです。

 

2.プロジェクトの命名

任意の名前を付けます。後からの変更も可能です。

 

3.Googleアナリティクスのアカウント作成（なくてもOK）

こちらはしなくても別に構いませんが、手順として残しておきます。作成する場合は、「このプロジェクトでGoogleアナリティクスを有効にする」にチェックを入れて「続行」をクリックしてください。

 

新しいGoogleアナリティクスのアカウント名を入力して「プロジェクトを作成」をクリック。


これでGoogleアナリティクスのアカウントとFirebase上のプロジェクトが作成されました。

 

②FlutterアプリにFirebaseを追加する

1.プロジェクトの追加

下記赤四角で囲った箇所をクリック。

 

すると下記のような手順が出てきます。
基本的にはこれに沿っていきます。

2.Firebase CLIのインストールとログイン

コマンドプロンプトを開き、「npm install -g firebase-tools」を入力してエンターを押す。

これでインストールが完了します。ただ、こちらのコマンドはNode.jsをインストールする際に同時にインストールされる「npm（node Package Manager）」がなければ実行ができません。

 

Node.jsのインストールについては下記記事を参考にしてみてください。

 

 

Node.jsをインストールしなくてもバイナリファイルをダウンロードして実行することでFirebase CLIが使用できるようにはなりますが、Node.jsを使用したほうが確実かと思われます。

Node.jsをインストールしない場合については詳しくは下記URLを参照してください。

 

Firebase CLIのインストールを終えたら、コマンド「firebase login」でFirebaseにログインしてください。

 

3.flutterfire_cliのインストールと設定

 

コマンド「dart pub global activate flutterfire_cli」を入力してflutterfire_cliをインストールする。

 

もしここで、「dart pub global activate flutterfire_cli error: unable to find git in your path.」というエラーが出ていたら下記記事を参照して「Git」をインストールしてみてください。再度コマンドを実行することでインストールができると思います。

 

 

次に、作成済みのFlutterプロジェクトのルートにcdコマンドで移動し、コマンド「flutterfire configure --project=プロジェクト名」を実行します。下記が例です。

 

これで「firebase_options.dart」がlibフォルダ配下に自動で生成されます。また、「GoogleService-Info.plist」や「google-services.json」などの各OSでFirabaseを使用するために必要な設定ファイルも自動で作成されます！便利！

 

4.必要なパッケージのインストール

これで完了！と思いきやこのままFlutterプロジェクトを開いてみると下記のようなエラーが発生していると思います。

これは、Firebaseを使用するために必要なパッケージがインストールされていないために起こっています。

そのため、下記のように「pubspec.yaml」に「firebase_core」の依存関係を記述し、「pub get」をクリックします。

 

これでエラーが消えるはずです。

 

「firebase_core」は下記になります。

 

 

5.Firebaseの初期化

最後に、プログラム内でFirebaseの初期化をする処理を記述すればFirebaseを使用するための準備は終了です！

具体的には下記のように記述します。

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

import 'firebase_options.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  runApp(const MyApp());
}

 

WidgetsFlutterBinding.ensureInitialized()は、Firebaseなどのプラグインを使用する前に必要な記述で、Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform)を使用して、Firebaseを初期化しています。

 

おわりに

今回はFlutterとFirebaseを連携させてアプリ開発をするための準備をまとめてみました。お役に立てれば幸いです。

以上、最後までお読みいただきありがとうございました！