What is a Badge in Flutter?
A badge in Flutter is a small graphical element that is used to display a numerical value or a status icon. It is often displayed as a small, round shape with a number or an icon in the centre, and it is usually placed in the top-right corner of an app icon or an item in a list.
Badges are used to provide visual notifications to users about important information, such as the number of unread messages, the status of an app, or the progress of a task. They help users quickly understand the status of an app or item, and they can be customized to match the style and design of the app.
In Flutter, you can create badges using the Badge widget, which is part of the Material Design library. To create a badge, you simply need to wrap the widget that you want to display the badge on, and then add the Badge widget as a child. You can customize the badge by specifying the colour, the number or icon that you want to display, and the position of the badge on the widget.
Overall, badges are a useful tool in Flutter that can help you make your app more interactive and user-friendly. By using badges, you can provide important information to users in a clear and concise way, and help them quickly understand the status of your app or items within it.
Other names for Flutter Badge
People often refer to badges using different terms, such as:
- Notification dots or badges – This term is commonly used to describe the small, round icons that appear on app icons or items in a list, indicating that there is new or unread information.
- Status indicators – This term is used to describe badges that provide information about the status of an app or item, such as whether it is active, inactive, or in progress.
- Alerts or notifications – This term is used to describe badges that provide information about new or important events, such as new messages, notifications, or alerts.
- Count bubbles or count badges – This term is used to describe badges that display a numerical value, such as the number of unread messages or the number of items in a list.
- Dot indicators or dot badges – This term is used to describe badges that are small, round, and placed on top of an app icon or item in a list.
These are some of the common names used to describe badges. The exact terminology may vary depending on the context and the platform being used.
Where the Badge widget can be used in Flutter
Badge widgets in Flutter can be used in many different places to enhance the visual appeal of an application. Here is a list of common uses for Badge widgets:
- Notification Badges: These badges are used to indicate the number of unread notifications and can be attached to an IconButton, a FloatingActionButton, or any other widget to show the number of unread notifications. This helps users keep track of any important notifications and ensures that they do not miss any important updates.
- Shopping Cart Badges: These badges are commonly used in e-commerce applications to show the number of items in a shopping cart. They are usually attached to the shopping cart icon and display the total number of items added to the cart. This helps users keep track of their purchases and quickly see the total cost of their cart.
- Profile Picture Badges: These badges are used to show the status of a user in a social network. For example, a green badge can indicate that the user is online. This helps other users quickly see who is available to chat or interact with.
- Point Badges: These badges are used to show the points earned by a user in a game or an application. They can be attached to a user’s profile picture to display the total number of points earned. This helps users keep track of their progress and rewards in an application.
- Progress Badges: These badges are used to show the progress of a task or an application. For example, a badge can show the progress of a task, indicating if it is in progress, complete, or pending. This helps users understand the status of a task or application and keep track of their progress.
- App Icon Badges: Badges can be added to app icons to display notifications or count updates. This helps users quickly see if there are any new updates or notifications for an app, without having to open it.
- Navigational Drawer Badges: Badges can be added to elements within a Navigational Drawer to show the status of an item or to display a count of items. This helps users quickly see important information within the Navigational Drawer, without having to navigate to each individual item.
- Tab Bar Badges: Badges can be added to tabs within a TabBar to show the status of an item or to display a count of items. This helps users quickly see important information within the TabBar, without having to navigate to each individual tab.
- ListTile Badges: Badges can be added to ListTile widgets to display the status of an item or to display a count of items. This helps users quickly see important information within a list, without having to navigate to each individual item.
- Action Buttons Badges: Badges can be added to action buttons such as FloatingActionButton or IconButton to show the status of an item or to display a count of items. This helps users quickly see important information within an action button, without having to navigate to it.
- Avatar Badges: Badges can be added to avatars to display the status of an item or to display a count of items. This helps users quickly see important information within an avatar, without having to navigate to it.
- Card Badges: Badges can be added to cards to display the status of an item or to display a count of items. This helps users quickly see important information within a card, without having to navigate to it.
In each of these examples, the Badge widget can be customized in terms of size, shape, colour, and position to match the specific needs of the application. This makes it a versatile and flexible tool for enhancing the visual appeal of an application, allowing developers to effectively communicate important information to users in a clear and concise manner.
The Badge widget also provides an easy way to increase the visibility of certain elements, making it easier for users to quickly identify what actions or information are available to them. Additionally, the use of badges can add a visually appealing touch to the overall look and feel of an application, making it more attractive and engaging for users.
How to use the built-in Flutter Badge widget
To use the built-in Flutter Badge, you need to wrap the widget that you want to display the badge on, and then add the Badge widget as a child. Here’s an example of how to use the Badge widget:
Container(
padding: EdgeInsets.all(20),
child: const Badge(
label: Text("3"),
child: Icon(Icons.mail),
),
),
In this code example, we first wrap the Icon widget with a Container widget. This is done to ensure that the Badge widget has enough space to display the badge content. Then, we add the Badge widget as a child of the Container widget, and set its label property to a Text widget with the value “3”.
The Badge widget has several other properties that you can use to customize the appearance of the badge, such as the backgroundColor property, which allows you to specify the colour of the badge, and the alignment property, which allows you to specify the position of the badge on the widget.
In this example, the badge will be displayed as a small, round shape with the number “3” in the centre, and it will be placed in the top-right corner of the Icon widget. This is the default behaviour of the Badge widget, and it can be customized to match the style and design of your app.
At the time of writing, I noticed an issue with the badge alignment. This means that the alignment may not work as intended, but it might work for you if the issue is fixed by the developers.
How to Customize the Flutter Badge widget
To customize the Badge widget in Flutter, you can use its various properties to control its appearance and behaviour. Here are a few examples of how to customize the Badge widget:
Container(
padding: EdgeInsets.all(20),
child: Badge(
padding: EdgeInsets.all(4),
backgroundColor: Colors.blue,
alignment: AlignmentDirectional.topStart,
largeSize: 24,
textStyle: TextStyle(fontSize: 14),
textColor: Colors.yellow,
label: Text("32"),
child: Icon(Icons.mail, size: 50,),
isLabelVisible: true,
),
),
padding: This property sets the amount of space around the badge content. In this case, it is set toEdgeInsets.all(20), which means the padding is 20 pixels on all sides.backgroundColor: This property sets the background colour of the badge. In this case, it is set toColors.blue.alignment: This property sets the alignment of the badge within its parent widget. In this case, it is set toAlignmentDirectional.topStart, which aligns the badge to the top-start of its parent.largeSize: This property sets the size of the badge. In this case, it is set to24.textStyle: This property sets the text style for the badge content. In this case, it is set toTextStyle(fontSize: 14), which sets the font size of the text to 14.textColor: This property sets the colour of the text in the badge. In this case, it is set toColors.yellow.label: This property sets the content of the badge. In this case, it is set toText("32"), which displays the text “32” in the badge.child: This property sets the child widget that the badge should wrap. In this case, it is set to anIconwidget with theIcons.mailicon and a size of50.isLabelVisible: This property determines whether the label should be visible. In this case, it is set totrue.
By using these properties, you can customize the Badge widget to fit your needs and create visually appealing badges in your Flutter app.
Flutter Budge widget with the Action Button
The Flutter Badge widget can be used with an action button such as the IconButton or FloatingActionButton to show a notification or count. To use the Badge widget with an action button, you first need to create an instance of the Badge widget and pass it the desired parameters such as size, shape, colour, and position.
Then, you can wrap the action button widget with the Badge widget, for example:
appBar: AppBar(
title: Text('flutterassets.com'),
actions: [
Badge(
alignment: AlignmentDirectional.bottomStart,
label: Text('1'),
child: IconButton(
icon: Icon(Icons.notifications),
onPressed: () {
// handle button press
},
),
)
],
),
In this example, we are using the Badge widget to wrap an IconButton widget. The label parameter is set to a Text widget with the value of “1”. This will display a badge with the number “1” on top of the IconButton widget. The child parameter is set to the IconButton widget.
You can also customize the appearance of the badge by changing the parameters passed to the Badge widget such as the label and child. You can also add padding, change the background colour, and adjust the position of the badge.
It’s that simple! By using the Badge widget with an action button, you can easily show notifications or counts in a visually appealing way.
Flutter Badge widget with an ElevatedButton
The Badge widget can be used with the ElevatedButton widget to display a badge on a button. Here’s an example code that demonstrates this:
Badge(
child: ElevatedButton(
onPressed: () { /* Add your onPress code here */ },
child: Icon(Icons.notifications),
),
label: Text("3"),
isLabelVisible: true,
)
In this code, the Badge widget is used as the parent of the ElevatedButton. The ElevatedButton is used as the child property of the Badge. A label of “3” is added to the Badge using the label property and isLabelVisible is set to true to show the label on the Badge.
Flutter Custom Badge widget with a FloatingActionButton
To create a custom Badge with a FloatingActionButton in Flutter, you can create a custom class that extends the StatelessWidget class and implements the custom design for the Badge. Here’s an example code:
class CustomBadge extends StatelessWidget {
final String? label;
final FloatingActionButton child;
final bool isVisible;
CustomBadge({this.label, required this.child, required this.isVisible});
@override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.topRight,
children: <Widget>[
child,
Visibility(
visible: isVisible,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
),
padding: EdgeInsets.all(5),
child: Text(
label!,
style: TextStyle(
color: Colors.white,
fontSize: 12,
),
),
),
),
],
);
}
}
In this code, a custom Badge is created by extending the StatelessWidget class. The custom Badge takes three parameters: label, child, and isVisible. The child parameter is used to set the FloatingActionButton as the child of the custom Badge. The isVisible parameter is used to control the visibility of the badge. If isVisible is true, the badge will be displayed, and if isVisible is false, the badge will be hidden. The custom Badge is designed using a Stack widget that contains the FloatingActionButton and a Visibility widget for the badge. The badge is designed as a circle shape with a red colour, and the text on the badge is set using the label parameter. The build method returns the custom Badge design.
To use the custom Badge with the FloatingActionButton, simply wrap the FloatingActionButton inside an instance of the CustomBadge class:
floatingActionButton: CustomBadge(
label: "3",
child: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
isVisible: true,
),In this example, the CustomBadge is used to wrap a FloatingActionButton, and the label parameter is set to “3”. The isVisible parameter is set to true to display the badge.
Flutter Custom Badge widget with any Button
To make the custom badge work with any button type, including the FloatingActionButton, we can create a reusable widget that accepts a child parameter. The child parameter can be any button widget, such as FloatingActionButton, ElevatedButton, TextButton, or IconButton. Here’s an example of how to create a custom badge widget that can be used with any button:
class CustomBadge extends StatelessWidget {
final String? label;
final Widget child;
final bool isVisible;
CustomBadge({this.label, required this.child, required this.isVisible});
@override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.topRight,
children: <Widget>[
child,
Visibility(
visible: isVisible,
child: Positioned(
right: 0,
top: 0,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
),
padding: EdgeInsets.all(5),
child: Text(
label!,
style: TextStyle(
color: Colors.white,
fontSize: 12,
),
),
),
),
),
],
);
}
}Here’s an example of how to use the CustomBadge widget with different types of buttons:
Column(
children: [
CustomBadge(
child: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
label: "10",
isVisible: true,
),
CustomBadge(
child: ElevatedButton(
onPressed: () {},
child: Text("Elevated Button"),
),
label: "10",
isVisible: true,
),
CustomBadge(
child: TextButton(
onPressed: () {},
child: Text("Text Button"),
),
label: "10",
isVisible: true,
),
CustomBadge(
child: IconButton(
onPressed: () {},
icon: Icon(Icons.mail),
),
label: "10",
isVisible: true,
)
],
),With this custom badge widget, you can now easily add a badge to any button by simply wrapping it in a CustomBadge widget and providing the necessary parameters.
Flutter Custom Badge widget with any widget
You can also use the above custom badge widget with any other widget, including a Container that contains an image or icon. To use the custom badge with a Container, simply wrap the Container widget with the custom badge widget. For example:
CustomBadge(
child: Container(
width: 50,
height: 50,
child: Icon(
Icons.access_time, size: 40,
),
),
label: "10",
isVisible: true,
),
This will display a custom badge with a label of “32” and a Container containing an image. You can customize the appearance of the badge by modifying the parameters passed to the CustomBadge widget.
Flutter Custom Badge with a list of icons
Here is an example of how to create a Flutter badge for a circled image that displays icons from a list of icons, where the icon in the badge can be changed by changing the ID:
class CircleBadgeWithIcons extends StatelessWidget {
final String imageUrl;
final List<IconData> icons;
final int selectedIcon;
CircleBadgeWithIcons({
this.imageUrl = 'https://picsum.photos/250?image=9',
this.icons = const [Icons.home, Icons.person, Icons.settings],
this.selectedIcon = 0,
});
@override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.topLeft,
children: [
Container(
height: 100,
width: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: NetworkImage(imageUrl),
fit: BoxFit.cover,
),
),
),
Container(
height: 30,
width: 30,
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
child: Icon( selectedIcon >= icons.length
?
icons[icons.length-1]
:
icons[selectedIcon] ,
size: 20,
color: Colors.white,
),
),
],
);
}
}The above widget uses 3 properties, which are imageUrl, icons, and selectedIcon.
The imageUrl is a string property that accepts the URL of an image to be displayed within the badge. By default, the image URL is set to 'https://picsum.photos/250?image=9'.
The icons property is a list of IconData objects representing the icons that can be displayed in the badge. By default, the icons list contains Icons.home, Icons.person, and Icons.settings.
The selectedIcon property is an integer that represents the index of the selected icon in the icons list. By default, the selected icon is set to 0.
In the build method of the widget, a Stack widget is used to align the image and the icon container. The image is displayed in a Container widget with a height and width of 100 and with a circular shape. The icon is displayed in a second Container widget with a height and width of 30 and a circular shape. The colour of the icon container is set to red and the icon is white. The selected icon is displayed by accessing the selectedIcon index in the icons list. If the selectedIcon value is greater than the number of items in the icons list, the last icon in the list is displayed.
CircleBadgeWithIcons(
icons: [
Icons.holiday_village_outlined,
Icons.home_work_outlined,
Icons.home_rounded,
Icons.house_outlined,
Icons.house_siding
],
selectedIcon: 0,
imageUrl: 'https://picsum.photos/250?image=10',
)The code example shows how to use the custom widget in another widget tree by creating an instance of CircleBadgeWithIcons. In this example, the icons list is set to a new list of icons, selectedIcon is set to 0, and imageUrl is set to 'https://picsum.photos/250?image=10'.
