Flutter Notification Badge Widget
What is Flutter Badge?
It is a Flutter package that helps you to create badges. It could be used as an additional marker for any widgets in your app. For Example: Suppose we have a shopping app and want to show a number of items that will be in the shopping cart then it will help you to create an additional marker to your widget that will show the number of items added by users in your shopping app card.
How to design notification Badge with GFbadge
Badges are such a component that is used to show an additional marker (like a numeric value, red dot, and others) associated with a link or to show some additional information of a component. In today’s world, real-time flow is commonly used in applications with instant real-time notifications inside the app & so here comes the role of Badges. In other terms, it is also referred to as Flutter Notification Badge.
For example, Badges show the number of dots as notifications associated with some icons, texts, images, etc. GetWidget has created a component called GFBadge that includes the Badge value attached with many more components to make the view more clear & attractive for the user. GFBadges are not only used to show a numeric value but as an indicator also in different ways. The Flutter Badges will also function as a call to action & perform the action.
Now check out how our Flutter Badge widget component helps to build an awesome badge in a Flutter App.
GFBadge has a set of different designs to show the Flutter Badges that include:
How to use Flutter badge with Button
Badges are used within a Flutter Button component to show the label of the button and the notification the button has just like the below image.
Flutter Badge with Notification icon
Badges are used with an Icon Component. The badges are placed on top of the icon to show the active number of notifications as shown in the below image.
A set of attributes, parameters, and properties has been set for the Badge component to use the Badge according to need. The following properties are used to make the badge more clean and neat for the user interface.
Also Read - Flutter IntroScreen: Widget to Create Splash Screen or Onboarding Screen
Flutter Icon Button Badge Custom Properties
The size is used to define the badge size like small, medium, or large and even can have the required size according to the user by using the following property.
| Name | Description |
|---|---|
| Description | The GFButtonBadge Size |
| Attribute | size |
| Type | GFSize.large, GFSize.medium, GfSize.small |
| Default | GFSize.medium |
Flutter Icon Button Badge Type Properties
The type defines how the badge should appear on the screen. So to precisely add the type of badge the following property can be used.
| Name | Description |
|---|---|
| Description | The GFButtonBadge Type |
| Attribute | type |
| Type | GFType.solid, GFType.outline, GFType.outline2x, GFType.transparent |
| Default | GFType.solid |
Flutter Icon Button Badge Shape Properties
The shape of the badges can be defined to make the app more attractive to the user and it has the following shapes and can be used by the shape parameter.
| Name | Description |
|---|---|
| Description | The GFButtonBadge Shape |
| Attribute | shape |
| Type | GFButtonShape.standard, GFButtonShape.square, GFButtonShape.pills |
| Default | GFButtonShape.standard |
Flutter Icon Badge Position Properties
The position of the badge can be set to right or left depending upon the requirement and the below property shows the usage.
| Name | Description |
|---|---|
| Description | The GFButtonBadge Position |
| Attribute | position |
| Type | GFPosition.start, GFPosition.end |
| Default | GFPosition.start |
Getting Start
Getting started will guide you on how to start building a beautiful flutter application with the GetWidget UI library. You have to install the package from pub.dev, import the package in your Flutter project.
Install Package from pub.dev :
https://pub.dev/packages/getwidget
Import full package:
import 'package:getwidget/getwidget.dart';
Note: dependencies: getwidget: ^4.0.0
Keep playing with the pre-built UI components.
Flutter Badge with Button Example Code
import 'package:getflutter/getflutter.dart';
GFButtonBadge(
onPressed: () {},
text: 'primary',
icon: GFBadge(
child: Text("6"),
),
),Example of Flutter Icon Button Badge Notification
import 'package:getwidget/getwidget.dart';
GFIconBadge(
child: GFIconButton(
onPressed: (){},
icon: Icon(Icons.ac_unit),
shape: GFIconButtonShape.pills,
),
counterChild: GFBadge(
child: Text("5"),
),
),GF Flutter Badge custom Properties
| Name | Description |
|---|---|
| onPressed | callback i.e, called when the button is tapped |
| onLongPressed | callback i.e, called when the button is long-pressed |
| text | text of type [string] to describe button's label. text will be priority over child |
| icon | icon of type [widget] to describe button's label with icon |
| child | child of type [widget] alternative to text |
| textcolor | the color to use for this button's text when the button is enabled |
| textStyle | defines the styling of the text |
| disabledColor | the fillcolor of the button when the button is disabled |
| disabledTextColor | the color to use for this button's text when the button is disabled |
| borderSide | defines the border side |
| bordershape | defines the shape of the border |
| buttonBoxShadow | if true, default boxShadow appears around button. |
| boxShadow | defines the boxShadow |
| fullWidthButton | if true, defines the full width of the button. |
| blockButton | if true, defines the block button. |
| padding | defines internal padding of the button |
| focusColor | fillColor of the button when it has the input focused |
| hoverColor | fillColor of the button when the pointer is hovered over it |
| splashColor | indicates that the button has been touched |
| highlightColor | indicates that the button is actively being pressed |
Do we use Flutter App Icon Badge using this Library Widget?
Yes, You can use Icon Badge in your Flutter app using this widget component. Check out more details about how to use the Icon badge in your app with GetWidget Badge Widget: Icon Badge
Also Read - How to Choose the Right Flutter App Development Company: A Comprehensive Guide
How to use the badge widget in the flutter notification icon?
Yes, You can use this Widget component in the flutter notification icon. If your app has a notification icon and you wanted to add an additional marker then this widget will use it on that.
getwidget
GitHub Repository: Please do appreciate our work through Github start
Conclusion:
Here we discuss, what Flutter Badge Widget is? And how we can use and implement it into our Flutter app through the GetWidget Badge component. Here, there are options to customize and use other types of Badges.
About Our Team:
We have been working on Flutter since Flutter launched in beta version in 2017. And our team have been putting hundreds and hundreds of hour to experiment and implementation of Flutter. As well as after successful delivery of enterprise and SAAS applications that have been used by more than 500+ businesses around the 119+ countries. Now we are in love with Flutter development and we are very passionate about Flutter development. Now it is something we are trying to give a small contribution to the Flutter Dev Community. We have been trying to provide the best UI Library Flutter Dev Community that helps them to build an awesome app and save their development time.
So let's connect together and build your idea into a real-time flutter app development with GetWidget Flutter UI Library. Now you could start with our documentation from how to getting the start and go with each component.