概要

この記事ではFlutterとfirebaseを使って認証機能の実装とrealtime databaseを使ったtodoアプリの実装方法を解説します。

今回使ってみる技術

1. Flutter
   
2. firebase_analytics
   
3. firebase_database
   
4. firebase_auth
   
   

Flutterプロジェクトの作成

Flutter SDKのインストール

Flutterの公式サイトで丁寧に解説されているので参考にしながら開発環境を準備します。

Flutter公式

Flutterプロジェクト作成

今回はネイティブ言語をswiftとkotlinに設定してFlutterプロジェクトを設定します。

> flutter create -i swift -a kotlin flutter_sample

シミュレーターの起動

下記のコマンドを実行してシミュレーターを起動します。

> open -a Simulator

動作確認

下記のコマンドを実行して作成したプロジェクトの動作確認をします。

> cd flutter_sample
> flutter run

firebase導入

firebaseとは？という方は以前に作成したこちらの記事でご確認ください。

【Vue.js + FirebaseでToDoアプリを構築】

Firebaseの公式を参考に導入していきます。

Flutter アプリに Firebase を追加する

firebaseでのプロジェクト作成

「プロジェクトを追加」をクリックします。

プロジェクト名を入力してプロジェクトを作成します。

firebaseでのiOSプロジェクト作成

iOSへfirebaseアプリの初期化情報を登録するために iOS へ追加をクリックします。

iOS bundle IDの設定

x codeで 作成したプロジェクト/⁨ios⁩/Runner.xcodeproj を開き、Bundle Identifierに任意の名前を設定します。
今回は「jp.flutter.todo」とします。

表示された情報を元にアプリを登録します。

ダウンロードした「GoogleService-Info.plist」を実際のソースとx codeプロジェクトに追加します。

以上で iOS のプロジェクトの登録が完了です。

firebaseでのAndroidプロジェクト作成

Androidへfirebaseアプリの初期化情報を登録するために Android へ追加をクリックします。

表示された情報を元にアプリを登録します。

Android bundle IDの設定

Android のbundle IDを設定します。
Androidも同様に「jp.flutter.todo」とします。

/android/app/build.gradle

Android Studioから 作成したプロジェクト/android/app/ に「google-services.json」を追加します。

以上でAndroidの初期設定が完了となります。

firebaseの動作確認

1. firebaseの動作を確認する為に作成したプロジェクトの「main.dart」を削除します。
2. Firebase 向け Google アナリティクスのサンプル プログラム リポジトリから、次の 2 つのファイルをコピーしてアプリの lib ディレクトリに貼り付けます。
   ・main.dart
   ・tabs_page.dart
3. Flutter アプリを実行します。
4. Firebase コンソールでアプリの Firebase プロジェクトに移動し、左側のナビゲーションで [アナリティクス] をクリックします。

過去30分間のユーザーがカウントされていれば導入完了です。