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

  • เพิ่มเรียก send method ใน onpressed


  • รันโค้ดแล้วกดปุ่ม Send เลย ถ้าทุกอย่างถูกต้องเราจะได้ push notify แสดงดังภาพ


เพิ่มเติม
  • ชื่อ popup เหนือ title เราตั้งค่าได้ใน AndroidManifest.xml โดยตั้งที่ 
  • android:label="your_app_name"
Ref

No comments:

Post a Comment