flutter createしたプロジェクトのAndroidでFirebase Cloud Messagingを受信する « LANCARD.LAB

flutter createしたプロジェクトのAndroidでFirebase Cloud Messagingを受信する

2025/02/19
aikawa

前回は用意されたサンプルに対して通知を行いましたが、じゃあ１から作る時はどうするの？
という疑問が。
という事で、flutter createで作ったプロジェクトで、使えるようにしてみます。
※今回は最小限で、画面は作らず受信したものをコンソールにprintするだけです。

flutter プロジェクトを作る

早速適当にflutterプロジェクトを作ってみます。

flutter create test202502
cd test202502

作ったら、firebase関連の２パッケージを追加。

flutter pub add firebase_core
flutter pub add firebase_messaging

flutterfireを使う

・・・んですが、現バージョン（Flutter 3.29, flutterfire_cli 1.0.1）ではとても残念な事態を引き起こしていて、Flutter側がgradleの拡張子を.ktsに切り替えているのに、flutterfire側が追従出来ていないのか、configureに失敗します。
flutterfire捨てた（代わりにこっち使え）って事にならなければ良いんですが、今後どうするんでしょうね。

色々と調べた結果、内部的にエラーが出てても*.gradle.ktsをコピーして、.ktsを消したファイルを置いておけば通るようです（空のファイルだと失敗する）。
Windowsならcopyコマンドで出来ます。

copy android\build.gradle.kts android\build.gradle
copy android\app\build.gradle.kts android\app\build.gradle
copy android\settings.gradle.kts android\settings.gradle

ここで本来のconfigureを漸く実施。

flutterfire configure
# firebase project 選択
# platform 選択
# android app id入力 （例：com.example.test202502）

成功したら、copyで作成した*.gradleファイルは必ず消しておきます（今度はbuildに失敗するので）。

lib/main.dartファイル編集

importに以下を追加します。

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

main(){…}を次のように書き換えます。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  try{
    await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform); // Firebaseの初期化

    final fcmToken = await FirebaseMessaging.instance.getToken(); // FCMトークンの取得
    print('FCM Token: $fcmToken');

    FirebaseMessaging.onMessage.listen((RemoteMessage message) { // フォアグラウンド
      print('Fore Message notification: ${message.notification?.title} / ${message.notification?.body}');
      print('Fore Message data: ${message.data}');
    });

    FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) { // バックグラウンド
      print('Back Message notification: ${message.notification?.title} / ${message.notification?.body}');
      print('Back Message data: ${message.data}');
    });
  }catch (e){
    print(e);
  }
  // run
  runApp(const MyApp());
}

ビルドして実行

前回同様、ターゲットにAndroidを選択して、main.dartの右上に出ている、▷ボタンを押します。
デモ用画面が表示されますが、画面には何も変更を加えていないので、このままで良いです。

VSCodeのデバッグコンソールを見ると、FCM Tokenの値が表示されているのでコピーします。

通知

前回のflutterfireのexampleとfirebase projectが同じだった場合は、scripts/send-message.jsのtokenを書き換えて実行しても良いですし、別途curlで送信しても良いです。
通知が成功すると、デバッグコンソールに以下のような感じに表示されます。

D/FLTFireMsgReceiver(21750): broadcast received for message
I/flutter (21750): Fore Message notification: A great title / Great content
I/flutter (21750): Fore Message data: {foo: bar}

この例は最低限で受信するまでですが、ここから通知を表示する画面を作って行く事になります。