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

Программирование

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

Начните рассылать push-уведомления своим пользователям простым способом

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

Примечание; статья посвящена Flutter с Android

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

Я создал новый проект сflutter create push_messages. В сгенерированномpubspec.yaml вы можете добавить следующий пакет под dependencies;

dependencies:
  flutter_local_notifications: 3.0.0 // latest at time of writing

Затем запустите 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">
   <application
        android:label="push_messages"
        android:icon="@mipmap/ic_launcher">
        <activity
          <!-- other code -->
          android:showWhenLocked="true"
          android:turnScreenOn="true">
          <!-- other code -->
        </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>
      <!-- other code -->
  </application>
</manifest>dasd

Чтобы установить другие разрешения, нам нужно перейти в AndroidManifest внутри папки отладки;

android/app/src/debug/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" />
</manifest>

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

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

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

«Указана полезная нагрузка (« элемент x »), которая будет передана обратно через ваше приложение, когда пользователь нажмет на уведомление» - Документация

selectNotification () - последний метод, он будет срабатывать при выборе уведомления.

4. Установить значок

Добавьте app_icon в папку ниже, желательно размером 72x72. Он используется как значок для вашего уведомления;

android/app/src/main/res/drawable/app_icon.png

5. Реализация уведомлений.

В нашем lib/main.dart был сгенерированный код для подсчета каждого нажатия floatingActionButton. Снимаем все, что связано со счетом. Как только это будет сделано, мы добавим следующие строки чуть ниже класса _MyHomePageState;

final Notifications _notifications =  Notifications();
@override
  void initState() {
    super.initState();
    this._notifications.initNotifications(); // initialise notification
  }
void _pushNotification() {
    this._notifications.pushNotification(); // display notification
  }

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

6. Отображение уведомлений

Запустите свой эмулятор или устройство, а затем выполните следующую команду;

flutter run

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

Заключение

Молодец, вы только что самостоятельно отправили push-уведомления. Теперь вы можете реализовать их в своем собственном проекте, выполнив несколько простых шагов. Посмотрите, что возможно с пакетом flutter_local_notifications. Вы также можете запланировать уведомления.

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

Программирование