Flutter 弹通知栏插件 flutter_local_notifications 教学

Flutter 弹通知栏插件 flutter_local_notifications 教学

2020-02-20 15:25:49发布 浏览数:5729
概述:Flutter 弹通知栏插件 flutter_local_notifications 教学

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

步骤1:在pubspec.yaml文件中添加flutter_local_notifications依赖

 flutter_local_notifications:^0.9.1

步骤2:向您的AndroidManifest.xml 添加VIBRATE和RECEIVE_BOOT_COMPLETED权限[可选]

       FlutterApplication and put your custom class here. -->

    <uses-permission android:name="android.permission.INTERNET"/>

    <uses-permission android:name="android.permission.VIBRATE" />

    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
步骤3:在可绘制目录中为Notificaiton Icon 添加图像 [可选]
(flutter_app_name> android> app> src> res> drawable> app_icon.png

如果您没有为通知图标添加图像,则必须告诉应用程序使用存储在“ mipmap”中的应用程序图标。[ANDROID]

 

步骤4:添加提示音(音乐) [可选]

如果您不添加通知音,则它将是您通知的默认音。

添加自定义音调(音乐)

  1. 在res目录中创建目录。 在此处保留一个小的音频(音乐),并记住文件名。
(flutter_app_name> android> app> src> res> raw>

 步骤5:现在是时候进行编码了

 

所以首先我们要初始化Flutter Notification Plugin,最好在initState()中初始化它这样一旦我们的应用程序启动就可以对其进行初始化,我们可以随时使用它。

在初始化时,我们必须牢记两件事。

1.我们必须定义应用程序图标,在上图中,您可以看到此' new AndroidInitializationSettings('app_icon')'。这里的app_icon是我们放置在drawable目录中的图像名称。

如果您没有输入,则可以使用默认图标,而必须使用“ @ mipmap / ic_launcher”而不是“ app_icon ”。

2.在第二行“ selectNotification:onSelectNotification ”。此行负责当我们单击通知时将要发生的操作。此方法必须返回Future,并且此方法必须具有将成为有效负载的字符串参数。

在下面,您可以看到我正在显示对话框的onSelectNotification方法。您可以打开新页面,也可以显示详细的通知

完整代码:

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

 

void main() => runApp(new MaterialApp(home: new MyApp()));

 

class MyApp extends StatefulWidget {

  @override

  _MyAppState createState() => _MyAppState();

}

 

class _MyAppState extends State<MyApp> {

  FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin;

 

  @override

  void initState() {

    super.initState();

    flutterLocalNotificationsPlugin = new FlutterLocalNotificationsPlugin();

    var android = new AndroidInitializationSettings('@mipmap/ic_launcher');

    var iOS = new IOSInitializationSettings();

    var initSetttings = new InitializationSettings(android, iOS);

    flutterLocalNotificationsPlugin.initialize(initSetttings, onSelectNotification: onSelectNotification);

  }

 

  Future onSelectNotification(String payload) {

    debugPrint("payload : $payload");

    showDialog(

      context: context,

      builder: (_) => new AlertDialog(

        title: new Text('Notification'),

        content: new Text('$payload'),

      ),

    );

  }

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: new AppBar(

        title: new Text('Flutter Local Notification'),

      ),

      body: new Center(

        child: new RaisedButton(

          onPressed: showNotification,

          child: new Text(

            'Demo',

            style: Theme.of(context).textTheme.headline,

          ),

        ),

      ),

    );

  }

 

  showNotification() async {

    var android = new AndroidNotificationDetails(

        'channel id', 'channel NAME', 'CHANNEL DESCRIPTION',

        priority: Priority.High,importance: Importance.Max

    );

    var iOS = new IOSNotificationDetails();

    var platform = new NotificationDetails(android, iOS);

    await flutterLocalNotificationsPlugin.show(

        0, 'New Video is out', 'Flutter Local Notification', platform,

        payload: 'Nitish Kumar Singh is part time Youtuber');

  }

}

搞定!!!!

请先
登录
后评论
0 条评论
暂时没有评论
最新文章
更多