Start to push notifications locally to your users the easy way

I couldn’t find any simple documentation for push notifications with Flutter, most of it was more complex than it should be. So with this guide, I want to only explain what is necessary.

Note; the article focuses on Flutter with Android

1. Getting started

I created a new project withflutter create push_messages. In the generatedpubspec.yaml you can add the following package under dependencies;

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

Then run flutter pub get, this will install the package.

2. Set permissions

Next, we go to;

android/app/src/main/AndroidManifest.xml

We need to add some code, this needed to show the notification even if your device is locked, and will turn on your screen. Also, we set some code in case you want to schedule notifications in the future. Please add all the following bold code;

<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

To set other permissions we need to go to the AndroidManifest inside the debug folder;

android/app/src/debug/AndroidManifest.xml

There we again add some basic permissions, please add the bold lines;

<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. Creating notifications

Let’s create lib/notifications.dart. Here we have three methods;

• initNotifications() — we need this to initialize the notification settings for Android, iOS, and macOS. For Android, we want to use an icon for our notification. Which we call app_icon(explained in the next section).pushNotification() — we need some general channel details to set, which is needed to set for Android 8.0+. It has a whole variety of options (more than shown). Now finally we are at the part of the notification you want to display;flutterLocalNotificationsPlugin.show(<your-displayed-notification>). Here you specify an id, title, and content of your notification, this all speaks for itself. But there is also payload;

“The payload has been specified (‘item x’), that will passed back through your application when the user has tapped on a notification” — Documentation

• selectNotification ()— is the last method, this will be triggered when the notification is selected.

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 {
    // some action...
  }
}

#flutter #mobile-apps #web-development #programming #developer