In this guide, we will learn how to implement the Counter Badge in Flutter by using the external package name badges. The counter badge is very necessary for cart buttons, inbox buttons, and orders like UIThe counter badge is very necessary on cart buttons, inbox buttons, and orders like UI. Badges can be created using the Badge() widget.

Properties of Badge Widget

badgeContentcontent of badge. Usually Text or Icon.
badgeColorThe background color of the badge.
childmain widget. By default, it’s below the red badge. Usually IconIconButtonText or button.
elevationShadow of the badge.
gradientGradient color for the badge content.
toAnimateWhether animate badge when badge content changed or not.
positionAllows to set custom position of [badgeContent]. according to [child].
shapethe shape of the badge either square or circle
alignmentAlignment of the whole widget
showBadgeHide or show a badge with animation using the bool flag.
animationTypeCan be one of BadgeAnimationType.slideBadgeAnimationType.scale or 
animationDurationThe duration of badge animation when badge content is changed.


In your pubspec.yaml

  badges: ^2.0.3
import 'package:badges/badges.dart';

Let’s take an example of how we can implement the badge in our flutter application.

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

class BadgeScreen extends StatefulWidget {
  const BadgeScreen({Key? key}) : super(key: key);

  State<BadgeScreen> createState() => _BadgeScreenState();

class _BadgeScreenState extends State<BadgeScreen> {
  int counter = 0;
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Badge in Flutter'),
        centerTitle: true,
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
        child: const Icon(Icons.add),
      body: Column(
        children: [
            child: Badge(
                badgeColor: Colors.lightBlueAccent,
                borderRadius: BorderRadius.circular(20),
                padding: const EdgeInsets.all(4),
                shape: BadgeShape.square,
                badgeContent: Text(counter.toString()),
                animationType: BadgeAnimationType.slide,
                toAnimate: true,
                child: const Icon(
                  size: 50,

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:

Get the full snippet from here