Flutter: Local Notifications (How to) in iOS and Android — Part 1 — Simple local notification

Flutter How To: Simple | To the point | Short

Flutter Dev Level: Intermediate

Objective

To show simple local notifications in a flutter app.

Step 1: Add the dependency

• Run the following command in your terminal

$ flutter pub add flutter_local_notifications

• Alternatively, you can add this to your pubspec.yaml file under dependencies. Make sure you get the latest from pub.dev.

flutter_local_notifications: ^12.0.2

Step 2: iOS — Modify App Delegate

• Navigate to ios/Runner/AppDelegate.swift
• In the didFinishLaunchingWithOptions method, add the following code

if #available(iOS 10.0, *) {
      UNUserNotificationCenter.current().delegate = self as? UNUserNotificationCenterDelegate
    }

Step 3: LocalNotificationService

• Create a local_notification_service class.

3.1 Add the following import

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

3.2 Define a private FlutterNotificationPluginVariable

final _flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();

3.3 Create a method called setup to initialize the plugin for each platform

Future<void> setup() async {
const androidInitializationSetting = AndroidInitializationSettings('@mipmap/ic_launcher');
const iosInitializationSetting = DarwinInitializationSettings();
const initSettings = InitializationSettings(android: androidSetting, iOS: iosSetting);
await _flutterLocalNotificationsPlugin.initialize(initSettings);
}

Step 4: Call the setup method

• In the main.dart, make a call to setup method that we just defined in the service after ‘ WidgetsFlutterBinding.ensureInitialized(); ’ but before ‘runApp(const MyApp());’

WidgetsFlutterBinding.ensureInitialized();
await localNotificationService.setup();
runApp(const MyApp());

• Run the app and you should see the following message in the image. Click Allow.

Step 5: Write a simple method to show local notifications.

• In LocalNotificationService that we previously created, add the following method

void showLocalNotification(String title, String body) {
const androidNotificationDetail = AndroidNotificationDetails(
'0', // channel Id
'general' // channel Name
);
const iosNotificatonDetail = DarwinNotificationDetails();
const notificationDetails = NotificationDetails(
  iOS: iosNotificatonDetail,
  android: androidNotificationDetail,
);
_flutterLocalNotificationsPlugin.show(0, title, body, notificationDetails);
}

• The androidNotificationDetail and iOSNotification detail contain settings such as enabling/disabling badge, sound etc.
• Android specifically requires you to define channels to distinguish between various notifications.
• Pass on this setting along with id(0 in our example), title and body to show the method of FlutterLocalNotification.
• Id is used to identify a notification just in case we want to cancel. Cancelling notifications will be covered in later publications.

Step 6: Call the show local notification method

• Call the method from a desirable place. In this example, I am calling it from the onPressed of ElevatedButton.

_localNotificationService.showLocalNotification(
  'Yay you did it!',
  'Congrats on your first local notification',
);

That’s all for this one. Coming soon Part 2: Scheduled local notifications.

You can find me on
You can find me on

LinkedIn — https://www.linkedin.com/in/knowabdur
Twitter: — https://twitter.com/AbdurDeveloper