GoogleのFlutterとFirebaseでアプリ開発

Googleが提供するオープンソース型のモバイルUIフレームワークFlutterとバックエンドサービスとしてアプリ開発プラットフォームのFirebaseを組み合わせれば、SNSを使ったアカウント作成・チャット・プッシュ通知などの機能が簡単に実装できアプリ開発が楽になります。Flutterは無料で提供されていますが、Firebaseはサーバーサイドを担うので無料のプランもあるものの、使った分だけの従量制プランが推奨されています。大規模なアプリ開発になれば無料では無理かと。。FirebaseをFlutterに連携させるのにこちらのドキュメントを参考に構築すると良いでしょう。

1.Google アカウントで Firebase にログイン
2.Firebase CLI をインストール
3.FlutterFire CLIを使ってFlutter アプリを Firebase に紐付け
4.Flutter プロジェクトでFirebase の初期化
5.Flutter アプリの Firebase 構成を最新にする
6.main.dart ファイルで、Firebase Core プラグインをインポート
7.同じくmain.dart ファイルでFirebase を初期化
8.Flutter アプリケーションを再ビルド
9.Firebase Flutter プラグインの追加

の流れで取り込みます。今回は使用頻度が高いプラグインをまとめてみました。

firebase_core

複数の Firebase アプリへの接続を可能にする Firebase Core API を使用するためのプラグイン

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
　　　　  options: DefaultFirebaseOptions.currentPlatform,
  )；
  runApp(const MyApp());
}

DefaultFirebaseOptions オブジェクトを使用して Firebase を初期化。android/app/build.gradleのminSdkVersionを21以上、ios/podfileのplatformを10以上に設定。

final funcs = FirebaseFunctions.instanceFor(
    app: Firebase.app(), region: 'asia-northeast1');

Future<dynamic> call(String name, dynamic params) async {
  return (await funcs.httpsCallable(name).call(params)).data;
}

Firebase Flutter Functionsのリージョン(関数のロケーション)を東京に指定しhttpsCallable関数で呼び出し、戻り値を取り出す。

firebase_auth

Authenticationはメールアドレスや電話番号、Googleアカウントを使った認証が安全に使用することが可能です。

import 'package:firebase_auth/firebase_auth.dart' show FirebaseAuth;

Future<User?> fetchUser() async {
  final firebaseUser = FirebaseAuth.instance.currentUser;
  if (firebaseUser == null) return null;

  final doc = (await users.doc(firebaseUser.uid).get()).data()!;

  return doc2User(firebaseUser.uid, doc);
}

providerから値を引っ張ってくると状態管理ができないのでfirebaseUserを定義してあります。

await FirebaseAuth.instance.signInAnonymously();

で、ログインしたい場所を指定。

await auth.FirebaseAuth.instance.signOut();

authで認証したアカウントをログアウトする。

firebase_messaging

Cloud Messagingはメッセージを無料で送信することができます。最大 4,000 バイトのペイロードをクライアント アプリに転送できます。プッシュ通知で使われるのが多いでしょう。

FirebaseMessaging.instance.requestPermission()

通知を受信する権限を要求。

await FirebaseMessaging.instance.getToken();

登録しているトークンを取得。

firebase_storage

Cloud Storageは、画像や動画などのユーザー生成コンテンツをアップロードして共有できデータをGoogleCloudStorageバケットに保存することができます。

import 'package:firebase_storage/firebase_storage.dart';

Future<String?> uploadImage(File file) async {
  try {
    final res = await FirebaseStorage.instance
        .ref("profiles/${currentUid()}.png")
        .putFile(file);
    final url = await res.ref.getDownloadURL();
    await users.doc(currentUid()).update({
      'imageUrl': url,
    });
    return url;
  } on FirebaseException catch (e) {
    print(e);
　　　　　　　　// FirebaseExceptionを初期化
  }
  return null;
}

Cloud Storageへの画像のアップロードはref()メソッドでiOSから参照したものをputFileで保存します。