【Flutter】Firebaseを使ってデータを読み書きするチュートリアル・エラー解決法まとめ

Firebaseをflutterに入れる手順とその際に発生するエラーについてまとめています。

目次

前提条件

Firebaseのアカウントが既に作成されていることを念頭に解説します。

Firabaseでアプリの登録

プロジェクトの追加

Firebaseのページにいき、プロジェクトを追加します。

iOSアプリの追加

プロジェクトを選択し、iosボタンを押してください。

AppleバンドルIDを入力し、「アプリを登録」を押します。

バンドルIDは、Runnerを開き、TARGETS>Generalに記載されています。

あわせて読みたい
【Flutter、Xcode】Bundle IDの調べ方 こんにちは!本記事では、Bundle IDの調べ方をまとめています。 【該当するプロジェクトのXcodeファイルを開く】 flutterから開く方法 flutterのプロジェクトから、ios&...

設定ファイルのダウンロード


GoogleService-Info.plistをダウンロードします。

ダウンロードしたファイルを、下記のようにRunnnerフォルダにドラッグします。

GoogleService-info.plistは、必ずXcodeで移動させてください。Android Studioなどでファイル移動させると、後でfirebaseを使う際に、”Firebase has not been correctly initialized”というエラーが出てしまいます。参考↓

FlutterHQ.com - Everything you n...
Solved: Flutter: Firebase has not been correctly initialized |... Answer: When you add google-services.json to an iOS project, you need to add it using Xcode as described in the following document: https://firebase.flutter.dev...

Flutterの場合は、以上で設定は終了です。

Androidアプリの追加

プロジェクトページにいき、Androidマークのボタンを押してください。

AndroidパッケージIDを追加し、アプリを登録を押します。パッケージIDはandroid>app>build.gradleのapplicationIDに書いてあります。

設定ファイルの追加

google-services.jsonをダウンロードします。

ダウンロードしたファイルを、appフォルダ内に追加します。

build.gradleの追加

android>build.gradleに、classpath 'com.google.gms:google-services:4.3.10'を追加します。

    dependencies {
        classpath 'com.google.gms:google-services:4.3.10' //これを追加
        classpath 'com.android.tools.build:gradle:4.1.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }

アプリレベルのbuild.gradleへの追加

android>app>build.gradleに、下記を追加します。dependenciesは、一番下に記載されてあるので{}内を追加してください。

apply plugin: 'com.google.gms.google-services'

dependencies {
  implementation platform('com.google.firebase:firebase-bom:29.2.1')
  implementation 'com.google.firebase:firebase-analytics'
}

firebaseパッケージの追加

flutter pub addで、以下のパッケージを追加します。

・firebase_core
・firebase_analytics
・firebase_auth
・cloud_firestore

最後にflutter pub getを実行します。

パッケージの追加方法がわからない方は下記記事をご覧ください。

あわせて読みたい
【Flutter】パッケージをインストール/アンインストールする方法について~コマンドと一緒に紹介 パッケージとは、Widgetをまとめたものです。目的に沿ったパッケージを導入することで完成されたWidgetを使って簡単に開発ができるため、手間が大幅に短縮されます。 本...

ここまで終わったら、準備は完了です。

実際に実行→エラーが起きるかも。

実際に実行してみます。この際、iOSもAndroidどちらでも実行しておいてください。

エラーがたくさん出てくると思うので解決方法をまとめておきます。

iOSバージョンを指定して!と言われる場合

Automatically assigning platform iOS with version 9.0 on target Runner because no platform was specified. Please specify a platform for this target in your Podfile.

と言われる場合は、Podfileでバージョンが指定されていないか、指定されているバージョンが古すぎます。Podfileの一番上にある文章の#を消して、新しいバージョンを指定しましょう。

あわせて読みたい
【Flutterエラー解決法】”Automatically assigning platform ‘iOS with version ‘9.0... こんにちは!本記事では、下図のようなエラー文が出た場合の対処方法についてまとめておきます。 エラー文は以下の通り。iOS platformのバージョンをちゃんと特定してね...

パッケージが古いわ!と言われる場合

Error: Cannot run with sound null safety, because the following dependencies don’t support null safety

とか、下記のようにdepends on both firebase_auth ^0.20.1 and build_runner ^2.1.7, version solving failed.と出る場合は、パッケージが古すぎることが原因です。パッケージをアップデートしましょう。

あわせて読みたい
【Flutter】depends on both firebase_auth ^0.20.1 and build_runner ^2.1.7, version solving failed.... 【エラー文と起こった箇所】 firebaseをFlutterに導入したときにおこりました。 エラー文はこんな感じ。 Because no versions of build_runner match >2.1.7 <3.0...

minSdkVersionが古いわ!と言われる場合

uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library

と言われる場合は、app階層のbuild.gradleに書いてあるminSdkVersionを新しいものにする必要があります。

あわせて読みたい
【Flutterエラー解決法】”uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declare... こんにちは!本記事では、下図のようにFirabaseを実装した後出てくるエラーについて説明します。 主なエラー文章は下記の通り。minSdkVersionを19以上にしてねって意味...

.javaが推奨されないAPIを使ってますとか安全じゃないですとか出る場合

FlutterFirebaseAnalyticsPlugin.javaは推奨されないAPIを使用またはオーバーライドしています

上記のようなメッセージが出た場合は、minSdkVersionが古い場合があります。app>build.gradleのminSdkVersionを25など新しいものにしましょう。2022年2月現在は25でokですが、もっと新しくする必要があるかもしれません。

あわせて読みたい
【Flutter, firebase】”FlutterFirebaseAnalyticsPlugin.javaは推奨されないAPIを使用またはオー... flutterで上記のようなエラー内容が出てきたので解決法を記載しておきます。 この場合は、app>build.gradleのminSdkVersionを上げる必要があります。私は25にしたら直り...

methodsが多い!と言われる場合

Cannot fit requested classes in a single dex file(# methods: 106047 > 65536)

などと言われる場合は、multiDexEnabledをtrueにしてください。

株式会社アクリエ AQlier
Android Studioで、「Cannot fit requested classes in a single dex file.」のエラーが出たとき | 株式会... 「Cannot fit requested classes in a single dex file.file.Try supplying a main-dex list. # methods: 72477 > 65536」のエラーがでたときの対処方法をまとめました。

firebaseをコードで実装する

さて、コードに実際に書いてみましょう。firebaseを使用する際は、下記のようにFutureBuilder()を用いて記載します。

class App extends StatelessWidget {
@override
Widget build(BuildContext context){
return FutureBuilder{
future: Firebase.initializeApp(),
builder: (context, snapshot){
if (snapshot.hasError){
return Text("SomethingWentWriong");
}
if (snapshot.connectionState == ConnectionState.done){
return MyHomePage();
}
return Text("Loading");
},
);
}
}

このように記載しないと、下記のようなエラーが表示されます。

No Firebase App ‘[DEFAULT]’ has been created – call Firebase.initializeApp()

firebaseを利用したいクラス内で、変数を宣言します。

final _firestore = FirebaseFirestore.instance;

Cloud databaseを使ってデータを格納する方法

上記のように_firestoreを宣言したクラス内かつ上位のクラス(MyApp()等)にFutureBuilderが宣言されている場合は、下記のようにしてデータを操作することができます。

Firebaseでデータベースを作成

プロジェクトのページにいき、左から”Firestore Database”を選択し、データベースの作成を押します。

テストモードで開始する、を押します(アプリを公開する際には、セキュリティルールを変更する必要があります。)

データベースの場所を選びます。デフォルトで問題ありません。

データの追加

_firestore.collection("questions").add({
'question': '質問です',
'answer': '答えです',})

なお、collection()内に入れるのは、firebaseのcloud Firestoreにあるコレクション名です。存在しない名前を入れれば新規追加されます。

データをリストに格納する場合

データを得る場合は、下記のように記載します。

child: ListView(
              children: snapshot.data!.docs.map((DocumentSnapshot document) {
                Map<String, dynamic> data = document.data()! as Map<String, dynamic>;
                return Card(
                  color: Colors.white,
                  child: ListTile(
                    title: Text(data['question'], textAlign: TextAlign.center,),
                    trailing: Text((data['answer']==0 )?  "×": "○",
                      style: TextStyle(fontSize: 30),),
                  ),
                );
              }).toList(),
            ),

上記のように打つと、dataという変数として使うことができるようになります。

参考ページ

公式ページにも詳しく載っています。興味ある方は読んでみてください。

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる