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:
1
2
3
4
dependencies:
flutter:
sdk:flutter
notification_center:^1.0.0# Add the notification_center package
Explain Code
Powered By
Run the following command to get the packages:
1
flutter pub get
Explain Code
Powered By
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.
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.dartin the lib folder:
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 postNotificationmethod.
When the user returns to the main page, the app updates the product’s like status there as well.
Output:
Notification Center in Flutter
Notification Center in Flutter simplifies managing state updates across screens by allowing components to send and listen for notifications, enabling real-time updates like product status changes.
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.
Proficient in Flutter and Dart, developing high-performance Android and iOS apps. Delivers business-focused solutions with intuitive designs and robust functionalities for diverse requirements.
Be the first to comment.