【Flutter】flutter_local_notificationsで通知を実装

Flutter

flutter_local_notificationsとは

flutter_local_notificationsは、Flutterアプリケーション内でローカル通知を表示するためのパッケージです。
通知の表示、スケジューリング、カスタマイズが可能で、ユーザーに対するリマインダーやアラートを提供することができます。

flutter_local_notifications | Flutter package
A cross platform plugin for displaying and scheduling local notifications for Flutter applications with the ability to c...

使い方

1. セットアップ

依存関係の追加

pubspec.yamlファイルに以下の依存関係を追加します。

dependencies:
  flutter:
    sdk: flutter
  flutter_local_notifications: latest_version

初期化設定

まず、プラグインを初期化します。各プラットフォームに対して設定を行います。

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
    FlutterLocalNotificationsPlugin();

const AndroidInitializationSettings initializationSettingsAndroid =
    AndroidInitializationSettings('app_icon');

final DarwinInitializationSettings initializationSettingsDarwin =
    DarwinInitializationSettings(
        requestSoundPermission: false,
        requestBadgePermission: false,
        requestAlertPermission: false,
        onDidReceiveLocalNotification: onDidReceiveLocalNotification);

final MacOSInitializationSettings initializationSettingsMacOS =
    MacOSInitializationSettings(
        requestAlertPermission: false,
        requestBadgePermission: false,
        requestSoundPermission: false);

final LinuxInitializationSettings initializationSettingsLinux =
    LinuxInitializationSettings(
        defaultActionName: 'Open notification');

final InitializationSettings initializationSettings = InitializationSettings(
    android: initializationSettingsAndroid,
    iOS: initializationSettingsDarwin,
    macOS: initializationSettingsDarwin,
    linux: initializationSettingsLinux);

await flutterLocalNotificationsPlugin.initialize(initializationSettings,
    onDidReceiveNotificationResponse: onDidReceiveNotificationResponse);

2. 通知の表示

通知を表示するためには、通知の詳細を設定する必要があります。

const AndroidNotificationDetails androidNotificationDetails =
    AndroidNotificationDetails(
        'your channel id', 'your channel name',
        channelDescription: 'your channel description',
        importance: Importance.max,
        priority: Priority.high,
        ticker: 'ticker');

const NotificationDetails notificationDetails =
    NotificationDetails(android: androidNotificationDetails);

await flutterLocalNotificationsPlugin.show(
    0, 'plain title', 'plain body', notificationDetails,
    payload: 'item x');

3. 通知のスケジューリング

特定の時間に通知をスケジューリングするには、timezoneパッケージを使用して時間を設定します。

import 'package:timezone/data/latest_all.dart' as tz;
import 'package:timezone/timezone.dart' as tz;

tz.initializeTimeZones();
tz.setLocalLocation(tz.getLocation('Asia/Tokyo'));

await flutterLocalNotificationsPlugin.zonedSchedule(
    0,
    'scheduled title',
    'scheduled body',
    tz.TZDateTime.now(tz.local).add(const Duration(seconds: 5)),
    const NotificationDetails(
        android: AndroidNotificationDetails(
            'your channel id', 'your channel name',
            channelDescription: 'your channel description')),
    androidScheduleMode: AndroidScheduleMode.exactAllowWhileIdle,
    uiLocalNotificationDateInterpretation:
        UILocalNotificationDateInterpretation.absoluteTime);

4. 通知のアクション

通知にアクションを追加することができます。

final DarwinNotificationAction action1 = DarwinNotificationAction.plain('id_1', 'Action 1');
final DarwinNotificationAction action2 = DarwinNotificationAction.plain('id_2', 'Action 2', options: <DarwinNotificationActionOption>{DarwinNotificationActionOption.destructive});
final DarwinNotificationAction action3 = DarwinNotificationAction.plain('id_3', 'Action 3', options: <DarwinNotificationActionOption>{DarwinNotificationActionOption.foreground});

final DarwinNotificationCategory category = DarwinNotificationCategory(
  'demoCategory',
  actions: <DarwinNotificationAction>[action1, action2, action3],
  options: <DarwinNotificationCategoryOption>{DarwinNotificationCategoryOption.hiddenPreviewShowTitle},
);

final DarwinInitializationSettings initializationSettingsDarwin = DarwinInitializationSettings(
  requestSoundPermission: false,
  requestBadgePermission: false,
  requestAlertPermission: false,
  onDidReceiveLocalNotification: onDidReceiveLocalNotification,
  notificationCategories: <DarwinNotificationCategory>[category],
);

5. テスト

プラグインはモックを使用してテストが可能です。テスト用のサンプルコードはtest/flutter_local_notifications_test.dartに実装されています。

void main() {
  test('test notification', () async {
    final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
        FlutterLocalNotificationsPlugin();

    // モックのセットアップなど

    await flutterLocalNotificationsPlugin.show(
        0, 'test title', 'test body', null);

    // 検証
  });
}

パラメータの説明

  • AndroidNotificationDetails
  • channelId (String): チャンネルID
  • channelName (String): チャンネル名
  • channelDescription (String): チャンネルの説明
  • importance (Importance): 通知の重要度
  • priority (Priority): 通知の優先度
  • ticker (String): ステータスバーに表示されるテキスト
  • DarwinNotificationDetails
  • threadIdentifier (String): スレッドID(通知のグループ化に使用)
  • categoryIdentifier (String): カテゴリID
  • actions (List): 通知のアクションリスト
  • InitializationSettings
  • android (AndroidInitializationSettings): Android用の初期設定
  • iOS (DarwinInitializationSettings): iOS用の初期設定
  • macOS (MacOSInitializationSettings): macOS用の初期設定
  • linux (LinuxInitializationSettings): Linux用の初期設定

Buy me a coffee!

Flutterアプリ開発
シェアする
sogaをフォローする
タイトルとURLをコピーしました