Lecture10.md

Snackbar and Notifications in Flutter

1. SnackBar
Snackbars are used to provide information to the user.

It is always recommended to keep your code clean and tidy by putting them in appropriate files, however, for this lecture, all the code is placed in a single main.dart file. Please note that the code below is only for the ContentArea class, the object of which is called in the MyHomePage class not provided here but similar to what we do in each class.

class ContentArea extends StatelessWidget {
 	 @override
	  Widget build(BuildContext context) {
	    return Center(
	      child: ElevatedButton.icon(
	          onPressed: () {
	            ScaffoldMessenger.of(context).showSnackBar(
	                SnackBar(content: Text("This is a simple Snackbar")));
	          },
	          icon: Icon(Icons.notification_add),
	          label: Text("Click to see a snackbar")),
	    );
	  }
}

2. Snackbar Actions
Actions can be added to Snackbar using SnackBarActions. Please note that the code below is only for the ContentArea class, the object of which is called in the MyHomePage class not provided here but similar to what we do in each class.

class ContentArea extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	   return Center(
	     child: ElevatedButton.icon(
	         onPressed: () {
	           ScaffoldMessenger.of(context).showSnackBar(SnackBar(
	               action: SnackBarAction(
	                 label: "Dismiss",
	                 onPressed: () => _showDialog(context),
	               ),
	               content: Text("This is a simple Snackbar")));
	         },
	         icon: Icon(Icons.notification_add),
	         label: Text("Click to see a snackbar")),
	   );
}

	_showDialog(BuildContext context) { 
	   return showDialog(
	       context: context,
	       builder: (BuildContext context) => AlertDialog(
	             title: Text("Snackbar Dialog"),
	             content: Text("This dialog was generated by a snackbar"),
	             actions: [
	               TextButton(
	                   onPressed: () {
	                     Navigator.pop(context);
	                   },
	                   child: Text("OK"))
	             ],
	            ));
	  }
	}

3.Notifications
Flutter does not support native notifications. A package can be used for this purpose. Add the following line to pubspec.yaml:
flutter_local_notifications:
A separate class is created for this notification

import 'package:flutter_local_notifications/flutter_local_notifications.dart';
	import 'package:flutter/material.dart';

	class SimpleNotification {
	  BuildContext context;
	  late FlutterLocalNotificationsPlugin notification;

	  SimpleNotification(this.context) {
	    initNotification();
	  }

	  //initialize notification
	  initNotification() {
	    notification = FlutterLocalNotificationsPlugin();
	    AndroidInitializationSettings androidInitializationSettings =
	        AndroidInitializationSettings('@mipmap/ic_launcher');
	    IOSInitializationSettings iOSInitializationSettings =
	        IOSInitializationSettings();

	    InitializationSettings initializationSettings = InitializationSettings(
	        android: androidInitializationSettings, iOS: iOSInitializationSettings);

	    notification.initialize(initializationSettings,
	        onSelectNotification: selectNotification);
	  }

	  Future<String?> selectNotification(String? payload) async {
	    await showDialog(
	        context: context,
	        builder: (BuildContext context) => AlertDialog(
	              title: Text("Notification Clicked"),
	              content: Text("You clicked the notification."),
	            ));
	  }

	  Future showNotification() async {
	    var android = AndroidNotificationDetails(
	        "channelId", "channelName", "This is a simple notification",
	        priority: Priority.high, importance: Importance.max);
	    var platformDetails = NotificationDetails(android: android);
	    await notification.show(100, "Simple Notification",
	        "This is a simple notification", platformDetails,
	        payload: "a demo payload");
	  }
	}

Below is the ScaffoldBodyContent class:

class ScaffoldBodyContent extends StatelessWidget {
	  @override
	  Widget build(BuildContext context) {
	    return Center(
	        child: ElevatedButton(
	      onPressed: () {
	        SimpleNotification(context).showNotification();
	      },
	      child: Text("Simple Notification"),
	    ));
	  }
	}

4.Scheduled Notifications
We did not get a chance to do this scheduled notification in class, but here it is for you to try.

In order to schedule notifications, add following line to manifest file in android

<receiver android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationReceiver" />

Add following two packages

import 'package:timezone/data/latest.dart' as tz;
import 'package:timezone/timezone.dart' as tz;

Initialize the timezone

tz.initializeTimeZones();

Finally add the following function to above class

Future showScheduledNotification() async {
	    var android = AndroidNotificationDetails(
	        "channelId", "channelName", "This is a simple notification",
	        priority: Priority.high, importance: Importance.max);
	    var platformDetails = NotificationDetails(android: android);
	    await notification.zonedSchedule(
	        101,
	        "Scheduled Notification",
	        "This is a sample scheduled notification",
	        tz.TZDateTime.from(DateTime.now(), tz.local)
	            .add(const Duration(seconds: 5)),
	        platformDetails,
	        uiLocalNotificationDateInterpretation:
	            UILocalNotificationDateInterpretation.absoluteTime,
	        androidAllowWhileIdle: true);
	  }