Flutter Badge Widget - An Additional Marker with any Widget

Flutter Badge Widget - An Additional Marker with any Widget

What is Flutter Badge?

It is a Flutter package that helps you to create badges. It could be used for 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 will in the shopping cart then it will help you create an additional marker to your widget that will show a number of items added by users in your shopping app card.

Why GFBadge Widget for Flutter Badge?

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 as Notification Badge.

Number & Dot Notification Badge

For example, Badges shows the number or 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 call to action & perform the action.

Now check out how our GetWidget 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 :

Badge with Buttons : Badges are used within a Button component.

Badge with Buttons

Flutter App Icon Badge: Badges are used with an Icon Component.

Badge with Icons

A set of attributes, parameters, properties has been set for the Badge component to use the Badge according to need, for example :

IconButton Badge Size

IconButton Badge Type

IconButton Badge Shape

The customization of GF Button is very easy based upon our need.

GF Badge- A flutter Badge widget

Getting Start

Getting started will guide you how to start building a beautiful flutter application with GetWidget UI library. You have to install the package from pub.dev, import the package in your Flutter project.

Install Package from pub.dev :


Import full package:

import 'package:getwidget/getwidget.dart';

Note: dependencies: getwidget: ^2.0.3

Keep playing with the pre-built UI components.

Example to add a Badge with Button:

  onPressed: () {},
  text: 'primary',
  icon: GFBadge(
    child: Text("6"),
GF Badge- A Flutter Badge widget

About Our team:

We have been working on Flutter since Flutter launched in beta version in 2017. And our team have been putting hundred and hundreds of hour to experiment and implementation of Flutter. AS well as After successful deliver enterprise and SAAS application that been using by more than 500+ business 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 trying to give a small contribution to the Flutter Dev Community.

We are heartily thankful to 600+ and counting user who have been using our library and shown the trust just within 1 week of launch. We are getting feedbacks from them & implementing wherever needed & of course it is our pleasure to get the valuable feedback from your side and work on that. The developer's feedback & suggestions are very important, we are keeping this at high priority.

We have a separate team who are working on your feedback. There are many ways through which we are interacting with users, developers & take their suggestions as it is very important to walk along with developers because they are the one who uses GetWidget library & our perspective is to make the development process easiest & simplest for them. We have been trying to provide the best UI Library Flutter Dev Community that helps them to built an awesome app and save their development time.

So let's connect together and build your idea into a real time app with GetWidget UI Library. Now you could start with our documentation from how to getting start and go with each component.


Q. Do we use Flutter App Icon Badge using this Library Widget?

Ans: Yes, You can use Icon Badge in your Flutter app using this widget component. Check out more details about how to use Icon badge in your app with GetWidget Badge Widget: GetWidget Icon Badge

Q. Do we use this Widget in flutter notification icon?

Ans: Yes, You can use use this Widget component in flutter notification icon. If you app have a notification icon and you wanted to add an additional marker then this widget will use on that.

Q. Do we use this GFBadge Widget component in Flutter Shopping App?

Ans: Yes, you can use GFBadge in your Flutter shopping app. It will help you built a nice cart notification badge with cart icon. e.g to If you want to show number of items added to user cart with cart icon then this widget will help you. For details check out our documentation or find the link on our resource section.

Q. Do we use as Notification Badge in Flutter?

Ans: Yes, We can use as a Notification Badge widget in our Flutter app. e.g. If you have app have an notification features with additional marker like red dot or something else then this widget component will help to build a nice notification marker in your app.


Badge Docs: https://docs.getwidget.dev/gf-badge

Forum : https://forum.getwidget.dev

GitHub Repository: https://github.com/ionicfirebaseapp/getwidget