How To Use The Flutter Badge Widget

Introduction Link to heading

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 Link to heading

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

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 Link to heading

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

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 Link to heading

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.

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 Link to heading

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 Link to heading

How To Use Flutter Image Picker And Firebase Storage Link to heading

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 Link to heading

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 Link to heading

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.