WeB LoG'S JuUiER: Flutter ทำ push notify แบบ local

push notify ก็คล้ายๆ เราใช้ Line แล้วมีคนส่งข้อความถึงเรา
ข้อความนั้นก็จะแสดงป๊อปอัพด้านบนโทรศัพท์เรา อันนั้นแหละเลือก push notify
ซึ่งแบบ Line นั้นมัน online มา
แต่ local notify คือประมาณเราจะสั่งให้แสดงเองจากโปรแกรมที่เราเขียนนี่แหละ

Step

เพิ่ม dependencies: ใน pubspec.yaml (แนะนำใช้ version ล่าสุด โดยไป search ใน https://pub.dev/ ดูตรง Installing เราจะได้ version ล่าสุด)

จากนั้นสั่งคำสั่ง ตามด้านล่างนี้ (หรือคลิก Pub get บน bar IDE ก็ได้เช่นกัน)
$ flutter pub get
ต่อไปคือแก้ไขไฟล์ AndroidManifest.xml เพิ่ม permission และ receiver และ Save ให้เรียบร้อย

เริ่มโค้ดจริงๆ แหละ เปิด main.dart เลย จัดการที่ไฟล์นี้แหละ
เพิ่ม import package และ สร้าง global object 1 ตัว

FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
FlutterLocalNotificationsPlugin();

ที่ initState คือ เราต้องกำหนด initialize ของ flutterLocalNotificationsPlugin
ซึ่งสิ่งที่เราต้องทำคือ สร้าง InitializationSettings สำหรับ android และ iOS ให้มัน
ใน android หากเรากดที่ noti มันจะเข้ามาที่ onSelectNotification แต่ใน iOS จะเข้ามาที่ onDidReceiveLocalNotification
เพิ่ม initState() ภายใน class _MyHomePageState extends State { ... }

@override initState() { message = "No message.";
var initializationSettingsAndroid = AndroidInitializationSettings('logo_moph');
var initializationSettingsIOS = IOSInitializationSettings( onDidReceiveLocalNotification: (id, title, body, payload) { print("onDidReceiveLocalNotification called."); });
var initializationSettings = InitializationSettings( initializationSettingsAndroid, initializationSettingsIOS);
flutterLocalNotificationsPlugin.initialize(initializationSettings, onSelectNotification: (payload) { // when user tap on notification. print("onSelectNotification called."); setState(() { message = payload; }); }); super.initState(); }

โดยสังเกตใน AndroidInitializationSettingAndroid('logo_moph');
logo_moph คือ ไฟล์ภาพ png ที่จะเอามาเป็น icon แสดงใน notify ด้วย พาธจะอยู่ที่นี้ android/app/src/main/res/drawable (อันนี้เจอ error บ่อยๆ เวลารัน)

สร้าง method send... สำหรับรับกับการกดปุ่มของเรา ใส่ title และ body ของ notify ส่วน payload คือ คลิก notify popup แล้ว เอา data ส่วนนี้ไปใช้งานต่อ เผื่อ setstate ใหม่

sendNotification() async { var androidPlatformChannelSpecifics = AndroidNotificationDetails( '10000', 'FLUTTER_NOTIFICATION_CHANNEL', 'FLUTTER_NOTIFICATION_CHANNEL_DETAIL', importance: Importance.Max, priority: Priority.High, ); var iOSPlatformChannelSpecifics = IOSNotificationDetails();
var platformChannelSpecifics = NotificationDetails( androidPlatformChannelSpecifics, iOSPlatformChannelSpecifics);
await flutterLocalNotificationsPlugin.show(111, 'My title', 'My body message', platformChannelSpecifics, payload: 'My data'); }