How To Use The Flutter Badge Widget

Flutter category image

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:

A message icon with an indicator of new messages
A message icon with an indicator of new messages

And this is the code that creates the result above.

Dart
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.

💡 Tip

If you use negative numbers, it will display the entire input. There is no digit limit here!

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:

A Badge widget on a shopping item indicating an upcoming scarcity
A Badge widget on a shopping item indicating an upcoming scarcity

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

Dart
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:

A list of item with a number badge in the bottom right corner. This is also the result of the Badge widget.
A list of item with a number badge in the bottom right corner. This is also the result of the Badge widget.

And the relevant code part is this one here:

Dart
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.


Want More Flutter Content?

Join my bi-weekly newsletter that delivers small Flutter portions right in your inbox. A title, an abstract, a link, and you decide if you want to dive in!

Become A Firebase Expert!

Take a deep dive into Firebase and learn how to really handle their services. This ebook makes you an instant Firebase professional!

Flutter โค๏ธ Firebase

Get started with Firebase and learn how to use it in your Flutter apps. My detailed ebook delivers you everything you need to know! Flutter and Firebase are a perfect match!