【Firebase】FlutterにFlutterFireプラグインを追加する方法

【Firebase】FlutterにFlutterFireプラグインを追加する方法

「FirebaseをFlutterで使用するためのパッケージの追加方法が知りたい」

「そもそもFlutterで使われるパッケージとプラグインの違いが知りたい」

「FlutterFireって何?」

このような疑問にお答えします。

FlutterにFirebaseのパッケージを追加する前にやるべき「Firebaseプロジェクトの作成」「開発アプリの登録」「Firebase構成ファイルの追加」などがまだ済んでない方は先に下の記事をお読みください。

本記事ではプラグインとパッケージの違いを解説した後で、FlutterにFirebaseのパッケージ(FlutterFire)をを追加する方法を紹介します。

目次

Flutterにおける「プラグイン」と「パッケージ」の違いとは?

まずは、Flutterにおける「プラグイン」と「パッケージ」の違いがいまいち分からない方のためにそれぞれの特徴を紹介していきます。

パッケージ(Dart Package)とは?

Dart packages

General packages written in Dart, for example the path package. Some of these might contain Flutter specific functionality and thus have a dependency on the Flutter framework, restricting their use to Flutter only, for example the fluro package.

引用元:Flutter Developing packages & plugins

Flutterで使用される「パッケージ」の正式名称は「Dart Package」です。よって、正式名称からも分かるとおりパッケージはFlutterでしか使用できません。

プラグイン(Plugin Package)とは?

Plugin packages

A specialized Dart package that contains an API written in Dart code combined with one or more platform-specific implementations.Plugin packages can be written for Android (using Kotlin or Java), iOS (using Swift or Objective-C), web, macOS, Windows, or Linux, or any combination thereof.

引用元:Flutter Developing packages & plugins

Flutterで使用される「プラグイン」の正式名称は「Plugin Package」でパッケージの一種であり、Flutter以外のフレームワークやプラットフォームでも使用できます。

ティファ

Flutterでしか使用できない「Dart Package」と他のプラットフォームでも使用できる「Plugin Package」を見分けるために名前が違うんだ!

ただ、実際のところどちらもFlutterで使用できるパッケージだからあまり気にしなくて大丈夫だよ。

FlutterFireとは?

FlutterFire

FlutterFireとは、FlutterのためのFirebaseのパッケージ(Dart Package)を一覧できる公式サイトで、各プラグインごとに「pub.dev」のリンクやドキュメントが公開されています。

>> FlutterFire公式サイトはこちら

主なFlutterFireプラグイン一覧

スクロールできます
プラグインの名前Flutterに追加するために実行するコマンド「main.dart」に追記するインポートコード
Coreflutter pub add firebase_coreimport ‘package:firebase_core/firebase_core.dart’;
Authenticationflutter pub add firebase_authimport ‘package:firebase_auth/firebase_auth.dart’;
Cloud Firestoreflutter pub add cloud_firestoreimport ‘package:cloud_firestore/cloud_firestore.dart’;
Cloud Functionsflutter pub add cloud_functionsimport ‘package:cloud_functions/cloud_functions.dart’;
CloudMessagingflutter pub add firebase_messagingimport ‘package:firebase_messaging/firebase_messaging.dart’;
Cloud Storageflutter pub add firebase_storageimport ‘package:firebase_storage/firebase_storage.dart’;
Crashlyticsflutter pub add firebase_crashlyticsimport ‘package:firebase_crashlytics/firebase_crashlytics.dart’;
Analyticsflutter pub add firebase_analyticsimport ‘package:firebase_analytics/firebase_analytics.dart’;
Dynamic Linksflutter pub add firebase_dynamic_linksimport ‘package:firebase_dynamic_links/firebase_dynamic_links.dart’;
In-App Messagingflutter pub add firebase_in_app_messagingimport ‘package:firebase_in_app_messaging/firebase_in_app_messaging.dart’;
ML Customflutter pub add firebase_ml_customimport ‘package:firebase_ml_custom/firebase_ml_custom.dart’;
Performance Monitoringflutter pub add firebase_performanceimport ‘package:firebase_performance/firebase_performance.dart’;
Realtime Databaseflutter pub add firebase_databaseimport ‘package:firebase_database/firebase_database.dart’;
Remote Configflutter pub add firebase_remote_configimport ‘package:firebase_remote_config/firebase_remote_config.dart’;
ティファ

アプリ開発に必要なFirebaseパッケージをFlutterに追加できるよ!(Firebase Coreは必ず追加する必要あり)

FlutterにFirebaseパッケージを追加する方法

FlutterでFirebaseのパッケージを使用するには必ず「Firebase Core」のパッケージをFlutterに追加する必要があります。

各FirebaseパッケージをFlutterに追加する方法は同じなので、今回は必ず必要となる「Firebase Core」のパッケージの追加方法を紹介していきます。

STEP
FirebaseのパッケージをFlutterに追加する:その1
Firebaseパッケージの追加方法1

>> FlutterFire公式サイトはこちら

上記のリンクを開き「Firebase Core」の「pub.dev」をクリックします。(バージョンが本記事と異なっていても大丈夫です)

STEP
FirebaseのパッケージをFlutterに追加する:その2
Firebaseパッケージの追加方法2

pub.devで「Firebase Core」を開いたら「Installing①」をクリックし、②のコマンドをコピーします。

STEP
FirebaseのパッケージをFlutterに追加する:その3
Firebaseパッケージの追加方法3

「Firebase Core」のパッケージを追加したいアプリをIDEで開きターミナルでコピーしたコマンドをペーストし、実行します。

Firebaseパッケージの追加方法4
ティファ

正常にコマンドが実行されれば、pubspec.yamlファイルに「Firebase Core」が追記されるよ!

STEP
FirebaseのパッケージをFlutterに追加する:その4

Firebaseのパッケージを追加してプロジェクトを実行する前に必ず「pod repo」「CocoaPods」をターミナルでアップデートしておきましょう。

pod repo update
// pod repoのアップデートコマンド
pod repo update

まずは上記のコマンドをターミナルで実行して「pod repo」をアップデートします。

sudo gem install cocoapods
// CocoaPodsのアップデートコマンド
sudo gem install cocoapods

次に上記のコマンドをターミナルで実行して「CocoaPods」をアップデートします。

ティファ

「Password」にはパソコンのログインパスワードを入力するよ!

STEP
FirebaseのパッケージをFlutterに追加する:その5
Firebaseパッケージの追加方法5

先ほど開いたpuv.devに戻り「Installing①」から②のインポートコードをコピーします。

STEP
FirebaseのパッケージをFlutterに追加する:その6
Firebaseパッケージの追加方法6

開発中のアプリの「main.dart」にコピーしたコードをペーストします。

ティファ

これでFirebase CoreパッケージをFlutterに追加できたよ。他のFirebaseパッケージも同様にこの手順で追加できるよ!

Firebaseパッケージが追加できない時の対象方

本記事で紹介した手順でFirebaseパッケージが追加できなかった場合はこちらの記事をご覧ください!

Flutterを学ぶなら「Udemy」または「侍エンジニア塾」

  • 独学でFlutterを学ぶなら「Udemy」
  • プログラミングスクールで学ぶなら「侍エンジニア塾」

Flutterは2018年にリリースされたばかりの最新技術のため日本語ソースが圧倒的に少なく勉強方法が制限されています。ただ、英語が分からなくてもFlutterを先取りして勉強する方法はあります。

独学でFlutterを勉強するなら世界最大級のオンライン学習プラットフォーム「Udemy」、プログラミングスクールで講師からマンツーマンでFlutterを学習したい方は「侍エンジニア塾」がおすすめです。

よかったらシェアしてね!
目次
閉じる