Badge Counter In Flutter :
Badge Counter In Flutter : Today We Will Discuss About how to create Budge counter in flutter.this flutter tutorial is very important.
First add the Dependency In Your Pubspec.yaml
dependencies: badges: ^1.0.0
In This Example i am not showing the pubspec.yaml file because it is pretty simple to add the dependency.
some options are available to control the badge counter in flutter the list of the options are given below
Widget BadgeContent : the content of badge.that is usually text or icon
Color badgeColor : to set the background color Badge Counter
Widget child : The main widget. By default it’s below the red badge. Usually Icon
, IconButton
, Text
or button.
double elevetion : to Set the Shadow of the badge
bool toAnimate : Whether animate badge when badge content changed or not.
BadgePosition : Can be one of BadgePosition.topLeft()
, BadgePosition.topRight()
, BadgePosition.bottomLeft()
, BadgePosition.bottomRight()
. Sometimes you want to create unique badge position or create new one manually.
EdgeInsets padding : to set the padding of badge content
Duration animationDuration : The duration of badge animation when badge content is changed.
BadgeAnimationType : Can be one of BadgeAnimationType.slide
, BadgeAnimationType.scale
or BadgeAnimationType.fade
.

import 'package:flutter/material.dart'; class IconBadge extends StatefulWidget { final IconData icon; final double size; IconBadge({Key key, @required this.icon, @required this.size}) : super(key: key); @override _IconBadgeState createState() => _IconBadgeState(); } class _IconBadgeState extends State<IconBadge> { @override Widget build(BuildContext context) { return Stack( children: <Widget>[ Icon( widget.icon, size: widget.size, ), Positioned( right: 0.0, child: Container( padding: EdgeInsets.all(1), decoration: BoxDecoration( color: Colors.red, borderRadius: BorderRadius.circular(6), ), constraints: BoxConstraints( minWidth: 13, minHeight: 13, ), child: Padding( padding: EdgeInsets.only(top: 1), child:Text( "3", style: TextStyle( color: Colors.white, fontSize: 8, ), textAlign: TextAlign.center, ), ), ), ), ], ); } }
The flutter tutorial is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application
For more information about Flutter. visit www.fluttertutorial.in