Flutter Notification Badge Widget

Flutter Badge Widget
Flutter 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.

Flutter Number & Dot Notification Badge
Flutter Number & Dot Notification Badge

For example, Badges shows 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 includes :

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 Buttons
Flutter Badge with Buttons

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.

Flutter Badge with Notification Icons
Flutter Badge with Notification Icons

A set of attributes, parameters, 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.

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.

NameDescription
DescriptionThe GFButtonBadge Size
Attributesize
TypeGFSize.large, GFSize.medium, GfSize.small
DefaultGFSize.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.

NameDescription
DescriptionThe GFButtonBadge Type
Attributetype
TypeGFType.solid, GFType.outline, GFType.outline2x, GFType.transparent
DefaultGFType.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.

NameDescription
DescriptionThe GFButtonBadge Shape
Attributeshape
TypeGFButtonShape.standard, GFButtonShape.square, GFButtonShape.pills
DefaultGFButtonShape.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.

NameDescription
DescriptionThe GFButtonBadge Position
Attributeposition
TypeGFPosition.start, GFPosition.end
DefaultGFPosition.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: ^2.0.4

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"),
  ),
),
Flutter Button Badge example code
Flutter Button Badge example code

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

NameDescription
onPressedcallback i.e, called when the button is tapped
onLongPressedcallback i.e, called when the button is long-pressed
texttext of type [string] to describe button's label. text will be priority over child
iconicon of type [widget] to describe button's label with icon
childchild of type [widget] alternative to text
textcolorthe color to use for this button's text when the button is enabled
textStyledefines the styling of the text
disabledColorthe fillcolor of the button when the button is disabled
disabledTextColorthe color to use for this button's text when the button is disabled
borderSidedefines the border side
bordershapedefines the shape of the border
buttonBoxShadowif true, default boxShadow appears around button.
boxShadowdefines the boxShadow
fullWidthButtonif true, defines the full width of the button.
blockButtonif true, defines the block button.
paddingdefines internal padding of the button
focusColorfillColor of the button when it has the input focused
hoverColorfillColor of the button when the pointer is hovered over it
splashColorindicates that the button has been touched
highlightColorindicates 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

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.

Flutter Get Widget Docs

Flutter GetWidget Docs
Get Widget is one of the largest Flutter open-source UI Kit libraries for mobile or web apps. It has more than 1000+ pre-built reusable widgets.

Flutter Forum: if any Find any questions let's discuss them on Forum.

GetWidget- A Flutter Developer Forum
Flutter largest Open-Source Flutter UI Library with in-built widgets.

GitHub Repository: Please do appreciate our work through Github start

GitHub - ionicfirebaseapp/getwidget: Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app.
Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app. - GitHub - ionicfirebaseapp/getwidget: Most popular and easy to use open source UI library with 1000+ W...

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 app with GetWidget Flutter UI Library. Now you could start with our documentation from how to getting the start and go with each component.