Notification Center in Flutter

In this blog we will learn about how to use Notification Center in Flutter.

Introduction

Notifications enhance user engagement and provide real-time updates in mobile applications.

They keep users informed about important events, such as new messages, reminders, or system updates.

Apps deliver notifications in different forms, including local alerts, push notifications, or in-app real-time data updates.

You can read more interesting blogs by mobikul .

Why Use Notifications in Flutter?

In Flutter, you would use state management solutions like Provider, Bloc or setState to manage the app’s state.

However, in cases where you need to notify different parts of your app about changes without direct dependencies between them, notifications provide a clean and efficient solution.

For instance, if you have a product list on one screen and a product detail view on another, and you want the “like” status of a product to update in both places, notifications make this process easy to manage.

Setting Up the Project:

Let’s get started with the project setup and see how we can implement the notification center pattern using the notification_center package.

Implementation

Setting Up Your Flutter Project:

Open pubspec.yaml and add the following dependencies under dependencies and dev_dependencies.

• Add Dependencies:

Run the following command to get the packages:

Using Notification Center in the Flutter Application:

Create the Main Product List Page:

In lib/main.dart, create the main page (MainPage) to display a list of products. Each product will include a like status, and the app will update this status by listening to notifications.

Explanation of MainPage:

• We define a list of products, each with a name, id, and isLiked flag.
• The Notification Center add observer method listens for two types of notifications: Product liked and product unliked. When a product’s like status changes, the app updates the UI accordingly.
• The ListView builder renders the product list, and tapping on a product navigates to the ProductDetailsPage.

Create the Product Details Page:

The Product Details page lets users like or unlike a product. When the like status changes, it sends a notification to update the main page.

Create a new file called productDetailsPage.dart in the lib folder:

Explanation of ProductDetailsPage:

• This page receives a product object via route arguments.
• The user can like or unlike the product by pressing a button, which triggers the toggle like status method. This method sends a product liked or product unliked notification using the notification Center postNotification method.
• When the user returns to the main page, the app updates the product’s like status there as well.

Output:

Handling Notifications:

The Notification Center package offers a straightforward way to manage notifications. Here’s how this project handles notifications:

• Adding Observers: NotificationCenter().addObserver is used in the MainPage to listen for notifications about product like/unlike actions.
• Posting Notifications: In the ProductDetailsPage, NotificationCenter().postNotification is used to notify other parts of the app that a product’s status has changed.
• Removing Observers: It’s important to clean up observers when they are no longer needed by calling NotificationCenter().removeObserver .

Conclusion:

The Notification Center package in Flutter streamlines state management by facilitating communication between different screens.

It allows real-time updates, such as liking or unliking products, ensuring consistent data representation. This enhances the user experience by keeping the UI responsive to user actions.

And thanks for reading this blog for related data click here.

For more updates, make sure to keep following Mobikul Blogs to learn more about mobile app development.