Flutter Local Push Notifications Tutorials For Beginners

Flutter Local Push Notifications :

Flutter Local Push Notifications are used to provide user the status of the task running in background i.e., when a user receives a message we can show it in notification bar using the flutter local notifications.

Not only messages but when user battery level, when audio is being played.

And also any system related task can also be displayed using notifications like low storage, file being downloaded and so on.

Notifications helps the app developer to easily notify the user on the new updates / services easily to all the app users and can redirect as well.

When you tap on the notifications you can go through that particular screen and check the new updated data with the help of redirections.

A notification may contain images, links, smileys and related data which makes it attractive.

You may also specify the audio file some times that need to be played on receiving notification.

As you can see in apps like swiggy, zomato where they show images regarding food items in notifications.

Flutter Local Push Notifications Video Tutorial :

Go through the below tutorial for more detailed implementation details.

pubspec.yaml :

Add the dependency flutter local notification to your pubspec file.

dependencies:
  flutter:
    sdk: flutter
  flutter_local_notifications:

main.dart :

Initialize with void main() and declare MyApp() class

void main() => runApp(new MaterialApp(home: new MyApp()));

Declare variable flutter local notification plugin

FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin;

initialize

flutterLocalNotificationsPlugin = new FlutterLocalNotificationsPlugin();

for both android iOS

var android = new AndroidInitializationSettings('@mipmap/ic_launcher');
var iOS = new IOSInitializationSettings();
var initSetttings = new InitializationSettings(android, iOS);

Add the settings to initialize flutterLocalNotificationsPlugin

flutterLocalNotificationsPlugin.initialize(initSetttings,
    onSelectNotification: onSelectNotification);

Declare the statements in initState() where we initialize our flutter local notification.

@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);
}

Specify the channel id, channel name, channel description, priority and also the notifications heading, subheading.

Using a async method we provide these details and wait till notifications is completed.

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 Tutorial', 'Local Notification', platform,
      payload: 'AndroidCoding.in');
}

When you select the notification then display the Dialog with the message

Future onSelectNotification(String payload) {
  debugPrint("payload : $payload");
  showDialog(
    context: context,
    builder: (_) => new AlertDialog(
      title: new Text('Notification'),
      content: new Text('$payload'),
    ),
  );
}

Declare the button to be tapped so that the notification is displayed as we are dealing with local notifications this step is optional as in real time you will trigger on some task completion

new RaisedButton(
  onPressed: showNotification,
  child: new Text(
    'Tap To Get a Notification',
    style: Theme.of(context).textTheme.headline,
  ),
),

FullCode :

Providing the full code for flutter local push notifications integration

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(
            'Tap To Get a Notification',
            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 Tutorial', 'Local Notification', platform,
        payload: 'AndroidCoding.in');
  }
}

Flutter local push notifications output :

This screen below depicts the usage of flutter local push notifications