ここ最近はFlutetrで何かアプリを作ってGooglePlayへリリースするところまでやってみたいなと思い、アプリを作り始めています。
ただ、サーバーを用意するのが手間なので、ネイティブ以外の作業は全てFirebaseで賄おうと思っています。
とりあえずはFirebaseをFlutterアプリに入れてみます。
今回はAndroidだけですが、いずれiOSも対応したいと思います。
FirebaseをFlutterアプリへ
Flutter アプリに Firebase を追加する | Firebase
結構丁寧にここにやり方が書かれています。
AndroidもしくはiOSアプリにFirebaseを入れたことがある人なら簡単にできると思います。
ただ、途中やり方が変わってきます。
Firebase ConsoleからAndroidアプリを追加します。
google-services.jsonをダウンロードし、android/appに置きます。
gradle
トップレベルのgradleに
buildscript {
ext.kotlin_version = '1.3.21'
repositories {
google()
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.3.2'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
classpath 'com.google.gms:google-services:3.2.1'
}
}
のように
classpath 'com.google.gms:google-services:3.2.1'
を追加します。
現時点で、もっと大きいバージョンがあるみたいですが、上にリンクしたFirebaseのページには、
注: Flutter は現在、バージョン 3.2.1 の Google サービス プラグインと互換性があります。
とあるので、バージョンは動かさないほうがよさそうです。
app下のgradleには一番下に
apply plugin: 'com.google.gms.google-services'
を追加するだけでOKです。
pubspec.yml
flutter用のfirebase pluginがあるようなので、package getで取得します。
pubspec.ymlに下記を追加。
dependencies:
flutter:
sdk: flutter
firebase_core: 0.2.5+1
firebase_analytics: 1.1.0
firebase_auth: 0.7.0
ここでハマったのですが、
ここを見て最新のバージョンを使おうとすると、package getは問題なく通るのですが、ビルドが通らなくなります。
AndroidX関係でエラーになるので、下記のリンク先のバージョンに合わせます。
ここに書かれているバージョンに直したところ、問題なくビルドし、機能が使える様になりました。
アプリをインストールすると、Androidアプリが認識されました。
匿名ログイン
Firebase Consoleからプロジェクトを開き、開発→Authenticationページを開きます。
一番下の「匿名」を有効にします。
あとは匿名ログインしたいタイミングで、
FirebaseAuth#signInAnonymously();
を呼び出せはOKです。
私の場合はスプラッシュ画面でしれっとログインしてしまおうと思ったので、こんな風にしてます。
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:own_note/views/todays_photo_list.dart';
import 'package:splashscreen/splashscreen.dart';
class SplashView extends StatelessWidget {
final FirebaseAuth firebaseAuth = FirebaseAuth.instance;
Future<FirebaseUser> signInAnon() async {
FirebaseUser user = await firebaseAuth.signInAnonymously();
return user;
}
SplashView() {
signInAnon().then((FirebaseUser user) {
print('User ${user.uid}');
});
}
@override
Widget build(BuildContext context) {
return SplashScreen(
seconds: 2,
navigateAfterSeconds: TodaysPhotoListView(),
image: new Image.network(
'https://flutter.io/images/catalog-widget-placeholder.png'),
photoSize: 100.0,
gradientBackground: LinearGradient(colors: [Colors.cyan],
begin: Alignment.topLeft,
end: Alignment.bottomRight),
);
}
}
雑に実装した感じだとこんな感じ。
こちらの動画を参考にしました！
