Flutter – Implementing Badges
Badges can be used for various purposes in an application. For example, showing the number of messages, number of items in the cart, etc. In this article, we will see the implementation of badges in Flutter using the badges Flutter package.
Install the library:
In the pubspec.yaml file, add badges library. Then run pub get to configure the dependency.
Or simply run the following command in the terminal of your IDE:
flutter pub add badges
Import Library:
In main.dart import it as :
Dart
import 'package:badges/badges.dart' ; |
Implementation:
Badges can be created using Badge() widget. It includes several properties – badgeContent, badgeColor, child, position, etc. In the below example, we are creating two simple badges.
Dart
Badge( badgeContent: Text( '5' , style: TextStyle(color: Colors.white, fontSize: 30), ), badgeColor: Colors.green, child: Icon(Icons.person, size: 50), ), Badge( elevation: 0, position: BadgePosition.topEnd(), padding: EdgeInsetsDirectional.only(end: 0), badgeColor: Colors.transparent, badgeContent: Icon(Icons.error, size: 27.0, color: Colors.red), child: Text( 'This is RTL' , style: TextStyle(fontSize: 30), ), ), |
Output:
Now, let us take another example, where we will be creating a cart icon, and adding and removing items to it. Initialize _counter in the class to show increment and decrement of items in the cart.
Dart
int _counter = 0; |
Then we create two ElevatedButton.icon() one that adds items to the cart, and the other for removing items. Every time these buttons are pressed we set the new state using setState() method. Now we use Badge() widget and create a cart icon as its child on top of which badge is positioned using position property. We also added slide animation to it using BadgeAnimationType. We pass _counter value as a string in the badgeContent property.
Dart
Badge( position: BadgePosition.topEnd(top: 0, end: 3), animationDuration: Duration(milliseconds: 300), animationType: BadgeAnimationType.slide, badgeContent: Text( _counter.toString(), style: TextStyle(color: Colors.white), ), child: IconButton( icon: Icon(Icons.shopping_cart), onPressed: () { print( "These are items in your cart" ); }), ), Padding( padding: const EdgeInsets.all(8.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ ElevatedButton.icon( onPressed: () { setState(() { _counter++; }); }, icon: Icon(Icons.add), label: Text( 'Add Items' )), ElevatedButton.icon( onPressed: () { if (_counter > 0) { setState(() { _counter--; }); } }, icon: Icon(Icons. remove ), label: Text( 'Remove Items' )), ], ), ), |
Output:
Square Badge with Direction:
We can also customize the shapes of badges. In the below example, we are creating a badge of square shape with gradient colors and added animation to it along with the duration.
Dart
Badge( padding: EdgeInsets.all(6), gradient: LinearGradient(colors: [ Colors.red, Colors.green, ]), badgeContent: Text( '!' , style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20, ), ), shape: BadgeShape.square, borderRadius: BorderRadius.circular(10), toAnimate: true , animationType: BadgeAnimationType.scale, animationDuration: Duration(seconds: 2), position: BadgePosition.topStart(top: -15, start: 80), child: Center( child: Text( 'This is a text' , style: TextStyle(fontSize: 30), ), ), ) |
Output:
Chips using Badge:
We can also create chips using the badges library. But we need to use Chip() widget for it. It includes properties – label, labelStyle, etc. We can customize it as per our requirements. For instance, we can give it shape, backgroundColor, avatar, etc. See the below example for more understanding.
Dart
Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Chip( label: Text( 'Hello' , style: TextStyle(color: Colors.white), ), padding: EdgeInsets.all(0), backgroundColor: Colors.blue), Chip( labelPadding: EdgeInsets.all(20), label: Text( 'Hello' , style: TextStyle(color: Colors.white), ), padding: EdgeInsets.all(0), backgroundColor: Colors.blue), Chip( avatar: Icon(Icons. delete , color: Colors.white), label: Text( 'Hello' , style: TextStyle(color: Colors.white), ), padding: EdgeInsets.all(0), backgroundColor: Colors.blue), Chip( labelStyle: TextStyle(fontSize: 20, letterSpacing: 4), label: Text( 'Hello' , style: TextStyle(color: Colors.white), ), padding: EdgeInsets.all(0), backgroundColor: Colors.blue), ], ) |
Output:
Complete Source Code:
Dart
import 'package:badges/badges.dart' ; import 'package:flutter/cupertino.dart' ; import 'package:flutter/material.dart' ; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false , theme: ThemeData(primarySwatch: Colors.green), home: HomeScreen(), ); } } class HomeScreen extends StatefulWidget { @override _HomeScreenState createState() => _HomeScreenState(); } class _HomeScreenState extends State<HomeScreen> { int _counter = 0; bool showElevatedButtonBadge = true ; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( leading: Badge( position: BadgePosition.topEnd(top: 10, end: 10), badgeContent: null, child: IconButton( icon: const Icon(Icons.menu), onPressed: () {}, ), ), title: const Text( 'w3wiki' , style: TextStyle(color: Colors.white)), backgroundColor: Colors.green, centerTitle: true , ), body: Column( children: <Widget>[ SizedBox( height: 100, ), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Chip( label: Text( 'Hello' , style: TextStyle(color: Colors.white), ), padding: EdgeInsets.all(0), backgroundColor: Colors.blue), Chip( labelPadding: EdgeInsets.all(20), label: Text( 'Hello' , style: TextStyle(color: Colors.white), ), padding: EdgeInsets.all(0), backgroundColor: Colors.blue), Chip( avatar: Icon(Icons. delete , color: Colors.white), label: Text( 'Hello' , style: TextStyle(color: Colors.white), ), padding: EdgeInsets.all(0), backgroundColor: Colors.blue), Chip( labelStyle: TextStyle(fontSize: 20, letterSpacing: 4), label: Text( 'Hello' , style: TextStyle(color: Colors.white), ), padding: EdgeInsets.all(0), backgroundColor: Colors.blue), ], ), ListTile( trailing: Padding( padding: const EdgeInsets.only(left: 20), child: Icon( Icons.arrow_forward_ios, size: 14, color: Colors.black, ), ), title: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Text( "Messages" ), Badge( elevation: 0, shape: BadgeShape.circle, padding: EdgeInsets.all(7), badgeContent: Text( "2" , style: TextStyle(color: Colors.white), ), ), ], ), ), Badge( position: BadgePosition.topEnd(top: 0, end: 3), animationDuration: Duration(milliseconds: 300), animationType: BadgeAnimationType.slide, badgeContent: Text( _counter.toString(), style: TextStyle(color: Colors.white), ), child: IconButton( icon: Icon(Icons.shopping_cart), onPressed: () { print( "These are items in your cart" ); }), ), Padding( padding: const EdgeInsets.all(8.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ ElevatedButton.icon( onPressed: () { setState(() { _counter++; }); }, icon: Icon(Icons.add), label: Text( 'Add Items' )), ElevatedButton.icon( onPressed: () { if (_counter > 0) { setState(() { _counter--; }); } }, icon: Icon(Icons. remove ), label: Text( 'Remove Items' )), ], ), ), SizedBox( height: 20, ), Badge( badgeContent: Text( '5' , style: TextStyle(color: Colors.white, fontSize: 30), ), badgeColor: Colors.green, child: Icon(Icons.person, size: 50), ), SizedBox( height: 50, ), Center( child: Badge( elevation: 0, position: BadgePosition.topEnd(), padding: EdgeInsetsDirectional.only(end: 0), badgeColor: Colors.transparent, badgeContent: Icon(Icons.error, size: 27.0, color: Colors.red), child: Text( 'This is RTL' , style: TextStyle(fontSize: 30), ), ), ), ], ), ); } } |
Output:
Contact Us