Skip to content
Related Articles

Related Articles

Flutter – Implementing Badges

Improve Article
Save Article
  • Last Updated : 31 Jan, 2022
Improve Article
Save Article

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:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!