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

Friday, July 3, 2020

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'); }