Flutter: Take your badge with you !
Badges are generally used to reflect the number of unread push notifications or messages for an app, but you can use them for many other situations.
In this article we will learn how to create a Badge widget that can be used as a parent to other widgets to show little badges on their top right corner.
The following image will help us to understand the composition of the Badge widget :
So we have the Stack widget that allows us to overlap several children in a simple way. In our case the children are the widget that we want to wrap with a badge, and the container that will contain the value of our badge.
We added some properties to the Badge class to give some flexibility when using it.
And now we will use it in our app :
You can customize this widget to add animation when the value of the badge changes or to control more properties of the widget like position, shadow and more.
The full source code is here.
If you want to try it online, copy and past it in the DartPad Flutter editor and click on Run.
Thank you for reading my article. Please, if you like it, share it.
See also :
