Flutterでプッシュ通知を実装する方法！Firebase活用ガイド【初心者向け完全解説】

1. FlutterでFirebaseを使ったプッシュ通知の流れ

1. FlutterでFirebaseを使ったプッシュ通知の流れ

Flutterでプッシュ通知を実装するには、以下のステップを踏みます：

• Firebaseプロジェクトの作成
• AndroidとiOSの設定ファイルをFlutterプロジェクトに追加
• firebase_messagingパッケージの導入
• 通知の受信・表示の処理を書く

Firebase Cloud Messaging（FCM）はGoogleが提供する無料の通知サービスで、Flutterとの連携も公式にサポートされています。

2. Firebaseプロジェクトの作成と設定

2. Firebaseプロジェクトの作成と設定

まず、Firebaseコンソール（https://console.firebase.google.com）にアクセスし、プロジェクトを新規作成します。その後、Flutterアプリを登録して以下のファイルを取得します：

• Android：google-services.json を android/app/ 配下に配置
• iOS：GoogleService-Info.plist を ios/Runner/ 配下に配置

Android側ではさらにbuild.gradleなどの設定が必要です。

3. firebase_messagingパッケージの導入と初期化

3. firebase_messagingパッケージの導入と初期化

次に、FlutterでFirebaseの通知を使うために、必要なパッケージをpubspec.yamlに追加します。

dependencies:
  firebase_core: ^2.24.2
  firebase_messaging: ^14.7.3

初期化処理も必要です。アプリ起動時にFirebaseを初期化しましょう。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

4. プッシュ通知の受信処理を書く

4. プッシュ通知の受信処理を書く

FirebaseMessagingを使って通知を受け取る設定を行います。フォアグラウンド・バックグラウンド・終了状態での動作を確認するため、それぞれのイベントに対応する必要があります。

FirebaseMessaging messaging = FirebaseMessaging.instance;

FirebaseMessaging.onMessage.listen((RemoteMessage message) {
  print('フォアグラウンドで通知を受け取りました');
});

FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
  print('通知をタップしてアプリが起動しました');
});

これで、ユーザーがアプリを開いているときも通知を受信して処理が可能になります。

5. 通知許可のリクエスト（iOS対応）

5. 通知許可のリクエスト（iOS対応）

iOSでは明示的に通知の許可をユーザーに求める必要があります。以下のようにダイアログを表示します。

NotificationSettings settings = await messaging.requestPermission(
  alert: true,
  badge: true,
  sound: true,
);

requestPermission()を呼び出すことで、iOSデバイスでもプッシュ通知の許可が得られるようになります。

6. トークンの取得と通知の送信テスト

6. トークンの取得と通知の送信テスト

デバイストークンを取得することで、特定の端末に通知を送信できます。

String? token = await FirebaseMessaging.instance.getToken();
print("デバイストークン: $token");

このトークンをFirebaseコンソールの「Cloud Messaging」から直接入力することで、テスト通知を送信できます。

7. Androidの通知チャンネル設定と注意点

7. Androidの通知チャンネル設定と注意点

Androidでは通知チャンネルを明示的に設定する必要があります。特にAndroid 8.0以降では、チャンネルを作成しないと通知が表示されません。

await flutterLocalNotificationsPlugin
  .resolvePlatformSpecificImplementation<AndroidFlutterLocalNotificationsPlugin>()
  ?.createNotificationChannel(AndroidNotificationChannel(
    'default_channel',
    '通知チャンネル',
    importance: Importance.high,
  ));

Flutterでローカル通知と組み合わせて使う場合、flutter_local_notificationsパッケージの導入も検討しましょう。

8. バックグラウンドメッセージ処理（静的関数で実装）

8. バックグラウンドメッセージ処理（静的関数で実装）

バックグラウンドまたは終了時でも通知を受け取りたい場合、トップレベル関数で処理を定義する必要があります。

Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  await Firebase.initializeApp();
  print('バックグラウンドで通知を受信: ${message.messageId}');
}

FirebaseMessaging.onBackgroundMessage()で登録も忘れずに行いましょう。

FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

まとめ

まとめ

今回の記事では、Flutterでプッシュ通知を実装する方法について、Firebase Cloud Messagingを活用した一連の流れを丁寧に解説してきました。 Flutterアプリにおけるプッシュ通知は、ユーザーとの接点を強化する重要な機能であり、アプリの継続利用や利便性向上に大きく貢献します。 特にFirebaseを利用することで、AndroidとiOSの両方に対応した通知機能を比較的シンプルな構成で実装できる点は、Flutterならではの魅力と言えるでしょう。

まず理解しておきたいのは、Flutter単体ではプッシュ通知を直接扱うことはできず、Firebase Cloud Messagingという外部サービスと連携する必要がある点です。 Firebaseプロジェクトを作成し、Android用のgoogle-services.jsonやiOS用のGoogleService-Info.plistを正しい場所に配置することで、 FlutterアプリとFirebaseが安全に通信できるようになります。 この初期設定はやや手順が多く感じられますが、一度経験すれば他のFlutterプロジェクトでも同じ流れを応用できます。

次に重要なのが、firebase_coreとfirebase_messagingパッケージの導入と初期化です。 Firebase.initializeAppをアプリ起動時に必ず実行することで、通知機能を含むFirebaseの各種サービスが正しく動作します。 また、FirebaseMessagingを通じてフォアグラウンド、バックグラウンド、アプリ終了時といった さまざまなアプリ状態に応じた通知処理を実装できる点も、Flutterでのプッシュ通知実装における大きなポイントです。

iOS特有の注意点として、ユーザーから明示的に通知許可を取得する必要があることも学びました。 requestPermissionを使ってアラートやサウンドの許可を求めることで、iOS端末でも確実にプッシュ通知を受信できるようになります。 一方、Androidでは通知チャンネルの設定が欠かせません。 Android 8.0以降ではチャンネル未設定の通知は表示されないため、 flutter_local_notificationsと組み合わせた設定が実務では非常に重要になります。

デバイストークンの取得も、プッシュ通知を理解するうえで欠かせない要素です。 FirebaseMessagingから取得できるトークンを使えば、特定のユーザーや端末に向けた通知送信が可能になります。 Firebaseコンソールからのテスト送信を通じて、通知が正しく届くことを確認することで、 実際の運用を想定したFlutterアプリ開発の感覚を身につけることができます。

さらに、バックグラウンドやアプリ終了時の通知処理では、トップレベル関数としてハンドラを定義する必要がある点も重要です。 Flutterでは通常のWidgetクラス内とは異なる書き方が求められるため、 この仕組みを理解しておくことで、より安定したプッシュ通知対応アプリを構築できます。 ここまでの内容を踏まえることで、Flutterにおけるプッシュ通知実装の全体像が明確になったのではないでしょうか。

まとめとして確認したいサンプルコード

最後に、通知初期化と受信処理の基本構成をあらためて整理したサンプルコードを確認しておきましょう。 FlutterとFirebaseを組み合わせたプッシュ通知実装では、このような構成が土台となります。

FirebaseMessaging messaging = FirebaseMessaging.instance;

@override
void initState() {
  super.initState();
  FirebaseMessaging.onMessage.listen((RemoteMessage message) {
    print('通知を受信しました');
  });
}