Zenn
🔥

【Flutter】Push通知を受け取るだけのスタブアプリをTsukuttar

2023/01/05に公開
Android
Firebase
Flutter
FCM
#
push通知
tech

寒いタイトルですみません。
最近おやじギャグが止まりませんのでご容赦ください。

環境

  • Windows(10)
  • Flutter（2.10.5）
    • firebase_core（2.4.1）
    • firebase_messaging（14.2.1）

事前準備

  • firebaseのプロジェクト作成
  • Firebase CLIのインストール（＆ログイン）

手順

flutterプロジェクトの準備

1. flutterプロジェクトの作成

コマンドプロンプトを開いて下記コマンドを実行します。

flutter create {プロジェクト名}

プロジェクトを作成したら、作成したフォルダへ移動します。

cd {プロジェクト名}

2. パッケージのインストール

  • firebase_coreをインストールします。
flutter pub add firebase_core
  • firebase_messagingをインストールします。
flutter pub add firebase_messaging

3. firebaseの設定

3-1. Flutterを選択

3-2. 「次へ」ボタンをクリック

3-3. 表示されたコマンドを実行

ここでは例としてAndroidを選択します。

> flutterfire configure --project={プロジェクトID的な}
i Found 9 Firebase projects. Selecting project {プロジェクトID的な}.
? Which platforms should your configuration support (use arrow keys & space to select)? ›
✔ android
✔ ios
  macos
✔ web

そのあとは、操作を進めて管理コンソールまで戻ります。

4. 実装

main.dartのimportを追加して、main関数をちょいちょい変更してきます。
※追加部分だけ抜粋して記載

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

void main() async {
  //イニシャライズ
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);

  //パーミションの設定
  FirebaseMessaging fireMsg = FirebaseMessaging.instance;
  //トークン取得
  String fireToken = (await fireMsg.getToken()).toString();
  print('fireToken:' + fireToken);

  //メッセージのリッスン
  FirebaseMessaging.onMessage.listen((RemoteMessage message) {
    if (message.notification != null) {
      print('Title: ${message.notification?.title}');
      print('Body: ${message.notification?.body}');
    }
  });
  runApp(const MyApp());
}

5. ビルドと確認

ビルドすると↓のようにfireToken（勝手に名付けた）が表示されますのでコピーしておきます。

6. firebase Cloud Messagingでテスト送信

「タイトル」と「通知内容」を入力して「テストメッセージを送信」ボタンをクリック

「2. 」でコピーしたTokenを貼り付けて、「テスト」ボタンをクリック

7. 受信確認

こんな感じでデバッグコンソールに表示されたらOK。
今回は時短でコンソール出力です。

あとがき

バックエンドからPush通知を送信する記事を書いたときは、FirebaseにFlutterって項目がなかったので、めちゃくちゃ便利になったなと思いました。
クレデンシャルJSONもアプリの方のプロジェクトに含めたような気もしますし・・・。
Githubに上げるほどのコード量でもないので、サンプルで失礼しました！

関連記事

参考記事

Github

  • なし

Discussion