On this edition of the Mobile Minute, we share an efficient way for managing in-app notification badges inside a Flutter app.  Nate will screenshare inside his IDE to demo our method for easily tracking and displaying in-app notification badges.


Will: Hey, this is Will and Nate! Welcome to the Mobile Minute from Dropsource, thanks for joining us. Today we want to show you a cool way for managing notifications inside of a Flutter app.

Will: Recently we’ve been working on a client project that required us to track and display in-app notifications across the application, but we found that keeping these notifications in sync was a bit challenging. But, we think we found an elegant way to accomplish this, and we are pretty sure you’re going to find this useful.

Will: Nate, for today, how about we jump into a screen share so that everyone can follow along as you implement this?

Nate: Great.

Will: Let’s go!

Nate: Hey everybody, thanks for joining. We’re here today to talk about how to display and manage in-app badges when inside of a Flutter application. You’ve probably seen an application like this before, where as notifications come into your app, or as you have things like unread messages, you’ll often times get a banner badge that will show you the count. And so to demo this we built a very lightweight application, that’s really comprised of a scaffold.

Nate: We have our scaffold here, which is just the root of our page. We have an app bar, and we have our bottom navigation bar. Our bottom navigation bar is made up of two bottom navigation bar items, one increment icon and one decrement icon. The increment icon is static, but the decrement is wrapped, as you’ll see here in a StreamBuilder.

Nate: You might be wondering why we’re wrapping that in a StreamBuilder, but essentially a StreamBuilder is a great way to reactively regenerate your UI or one widget in particular based on some data change. So whether this count is coming from a local database, whether it’s coming from an API, or whether it’s just being saved locally or in memory, a StreamBuilder is a great way to be able to send messages to that StreamBuilder, and then re-render the UI.

Nate: As an example, as I click increment here, I’m actually changing the count of the notifications. I can increment that multiple times, or I can go to the decrement tab and decrement that. For that, all we’re doing is we’re just adding new values to our StreamController. And this is a very simplified example, but you can begin to see how if you’re using the provider package from Flutter, or if you’re using Redux, or if you’re using the BLoC Pattern, whatever you’re using, we recommend wrapping these icons in a StreamBuilder, and then setting it up so that you have some stream in your state management pattern that can feed that icon the notification count. Little, simple trick here, but we found this is a very effective way to keep that data in sync throughout your application.

Nate: Lastly, I’ll show you quickly, we built a custom class or a custom widget I’ll say, called BadgeIcon, which I’ll be posting the code in a link in this bio. But basically, it’s just uses the stack widget, it gives it an icon, and it displays a circular badge overtop of that, with the icon that’s positioned in the top right. We can give it a little border radius, and this can be as fully-customizable as you want, to give it the look and feel of your application. But we found this as very straightforward, simple way to display notification badges inside your app.

Will: Thank you, Nate, and we hope that was helpful. If you’re interested in learning more, please check the link in the description to this video. We have a link to our GitHub repository, which has the code for this example app.

Will: On our channel we’re going to be sharing tips, tricks, and best practices for working with Flutter. If you’re interested in this content, please do like and subscribe, we’d love to hear from you. If you have questions about this video or Flutter in general, jump into the comments and we’d love to start a discussion with you or make a future video. Thanks again for joining, and we’ll see you next time on the Mobile Minute.