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('GeeksForGeeks', 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: