web analytics

Flutter: การใช้ Notification ใน Flutter

สวัสดีผู้อ่านครับ ช่วงนี้ยังอยู่กับการลองเล่น library เรื่องต่างๆใน Flutter ลองเล่นไปเรื่อยๆแล้วสนุกดี บล็อกนี้พามาลองใช้งานการแสดงแจ้งเตือนหรือ notification จากแอปของเรา (ผมขอเรียกสั้นๆว่า noti นะ) โดยในบล็อกนี้จะมีเฉพาะส่วนการแสดง noti จากคำสั่งในแอปของเราเอง ไม่ได้รวมส่วนของการ push noti หรือ firebase messaging นะ ซึ่งมีคนทำ library สำหรับ เรื่องนี้ไว้ดีมากทีเดียว

เพิ่ม dependencies

ในตัวอย่างนี้ dependencies ที่เราจะใช้มี 3 ตัว คือ
flutter_local_notifications เอาไว้แสดง noti
http เอาไว้โหลดรูปจาก url มาแสดงใน noti
path_provider เอาไว้ใช้งานเรื่องไฟล์

เพิ่ม dependencies ใน pubspec.yaml

ใน android เพิ่ม permission และ receiver ใน android/app/src/main/AndroidManifest.xml ซึ่ง flutter_local_notifications มีความสามารถในการทำ Scheduled Notification ด้วย คือตั้งเวลาให้แจ้งเตือนตามเวลา ดังนั้น หากปิดเครื่องไป แล้วเปิดใหม่จะต้องให้แอปรัน service อีกครั้ง จึงต้องใส่ permission RECEIVE_BOOT_COMPLETED นั่นเอง

สำหรับ iOS ตัว noti ฟีเจอร์ไม่เยอะเท่า android เลยไม่ต้องทำอะไร ลองอ่านรายละเอียดได้ที่
https://github.com/MaikuB/flutter_local_notifications

เริ่มต้น

มาลองเล่น noti กัน ก่อนอื่นเลย import package เข้ามา

ประกาศตัวแปร FlutterLocalNotificationsPlugin ซึ่งเจ้าตัวนี้จะต้องเป็นตัวแปร Global ของแอป

ประกาศตัวแปรใน state คือ channel id , name , description เพราะว่าใน android Oreo มีฟีเจอร์Notification channel ที่ให้ผู้ใข้สามารถเลือกปิดได้

ต่อมาคือ ไอคอนของ noti ใน android จะใช้จากใน res/drawable ดังนั้นเราต้องเอาไอคอนไปวางไว้ในนี้

ที่ initState คือ เราต้องกำหนด initialize ของ flutterLocalNotificationsPlugin
ซึ่งสิ่งที่เราต้องทำคือ สร้าง InitializationSettings สำหรับ android และ iOS ให้มัน

ใน android หากเรากดที่ noti มันจะเข้ามาที่ onSelectNotification แต่ใน iOS จะเข้ามาที่ onDidReceiveLocalNotification

ส่งการแจ้งเตือน

มาลองส่งการแจ้งเตือนให้แสดงกันบ้าง วิธีการง่ายมาก คือใช้ flutterLocalNotificationsPlugin.show() โดยกำหนด id ให้มัน เอาไว้สำหรับเราจะลบหรืออัพเดทกก็ใช้ id นี้ แล้วก็กำหนด title, body ซะ อีกตัวพระเอกเลยคือ PlatformChannelSpecifics มันก็คือการกำหนดว่า noti ของเราจะแสดงในรูปแบบไหน ในแต่ละ platfrom ซึ่งใน android มีลูกเล่นเยอะ แต่ใน iOS มีแค่แบบธรรมดา

สร้างหน้า UI ให้กดปุ่มแล้วเรียกฟังชันก์ที่เราทำไว้

ลองรันได้ แค่นี้ก็ได้ notification แล้ว ซึ่งอย่างที่บอกไปตอนต้นว่าใน android เมื่อเรากดที่ noti มันจะไปเข้า onSelectNotification พร้อม payload ดังนั้นเราก็สามารถรู้ว่าผู้ใช้กด noti อันไหน

ของ iOS

ซึ่งคำสั่ง show อื่นๆก็มีลูกเล่นแบบกำหนดเวลา หรือแบบตามกำหนดการได้อีกด้วย

อย่างที่กล่าวไปตอนต้นว่าสำหรับใน android Oreo ขึ้นไป จะมี Notification Channel ใน Setting ซึ่งผู้ใช้สามารถมาปิดได้ว่า ไม่อยากได้การแจ้งเตือนประเภทนี้ โดยชื่อ channel ก็มาจากที่เราตั้งไว้ตอน initialize นั่นเอง

การยกเลิกการแจ้งเตือน

หากเราต้องการลบหรือยกเลิกการแจ้งเตือนนั้นออก ไม่ให้ผู้ใช้เห็นสามารถใช้คำสั่ง cancel โดยใช้ id หรือจะยกเลิกทุกอันด้วย cancelAll ก็ได้

การแจ้งเตือนแบบแนบรูปภาพ

มาลองเล่น noti ที่แนบรูปภาพมาด้วย ในขณะที่เขียนอยู่นี้ library ยังไม่รองรับใน iOS จะใช้งานได้แต่ใน android ดังนั้นลองเล่นใน android ก่อนนะ

เริ่มจากลองแบบใช้รูปจาก resource ก่อน
เพิ่มรูปภาพลงไปใน android/app/main/res/drawable

การใช้งาน ใช้แบบเดียวกับการแสดง noti ก่อนหน้านี้ แค่เพิ่ม style: AndroidNotificationStyle.BigPicture และ styleInformation ว่าใช้รูปจาก Drawable นะ

ผลที่ได้คือ ได้ noti สวยๆพร้อมรูปภาพแบบนี้แล้ว

หากต้องการใช้รูปภาพจาก URL ก็ทำได้ โดยจะต้องดาวน์โหลดรูปภาพมาก่อน แล้ว save ลงเป็นไฟล์ จากนั้นจึงเอาไฟล์รูปภาพไปแนบใส่ noti โดยกำหนดว่าstyleInformation ใช้จาก FilePath

ลองรัน

การแจ้งเตือนแบบบทสนทนา

ความสามารถนึงใน noti ที่เพิ่มเข้ามาใน android N คือ การแสดง noti แบบ messaging คล้ายๆกับการแชทโดยจะสามารถกำหนดรูปโปรไฟล์และเวลาได้

ซึ่งใน Flutter ผู้พัฒนาเขาก็ได้ เขียนให้ใช้งานฟีเจอร์นี้ได้ง่ายๆ ด้วยการใช้งานคลาส Person และกำหนด key

จากนั้นที่ AndroidNotificationDetails ก็กำหนด style: AndroidNotificationStyle.Messaging

หากเรานำไปใช้งานใน android ที่ต่ำกว่า Oreo ก็จะแสดงแจ้งเตือนเป็นแบบธรรมดาแทน

การแจ้งเตือนแบบ Progress

อีกแบบคือการใช้ noti ให้แสดง progress วิธีการใช้งานง่ายมาก แค่กำหนด
showProgress: true แล้วใส่ค่า progress และ max เท่านั้นเอง หากอยากอัพเดทก็แค่เรียก show ซ้ำ

ตัวอย่าง

มีตัวเลือกให้กำหนด indeterminate คือ ตัว progress จะรันแบบไม่สิ้นสุด

การแจ้งเตือนแบบข้อความยาวๆ

noti อีกอันคือการใส่ข้อความยาวๆ ซึ่งรองรับการใช้ HTML ด้วย เรียกว่า noti แบบนี้ว่า Big Text

สรุป

เจ้า Library flutter_local_notifications ช่วยให้เราสามารถใช้คำสั่งในการแสดงผล Notification ใน Flutter ได้ง่ายมาก

อ่านเพิ่มเติมและดูตัวอย่างอบบอื่นๆได้ที่
https://github.com/MaikuB/flutter_local_notifications/

จริงๆจะว่าไปแล้วเรื่อง notification ผมก็เคยเขียนบล็อกสำหรับใน Android ไปแล้วซึ่งในบล็อกนี้ของ Flutter ก็คล้ายกันมาก หากอ่านบล็อกนี้จบก็แวะไปอ่านได้นะ