Contents
概要
この記事ではFlutterとfirebaseを使って認証機能の実装とrealtime databaseを使ったtodoアプリの実装方法を解説します。
今回使ってみる技術
Flutterプロジェクトの作成
Flutter SDKのインストール
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の公式を参考に導入していきます。
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の動作確認
- firebaseの動作を確認する為に作成したプロジェクトの「main.dart」を削除します。
- Firebase 向け Google アナリティクスのサンプル プログラム リポジトリから、次の 2 つのファイルをコピーしてアプリの
lib
ディレクトリに貼り付けます。
・main.dart
・tabs_page.dart - Flutter アプリを実行します。
- Firebase コンソールでアプリの Firebase プロジェクトに移動し、左側のナビゲーションで [アナリティクス] をクリックします。
過去30分間のユーザーがカウントされていれば導入完了です。
