Flutter Badges Plugin | Alternative to Flutter Chip?
Flutter Badges is a plugin that is aimed at giving simple and neater ways to show Badges in a Flutter App. If you are familiar with the Flutter Chip, you can think of this as an add-on version to that.
Even though it cannot do all the thing that a Flutter Chip can do, the Flutter Badges plugin is super useful and can create simple Badge like icons/Buttons, etc with just one Simple Class.
In this article on Flutter plugins, we will see how to create this Badge Plugin and use it in the Application.
The developer of this plugin is – https://github.com/yadaniyil/flutter_badges
Flutter Badges Basics
To use the Flutter Badges plugin, make sure to add the following dependency in your pubspec.yaml file.
dependencies: badges: ^1.1.0
Once done, import the following line into your main.dart file.
Alright, we are good to go. As given below, the Badges can be created with a Simple call to the Badge class.
Badge Class Properties
The following are the available properties of the Badge class.
- badgeContent – The important attribute that takes in the actual value of the Badge. Could be a number, alphabet etc. Make sure to give it as small as possible!
- badgeColor – Can control the Color of the badge by simply adjusting the BadgeColor Colors property.
- animationType – The important attribute that lets 3 animations for the Badge.
- BadgeAnimationType.scale – Scaling animation once the loading happens.
- BadgeAnimationType.fade – Fade animation once the loading happens
- BadgeAnimationType.slide – Slide animation once the loading happens
- shape – Can control the Shape of the Badge. Could be a Circle or Square
- animationDuration – Duration to which the Animation should happen. Takes in a Duration class as its value.
Once all of these attributes are controlled, you can create a simple app like given in the next section.
Flutter Badge – Example Application
Add the following into your main.dart file and run the application. It generates the app that looks like below.
Flutter Chip can create good experience but at the same time be an overkill also. Make sure to drop comments in the section below to know more.
“Learn and Be Curious”