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目錄中創建目錄。
2. 在此處保留一個小的音頻（音樂），並記住文件名。

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

搞定！！！！