# Flutterでflutter_local_notificationsを使って通知を表示する方法

## 目次

1. 1-1 Flutter Local Notificationsの概要

2. 1-2 初期設定

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

   2. 2-2 Androidの設定

   3. 2-3 iOSの設定

3. 1-3 基本的な通知の実装

   1. 3-1 通知の初期化

   2. 3-2 シンプルな通知の送信

4. 1-4 応用的な機能

   1. 4-1 スケジュール通知

   2. 4-2 通知のカスタマイズ

   3. 4-3 通知アクション

5. 1-5 デバッグとトラブルシューティング

6. 1-6 まとめ

## 1-1 Flutter Local Notificationsの概要

Flutter Local Notificationsは、アプリケーション内で通知機能を実装するための強力なパッケージです。このパッケージを使用すると、AndroidやiOSでの通知表示が簡単に行えます。通知はユーザーエンゲージメントを高め、アプリの重要なイベントをユーザーに知らせるための重要な手段です。

## 1-2 初期設定

### 2-1 パッケージのインストール

`flutter_local_notifications`パッケージをまず依存関係に追加します。

```yaml

dependencies:

  flutter:

    sdk: flutter

  flutter_local_notifications: ^11.0.0

```

`pubspec.yaml`ファイルを保存したら、Terminalで次のコマンドを実行してパッケージをインストールします。

```shell

flutter pub get

```

### 2-2 Androidの設定

`Android`用の設定を行います。`android/app/src/main/AndroidManifest.xml`に以下を追加します。

```xml

<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>

```

また、`application`タグに以下を追加します。

```xml

<meta-data

    android:name="com.google.firebase.messaging.default_notification_channel_id"

    android:value="high_importance_channel"/>

```

`res/`フォルダ内に`drawable`フォルダを作成し、通知アイコンを配置します。そして`drawable`フォルダ内に保存されているアイコンの名前を`@drawable/your_icon`として設定します。

### 2-3 iOSの設定

iOSのために、`ios/Runner/Info.plist`に以下のコードを追加します。

```xml

<key>UIBackgroundModes</key>

<array>

    <string>fetch</string>

    <string>remote-notification</string>

</array>

```

この設定はiOSでの通知受信に必要です。

## 1-3 基本的な通知の実装

### 3-1 通知の初期化

まずは`flutter_local_notifications`をインポートし、通知のインスタンスを初期化します。

```dart

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

    

final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =

      FlutterLocalNotificationsPlugin();

void initializeNotifications() async {

  final AndroidInitializationSettings initializationSettingsAndroid =

      AndroidInitializationSettings('your_notification_icon');

  final InitializationSettings initializationSettings =

      InitializationSettings(android: initializationSettingsAndroid);

  

  await flutterLocalNotificationsPlugin.initialize(initializationSettings);

}

```

### 3-2 シンプルな通知の送信

以下のコードでシンプルな通知を送信します。

```dart

Future<void> showNotification() async {

  const AndroidNotificationDetails androidPlatformChannelSpecifics =

      AndroidNotificationDetails('your_channel_id', 'your_channel_name',

          importance: Importance.max, priority: Priority.high, showWhen: false);

  const NotificationDetails platformChannelSpecifics =

      NotificationDetails(android: androidPlatformChannelSpecifics);

  

  await flutterLocalNotificationsPlugin.show(

      0, 'テスト通知', 'Flutter Local Notificationsからの通知です', platformChannelSpecifics);

}

```

`showNotification`関数を呼び出すことで、通知が表示されます。

## 1-4 応用的な機能

### 4-1 スケジュール通知

例えば、24時間後に通知をスケジュールする場合、以下のようにします。

```dart

Future<void> scheduleNotification() async {

  await flutterLocalNotificationsPlugin.zonedSchedule(

      0,

      'スケジュール通知',

      '24時間後の通知です',

      tz.TZDateTime.now(tz.local).add(const Duration(hours: 24)),

      const NotificationDetails(

          android: AndroidNotificationDetails('your_channel_id', 'your_channel_name')),

      androidAllowWhileIdle: true,

      uiLocalNotificationDateInterpretation:

          UILocalNotificationDateInterpretation.absoluteTime);

}

```

### 4-2 通知のカスタマイズ

通知のアイコン、サウンド、振動パターンをカスタマイズすることもできます。

```dart

final AndroidNotificationDetails androidPlatformChannelSpecifics =

    AndroidNotificationDetails(

        'your_channel_id',

        'your_channel_name',

        icon: 'your_custom_icon',

        sound: RawResourceAndroidNotificationSound('custom_sound'),

        vibrationPattern: Int64List.fromList([0, 1000, 500, 1000]),

        importance: Importance.max,

        priority: Priority.high);

```

### 4-3 通知アクション

アクション付きの通知を作成することも可能です。

```dart

// 準備する必要があるアクションボタンなどの設定を追加

final NotificationDetails notificationDetails = NotificationDetails(

  android: AndroidNotificationDetails(

    'your_channel_id',

    'your_channel_name',

    actions: <AndroidNotificationAction>[

      AndroidNotificationAction('action1', 'Action 1'),

      AndroidNotificationAction('action2', 'Action 2'),

    ],

  ),

);

await flutterLocalNotificationsPlugin.show(

  0,

  'アクション通知',

  'アクションボタン付きの通知です',

  notificationDetails,

);

```

## 1-5 デバッグとトラブルシューティング

1. 通知が表示されない: アイコン設定が正しいか確認します。

2. スケジュール通りに通知が働かない: タイムゾーン設定が正しいか確認します。

## 1-6 まとめ

Flutterと`flutter_local_notifications`パッケージを使用すると、カスタマイズされた通知を簡単にアプリに組み込むことができます。シンプルな通知だけでなく、スケジュール通知やアクション付き通知を実装することも可能です。適切な設定を施すことで、効率的にユーザーに重要な情報を伝えることができ、アプリケーションの価値を高めることができます。

Flutterでflutter_local_notificationsを使って通知を表示する方法

目次

続きを読むには単価診断を受けてください（30秒）