Flutter 弹通知栏插件 flutter_local_not

很多情况下我们需要给用户弹通知栏，这个功能在Android中是非常简单的，在FLutter中，也有非常成熟的插件flutter_local_notifications供我们使用，这篇文章主要介绍flutter_local_notifications插件初使用是需要进行的几点配置，希望能帮到大家！

1、在 pubspec.yaml 里面添加依赖。

dependencies:
  flutter_local_notifications: ^0.4.4+2

2、在Dart文件中导入包。

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

3、在main.dart文件中声明插件。

……
FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin;

/// IMPORTANT: running the following code on its own won't work as there is setup required for each platform head project.
/// Please download the complete example app from the GitHub repository where all the setup has been done
void main() async {
  flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
  // NOTE: if you want to find out if the app was launched via notification then you could use the following call and then do something like
  // change the default route of the app
  // var notificationAppLaunchDetails =
  //     await flutterLocalNotificationsPlugin.getNotificationAppLaunchDetails();
  runApp(
    MaterialApp(
      home: HomePage(),
    ),
  );
}
……

4、在initState里边初始化。

……
@override
  initState() {
    super.initState();
    // initialise the plugin. app_icon needs to be a added as a drawable resource to the Android head project
    var initializationSettingsAndroid =
        AndroidInitializationSettings('app_icon');
    var initializationSettingsIOS = IOSInitializationSettings(
        onDidReceiveLocalNotification: onDidReceiveLocalNotification);
    var initializationSettings = InitializationSettings(
        initializationSettingsAndroid, initializationSettingsIOS);
    flutterLocalNotificationsPlugin.initialize(initializationSettings,
        onSelectNotification: onSelectNotification);
  }
……

①其中‘app_iocn’是指通知上的图标，将该图标放置到drawable目录下即可。

image.png

②onDidRecieveLocalNotification 这个是IOS端接收到通知所作的处理的方法，需要添加到main.dart文件中。

……

Future<void> onDidReceiveLocalNotification(
      int id, String title, String body, String payload) async {
    // display a dialog with the notification details, tap ok to go to another page
    await showDialog(
      context: context,
      builder: (BuildContext context) => CupertinoAlertDialog(
            title: Text(title),
            content: Text(body),
            actions: [
              CupertinoDialogAction(
                isDefaultAction: true,
                child: Text('Ok'),
                onPressed: () async {
                  Navigator.of(context, rootNavigator: true).pop();
                  await Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => SecondScreen(payload),
                    ),
                  );
                },
              )
            ],
          ),
    );
  }
……

③onSelectNotification 是对通知被点击的监听方法，这个参数是可选的。

……
Future<void> onSelectNotification(String payload) async {
    if (payload != null) {
      debugPrint('notification payload: ' + payload);
    }

    await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => SecondScreen(payload)),
    );
  }
……

payload 可作为通知到一个标记，区分点击到通知具体用法如下：

……
Future onSelectNotification(String payload) async {
    if (payload != null) {
      debugPrint('notification payload: ' + payload);
    }
//payload 可作为通知的一个标记，区分点击的通知。
    if(payload != null && payload == "complete") {
      await Navigator.push(
        context,
        new MaterialPageRoute(builder: (context) => new SecondScreen(payload)),
      );
    }
  }
……

经过以上三小步，初始化工作就大功告成了🥳，插件提供了很多种用法，我们一步一步的来进行学习，其实道理都相类似，学会一个其余的就很简单了

5、插件提供的各种通知类型的用法。

①普通的通知用法。

普通的通知就是我们平时最常见的通知，点击后屏幕上方弹出一个通知栏，可以点击，点击后就会运行初始化时声明的onSelectNotification方法。

Future _showNotification() async {
    //安卓的通知配置，必填参数是渠道id, 名称, 和描述, 可选填通知的图标，重要度等等。
    var androidPlatformChannelSpecifics = new AndroidNotificationDetails(
        'your channel id', 'your channel name', 'your channel description',
        importance: Importance.Max, priority: Priority.High);
    //IOS的通知配置
    var iOSPlatformChannelSpecifics = new IOSNotificationDetails();
    var platformChannelSpecifics = new NotificationDetails(
        androidPlatformChannelSpecifics, iOSPlatformChannelSpecifics);
    //显示通知，其中 0 代表通知的 id，用于区分通知。
    await flutterLocalNotificationsPlugin.show(
        0, 'title', 'content', platformChannelSpecifics,
        payload: 'complete');
  }

暂时更到这里，后续会持续进行更新，老铁们快来关注我吧！素质三连走起哦～🥳