Последнее обновление:

Как использовать push-уведомления с Flutter

Flutter

Я не смог найти простой документации для push-уведомлений во Flutter, большая часть из найденного была слишком сложной и запутанной. В этом руководстве я хочу объяснить только то, что необходимо знать, без лишней воды.

В статье описывается подключение уведомлений только для Android OS

1. Начало работы

Создаем новый проект с помощью flutter create push_messages. В pubspec.yaml добавляем следующий пакет:

dependencies:
  flutter_local_notifications: 3.0.0

Не забудьте запустите flutter pub get, чтобы установить пакет.

2. Установка разрешений

Далее открываем манифест android/app/src/main/AndroidManifest.xml

И добавляем необходимые для работы уведомлений разрешения и код, который будет отображать уведомление даже если ваше устройство заблокировано, и включит ваш экран. Также мы установим код на случай, если вы захотите запланировать уведомления в будущем. Добавленные строки я отметил комментариями.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.push_messages">
    <!-- начало вставки -->
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
    <uses-permission android:name="android.permission.VIBRATE" />
    <!-- конец вставки -->
   <application
        android:label="push_messages"
        android:icon="@mipmap/ic_launcher">
        <activity
          <!-- начало вставки -->
          android:showWhenLocked="true"
          android:turnScreenOn="true">
          <!-- конец вставки -->
        </activity>
        <!-- начало вставки -->
        <receiver android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationBootReceiver">
          <intent-filter>
              <action android:name="android.intent.action.BOOT_COMPLETED"/>
              <action android:name="android.intent.action.MY_PACKAGE_REPLACED"/>
              <action android:name="android.intent.action.QUICKBOOT_POWERON" />
              <action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>
          </intent-filter>
        </receiver>
        <!-- конец вставки -->
  </application>
</manifest>

3. Инициализация уведомлений

Давайте создадим файл lib/notifications.dart. Здесь у нас будет три метода:

  • initNotifications() - нам это нужно для инициализации настроек уведомлений для Android, iOS и macOS. Для Android мы будем использовать значок для нашего уведомления, который мы назовем app_icon (пояснения в следующем разделе).
  • pushNotification() - нам нужно установить канал уведомлений, который необходим для Android 8.0+. У него есть множество опций (больше, чем показано). Также здесь, наконец, мы подходим к той части уведомления, которая будет отображаться на экране flutterLocalNotificationsPlugin.show (<your-displayed-notification>). Здесь мы указываем идентификатор, заголовок и содержание уведомления, все это говорит само за себя. Но есть еще один элемент который будет передан обратно в приложение, когда пользователь нажмет на уведомление. 
  • selectNotification() - этот метод будет срабатывать при выборе уведомления.
import 'package:flutter_local_notifications/flutter_local_notifications.dart';

class Notifications {
  FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
     FlutterLocalNotificationsPlugin();

  void initNotifications() async {
    final AndroidInitializationSettings initializationSettingsAndroid =
        AndroidInitializationSettings('app_icon');
    final IOSInitializationSettings initializationSettingsIOS =
        IOSInitializationSettings(
            onDidReceiveLocalNotification: null);
    final MacOSInitializationSettings initializationSettingsMacOS =
        MacOSInitializationSettings();
    final InitializationSettings initializationSettings = InitializationSettings(
        android: initializationSettingsAndroid,
        iOS: initializationSettingsIOS,
        macOS: initializationSettingsMacOS);
      await flutterLocalNotificationsPlugin.initialize(initializationSettings,
          onSelectNotification: selectNotification);
  }

  Future<void> pushNotification() async {
    const AndroidNotificationDetails androidPlatformChannelSpecifics =
    AndroidNotificationDetails(
        'push_messages: 0', 'push_messages: push_messages', 'push_messages: A new Flutter project',
        importance: Importance.max,
        priority: Priority.high,
        showWhen: false,
        enableVibration: true,
      );
    const NotificationDetails platformChannelSpecifics =
        NotificationDetails(android: androidPlatformChannelSpecifics);
    await flutterLocalNotificationsPlugin.show(
        0, 'Push Notifications With Flutter', 'Start to push notifications locally (@jeroenouw)', platformChannelSpecifics,
        payload: 'item x');
  }

  Future selectNotification(String payload) async {
  // какие-то действия...
  }
}

4. Установка значка уведомления

Добавьте иконку app_icon.png в папку android/app/src/main/res/drawable/ Желательно размером 72x72, мы будем использовать ее как значок для нашего уведомления.

5. Создание уведомлений.

На этапе создания нового приложения в файле lib/main.dart был сгенерирован код счетчика нажатий floatActionButton. Удаляем все, что связано с этим счетчиком и добавляем следующие строки чуть ниже класса _MyHomePageState:

final Notifications _notifications =  Notifications();
@override
  void initState() {
    super.initState();
  this._notifications.initNotifications(); // инициализация
  }
void _pushNotification() {
  this._notifications.pushNotification(); // вызов уведомления
  }

Внутри FloatingActionButton у вас есть опция onPressed, мы добавляем к ней метод _pushNotification. Но, вы, конечно, можете вызвать уведомление в любом месте, любым способом. Теперь файл должен выглядеть так, как показано ниже.

import 'package:flutter/material.dart';
import 'package:push_messages/notifications.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final Notifications _notifications =  Notifications();

  @override
  void initState() {
    super.initState();
    this._notifications.initNotifications();
  }

  void _pushNotification() {
    this._notifications.pushNotification();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _pushNotification,
        tooltip: 'Push notifications',
        child: Icon(Icons.add),
      ),
    );
  }
}

6. Показываем уведомления

Запускаем приложение.

Чтобы активировать уведомление, нужно нажать плавающую кнопку FloatingActionButton в правом нижнем углу. Если вы все сделали правильно, появится уведомление. Здесь вы видите логотип своего приложения, а также название пакета, заголовок и некоторый контент.

Локальное push уведомление
Локальное push уведомление

Теперь вы можете реализовать уведомления в своих приложениях выполнив несколько простых шагов.

Посмотрите обязательно документацию на пакет flutter_local_notifications - он умеет планировать уведомления по расписанию и многое чего еще.

Комментарии