【Flutter】ローカル通知(local_notifications)

使用パッケージ

• flutter_local_notifications
• ↓↓公式ドキュメント

pub.dev

アイコンの準備

• 参考(以下の動画の最初のほう)

youtu.be

(1). 画像の用意

• 使用したい通知のアイコンを用意します(test_icon.png)。

(2). プロジェクトへのインポート

• android/app/src/main/res/drawable内に用意した画像を移動させます。

インポートまで

pubspec.yamlに追加

dependencies:
  flutter_local_notifications: ^15.0.0

インポート

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

「FlutterLocalNotificationsPlugin」のインスタンスを準備

• 参考：FlutterLocalNotificationsPlugin class - flutter_local_notifications library - Dart API
• 「FlutterLocalNotificationsPlugin」というlocal_notificaions内のローカル通知を扱うためのクラスをインスタンス化しておきます。
• 以降ではここで用意した変数「notificationsPlugin」に対していろいろ設定をしていきます。

final FlutterLocalNotificationsPlugin notificationsPlugin = FlutterLocalNotificationsPlugin();

初期化

• 「プラットフォームごとの初期化設定⇒それらを束ねる」という流れです。

プラットフォームごとの初期化設定(initializationSettings)

• 参考1：InitializationSettings class - flutter_local_notifications library - Dart API
• 参考2：AndroidInitializationSettings class - flutter_local_notifications library - Dart API
• InitializeSettingsクラスに各プラットフォームの初期設定を格納。
• Androidはシンプルで、android/app/src/main/res/drawable内に用意した画像のファイル名(拡張子なし)だけを設定します(パラメータそのものは他にありますが、いじらないでも動きます)。

// プラットフォームごとの初期設定をまとめる(今回はAndroidのみ)
const initializationSettings = InitializationSettings(
  android: AndroidInitializationSettings('test_icon')
);

プラットフォームごとの設定をまとめる(initialize)

• 参考：initialize method - FlutterLocalNotificationsPlugin class - flutter_local_notifications library - Dart API
• プラットフォームごとの設定＋通知をタップした時の処理を設定できる(なくてもよい)

// 通知設定を初期化(先程の設定＋通知をタップしたときの処理)
await notificationsPlugin.initialize(
  initializationSettings,

  // 通知をタップしたときの処理(今回はprint)
  onDidReceiveNotificationResponse: 
    (NotificationResponse notificationResponse) async{
      print('id=${notificationResponse.id}の通知に対してアクション。');
    },
);

通知を表示

詳細設定(notificationDetails)

• 参考1：NotificationDetails class - flutter_local_notifications library - Dart API
• 参考2：AndroidNotificationDetails class - flutter_local_notifications library - Dart API
• 通知の詳細設定についても初期設定のように、notificationDetailsクラスに各プラットフォームの設定を割り当てる形になります。
• androidの設定はAndroidNotificationDetailsクラスを使います。channeIdとchannelNameを割り当てればOKです(アプリの設定からこれらを見れますが、特に気にしなくてもOKかも?)。

// プラットフォームごとの詳細設定
const notificationDetails = NotificationDetails(
  android: AndroidNotificationDetails(
    'channelId', 
    'channelName'
  )
);

表示(show)

• 参考：show method - FlutterLocalNotificationsPlugin class - flutter_local_notifications library - Dart API
• 通知を表示します。
• 各パラメータの設定は以下の表を参考に。また、titleとbodyは画像のように表示されます。

id	通知のid(通知の固有番号。キャンセルのときとかに使う。)
title	題名
body	通知の本文
NotificationDetails	先ほど設定したnotificationDetailsを割り当てました。

// 通知を表示
await notificationsPlugin.show(
  0,
  "title",
  "body",
  notificationDetails,
);

デモアプリ

• 通知用の処理は「notificationController.dart」に集約しました。
• 画像の準備、パッケージの追加はこの記事の最初の方で行っているため省略。

notificationController.dart

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

class NotificationController{
  
  // 「flutter_local_notifications」にあるローカル通知を扱うためのクラスをインスタンス化 
  final FlutterLocalNotificationsPlugin notificationsPlugin = FlutterLocalNotificationsPlugin();
  
  // 初期設定
  Future<void> initNotification() async{

    // プラットフォームごとの初期設定をまとめる(今回はAndroidのみ)
    const initializationSettings = InitializationSettings(
      android: AndroidInitializationSettings('test_icon')
    );

    // 通知設定を初期化(先程の設定＋通知をタップしたときの処理)
    await notificationsPlugin.initialize(
      initializationSettings,

      // 通知をタップしたときの処理(今回はprint)
      onDidReceiveNotificationResponse: 
        (NotificationResponse notificationResponse) async{
          print('id=${notificationResponse.id}の通知に対してアクション。');
        },
    );
  }

  // 通知を表示する
  Future<void> showNotification() async{

    // プラットフォームごとの詳細設定
    const notificationDetails = NotificationDetails(
      android: AndroidNotificationDetails(
        'channelId', 
        'channelName'
      )
    );

    // 通知を表示
    await notificationsPlugin.show(
      0,
      "title",
      "body",
      notificationDetails,
    );
  }
}

main.dart

• WidgetsFlutterBinding.ensureInitialized()をmain関数内に記述しないと、画面が真っ白のままになったので追加(原因はよくわかりません)。

import 'package:flutter/material.dart';
import 'notificationController.dart';

void main() async {
  
  //Widget等の初期化を明示的に行う?
  WidgetsFlutterBinding.ensureInitialized(); 

  // NotificationControllerの初期化
  await NotificationController().initNotification();

  const app = MaterialApp(
    home: MyHomePage(),
  );

  runApp(app);
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('flutter_local_notifications'),
      ),

      body: Center(
        child: Column(
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                await NotificationController().showNotification();
              }, 
              child: const Text('NotificationController().showNotification()')
            ),
          ],
        ),
      ),
    );
  }
}

実行結果

• ボタンを押すと通知が表示されます。

操作画面

送信される通知