In this blog, we will be going to learn about Badges In Flutter. And check how they can be used inside the Flutter application. In the mobile application whether Android or iOS badges serve different purposes. Like showing cart count on the cart icons, showing message count, showing unread messages in the messenger’s application etcetera.
Before moving further, you can also check our Flutter app development company page.
We will follow the mentioned steps for integrating the Badges In Flutter:
1. Adding badges library in pubspec.yaml file
In this step, we will add the badges library in our Flutter project and then run Pub Get to configure the library.
|
1 |
badges: ^3.1.1 |
We have added the updated version of the library, you can check the compatible version on Flutter pub.dev and use it accordingly
2. Implementing the Badges
After adding the library, we will implement badges in our app. In our demo app, we have added the badges on the cart icons and used buttons for incrementing and decrementing the counts.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Widget createCartBadge() { return badges.Badge( position: badges.BadgePosition.topEnd(top: 0, end: 3), badgeAnimation: const badges.BadgeAnimation.rotation( ), badgeStyle: badges.BadgeStyle( badgeColor: color, ), badgeContent: Text( cartCount.toString(), style: const TextStyle(color: Colors.white), ), child: IconButton(icon: const Icon(Icons.shopping_cart_outlined), onPressed: () { }), ); } |
We have created the method for returning the cart badge widget, we will call this widget from the app bar of the page
|
1 2 3 4 5 6 7 8 9 10 11 |
AppBar( leading: IconButton( icon: const Icon(Icons.keyboard_backspace), onPressed: () {}, ), title: const Text('Badges In Flutter'), actions: <Widget>[ createCartBadge(), ], ) |
3. OutPut
Conclusion:
In this blog, you have learned about the Badges In Flutter.
For more information regarding the same follow the link.
Be the first to comment.