Flutterでローカル通知を設定する方法(iOS)

ど素人から始めるFlutter

2021年8月15日 17:26

スマホアプリでの通知はローカル通知とプッシュ通知の2種類あるそうです。
今回はローカル通知について実装方法を調べたので、メモしておきます。
とりあえずiOSで通知したい方は参考にしてください。

ローカル通知
・アプリ自体から通知を出すイメージ。
・外部との通信がない。オフラインでも通知を出せる。
・例) 3分後に鳴るタイマーの通知。

プッシュ通知
・サーバーから情報を受け取って通知を出すイメージ。
・通信が必要。
・例) 〇〇さんがいいねしました的なtwitterの通知。

今回はボタンを押したら通知するような実装をしました。

ボタン押したら通知が来るように実装してみた。#Flutter #プログラミング勉強中 pic.twitter.com/tJbc4cbmm8
— ど素人から始めるFlutter (@YyYy95482594) August 15, 2021

他にもいい書き方があるかもしれませんが、以下の手順でiOSは動いたのでメモしておきます。（Androidはエミュレータが不調で確認できていません）

なお、以下の手順では使用PCはMacBook Air、IDEはAndroid Studioを使っています。

①flutter_local_notifications をインストールする

ローカル通知にはこちらのパッケージを使用します。

pubspec.yaml ファイルのdependenciesのところに貼り付けて、Pub get をクリックします。

※補足
貼り付けるコードは、上記パッケージのページのinstallingタブに書いてあります。

②iOS設定をする

didFinishLaunchingWithOptionsメソッドにコードを追記します。
（上記パッケージのページのReadmeタブ、iOS setupのところに書いてあります）

⑴ didFinishLaunchingWithOptionsメソッドを探す

Android Studio 上でcommand + shift + Fを押すと検索窓が出てきます。
プロジェクトの全ファイルから検索できます。

⑵ コードを追記する

追記するコードはパッケージのページを参照するのがいいと思います。対象のファイルはAppDelegateファイルです。

AppDelegate.swift

③main.dartのmainメソッドに追記する

⑴ （下準備）FlutterLocalNotificationsPluginをイニシャライズする

mainメソッドの上に下記のコードを書いてイニシャライズします。
そのままだと赤いなみなみが出るので、パッケージのimportをします。

final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
   FlutterLocalNotificationsPlugin();

⑵ mainメソッドに追記する

下記のコードをmainメソッドの中に追記します。

//ranAppよりも前に何かしたい場合に追記するらしい
WidgetsFlutterBinding.ensureInitialized();

//iOS設定
 final IOSInitializationSettings initializationSettingsIOS =
     IOSInitializationSettings(
   requestSoundPermission: true,
   requestBadgePermission: true,
   requestAlertPermission: true,
 );
 
 //initializationSettingsのオブジェクト作成
 final InitializationSettings initializationSettings = InitializationSettings(
   iOS: initializationSettingsIOS,
   android: null,
 );
 
 await flutterLocalNotificationsPlugin.initialize(initializationSettings,
 );

そして、mainメソッドにasyncをつけます。

※補足
iOSのrequestPermissionはこんなやつです。通知を許可しますか？みたいなやつです。

④通知用のメソッドを作成する

mainメソッドの下にsetNotificationメソッドを作りました。
このメソッドを呼び出すと通知がされます。

void setNotification() async {
 const IOSNotificationDetails iOSPlatformChannelSpecifics =
     IOSNotificationDetails(
         // sound: 'example.mp3',
         presentAlert: true,
         presentBadge: true,
         presentSound: true);
 NotificationDetails platformChannelSpecifics = const NotificationDetails(
     iOS: iOSPlatformChannelSpecifics,
     android: null,
     );
 await flutterLocalNotificationsPlugin.show(
     0, 'title', 'body', platformChannelSpecifics);
}

下から2番目の行で通知のメッセージを設定できます。
titleとbodyは通知では以下の部分に反映されます。

第一引数の「0」の部分はidとのことなので、他の通知と被らない整数値（今回は0）なら問題ないのかなと思います。

また、通知の表示部分のアイコンはアプリアイコン、名前はアプリ名が表示されているようです。

ちなみに、アプリアイコンの設定方法はこちらを参考にしてください（宣伝）。

また、上記コードではコメントアウトしていますが、通知音（4行目sound）の設定もできます。デフォルトだとトゥルルン♪みたいなやつですが、ここでお好きな音に設定できます。

ちなみに、音のファイルを設定する方法はこちらの記事を参考にしてください（宣伝その２）。

⑤setNotificationメソッドを呼び出す

今回はFloatingActionButtonを押すと通知されるようにしています。

onPressedのところに④で作ったメソッドを追記して、ボタンが押された時に呼び出されるようにします。実装は以上です！

main.dart全コード

今回の全コードはこちら。
Flutterプロジェクトの初期画面からカウンターを消して今回のローカル通知を追記しています。

//main.dart

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

final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
   FlutterLocalNotificationsPlugin();

void main() async {
 WidgetsFlutterBinding.ensureInitialized();

 IOSInitializationSettings initializationSettingsIOS =
     const IOSInitializationSettings(
   requestSoundPermission: true,
   requestBadgePermission: true,
   requestAlertPermission: true,
 );
 final InitializationSettings initializationSettings = InitializationSettings(
   iOS: initializationSettingsIOS,
 );
 await flutterLocalNotificationsPlugin.initialize(
   initializationSettings,
 );

 runApp(const MyApp());
}

class MyApp extends StatelessWidget {
 const MyApp({Key? key}) : super(key: key);

 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: const MyHomePage(title: 'Flutter Demo Home Page'),
   );
 }
}

class MyHomePage extends StatefulWidget {
 const MyHomePage({Key? key, required this.title}) : super(key: key);

 final String title;

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

class _MyHomePageState extends State<MyHomePage> {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     floatingActionButton: const FloatingActionButton(
       onPressed: setNotification,
       tooltip: 'Increment',
       child: Icon(Icons.add),
     ), // This trailing comma makes auto-formatting nicer for build methods.
   );
 }
}

void setNotification() async {
 const IOSNotificationDetails iOSPlatformChannelSpecifics =
     IOSNotificationDetails(
         // sound: 'example.mp3',
         presentAlert: true,
         presentBadge: true,
         presentSound: true);
 NotificationDetails platformChannelSpecifics =
     const NotificationDetails(iOS: iOSPlatformChannelSpecifics);
 await flutterLocalNotificationsPlugin.show(
     0, 'title', 'body', platformChannelSpecifics);
}

参考文献

以上、ありがとうございました！

この記事が気に入ったらサポートをしてみませんか？