Flutter Badges Plugin | Alternative to Flutter Chip?

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.

import ‘package:badges/badges.dart’;

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.

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:badges/badges.dart';

void main() => runApp(BadgesApp());

class BadgesApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'APP',
home: BadgesWidget(),
);
}
}

class BadgesWidget extends StatefulWidget {
BadgesWidget({Key key}) : super(key: key);

@override
_BadgesWidgetState createState() => _BadgesWidgetState();
}

class _BadgesWidgetState extends State {

int value = 0;

@override
void initState() {
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title:Text("Sample Badges")),
body: Center(
child: Container(
padding: EdgeInsets.all(25.0),
child: Column(
children: [
Spacer(),
Badge(
child: RaisedButton(
color: Colors.blueGrey,
child: Text("Notifications", style: TextStyle(color: Colors.white),),
onPressed: (){
setState(() {
value = value + 1;
});
},),
badgeContent: Text('$value',style: TextStyle(color: Colors.white),),
badgeColor: Colors.red,
animationType: BadgeAnimationType.scale,
animationDuration: Duration(milliseconds: 500),
shape: BadgeShape.circle,
),
Spacer(),
Badge(
child: RaisedButton(
color: Colors.blueGrey,
child: Text("Messages", style: TextStyle(color: Colors.white),),
onPressed: (){

},),
badgeContent: Text("2",style: TextStyle(color: Colors.white),),
badgeColor: Colors.red,
animationType: BadgeAnimationType.scale,
animationDuration: Duration(seconds: 1),
shape: BadgeShape.circle,
),
Spacer(),
Badge(
child: RaisedButton(
color: Colors.blueGrey,
child: Text("Notifications", style: TextStyle(color: Colors.white),),
onPressed: (){
},),
badgeContent: Text("2",style: TextStyle(color: Colors.white),),
badgeColor: Colors.red,
animationType: BadgeAnimationType.scale,
animationDuration: Duration(seconds: 1),
shape: BadgeShape.circle,
),
Spacer(flex: 4,)
],
),
),
)
);
}
}
Flutter Badges app
Flutter Badges app

Conclusion

The main use of this article is to decide if the Badges can be an alternative to Flutter Chip. It is really important to create Badges were required rather than overusing it.

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”

Leave a Comment

Your email address will not be published. Required fields are marked *