How To Use The Flutter Badge Widget

Introduction

Let’s say you have a notification icon and want to display the number of new messages. Or you have a shop with limited items that you want to advertise. Or you have a list and want to put the index number to every item. All those use cases can be accomplished with the Badge widget. All those simple solutions can be implemented within minutes. Here is how to use the Flutter Badge widget.

Notification counter

A notification counter is a typical UI element in many apps. It shows a number next to an icon. In this example I use a message icon so that the counter could indicate the number of new messages, for example. Here is what it could look like:

And this is the code that creates the result above.

IconButton(
  icon: Badge.count(count: 25, child: Icon(Icons.message_rounded)),
  onPressed: () {
    goToMessageCenter();
  },
),

There is an IconButton with its child icon wrapped inside a Badge widget. Since we only want to display a number, the Badge.count() constructor is a reasonable choice. It display all numbers between 1 and 999 but switches to 999+ when you pass a 4-digit number.

A nice and easy solution for a notification counter, isn’t it?

Shop item tag

Your personal shop is going great and people are buying your products. To further encourage them to buy certain products, you want to display hints on the item cards. This could look something like this:

How can you to this with the Badge widget? Simple!

SizedBox(
    height: 200,
    width: 200,
    child: Card(
        child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Badge(
                offset: Offset(-60, 0),
                label: Text("only few left"),
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Spacer(),
                      Center(child: Icon(Icons.computer_rounded)),
                      Spacer(),
                      Text("Mac Book Pro M3 Max"),
                      Text("\\$3599")
                    ])))))

The Badge widget is the parent of the content. Usually it would appear in the top right corner and extend to the right. However, you can correct the position with the Offset property to put it inside the card’s boundaries. The label property accepts any widget, but apart from Text widgets there aren’t many that really make sense here.

Your sales will go through the roof with such a simple adjustment!

List index number

For my current project I needed an item index for list elements in my UI. Maybe the Badge widget is not the first thing that comes to your mind in this case. But it works with very little effort. Here is the result:

And the relevant code part is this one here:

SizedBox(
    width: 200,
    height: 140,
    child: Badge.count(
        alignment: Alignment.bottomRight,
        padding: EdgeInsets.zero,
        offset: Offset(-10, -24),
        count: widget.index + 1,
        child: Card(
            child: 
              Padding(
                  padding:
                      const EdgeInsets.symmetric(horizontal: gapMedium),
                  child: Center(
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Tooltip(
                            message: "Break Time"
                            child: Text("Break Time",
                                style: Theme.of(context)
                                    .textTheme
                                    .headlineSmall,
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis),
                          ),
                          Text("05:00",
                              style:
                                  Theme.of(context).textTheme.displaySmall)
                        ]),
                  ))
            )));

Again, I am using the count() constructor to show a number. Together with the alignment, padding, and offset property, I can place the badge in the exact location where I want it to have.

Short, simple, and functional!

Conclusion

In this article you learned how to use the Flutter Badge widget in different use cases. While you can achieve the same results with other widgets, it’s essential to know the Flutter framework and the tools it offers.

Related articles

How To Use Flutter Image Picker And Firebase Storage

Let’s have a look at how to use Flutter image picker and Firebase storage to save your images in the cloud. Create device-independent apps so that your users can always access their data!

How To Make Rounded Profile Pictures In Flutter

For your Instagram clone or your member app: Here is how to make rounded profile pictures in Flutter. I’ll show you the easy way with CircleAvater and also the “Do it yourself” way with other widgets. Make your app look modern with this guide!

How To Track Your Location In A Flutter App

Here is a deep dive into GPS, permissions, and manifests. Learn how to track your location in a Flutter app. Find out how to collect location data while your app is in the background. There are also tips included to prevent the OS from terminating your app after some time.