Top Flutter Badge Widgets

A Flutter badge widget is such a component which 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.

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.

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

There are different types of badges on Flutter. So you can use it as you required.

As of now, we are going to list the Top Flutter Badge widget packages here:

1. badges: ^2.0.2

A clean and lightweight badge widget for Flutter, Easy to use without context, Support iOS, Android and Web.

Check out installation and/or implementation guide on pub.dev:

badges | Flutter Package
A flutter package for creating badges. Badges can be used for an additional marker for any widget, e.g. show a number of items in a shopping cart.

Contribute or raise an issue ticket on GitHub:

GitHub – yako-dev/flutter_badges: A flutter package for creating badges.
A flutter package for creating badges. Contribute to yako-dev/flutter_badges development by creating an account on GitHub.

2. getwidget: ^2.0.4

Short Intro: GetWidget is an open source library that comes with pre-build 1000+ UI components. It makes development faster & more enjoyable. You can customize the component as per your need.

Check out installation and/or implementation guide on pub.dev

getwidget | Flutter Package
GetWidget is open source library that come with pre-build 1000+ UI components. It makes development faster & more enjoyable. You can customize the component as per your need.

Contribute or raise an issue ticket on GitHub:

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…

3. flutter_app_badger: ^1.3.0

This plugin helps in changing the badge of the app in the launcher. This supports iOS and some android devices.

Check out installation and/or implementation guide on pub.dev:

flutter_app_badger | Flutter Package
Plugin to update the app badge on the launcher (both for Android and iOS)

Contribute or raise an issue ticket on GitHub:

GitHub – g123k/flutter_app_badger: Support to update the app badge on the launcher (both for Android and iOS)
Support to update the app badge on the launcher (both for Android and iOS) – GitHub – g123k/flutter_app_badger: Support to update the app badge on the launcher (both for Android and iOS)

4. icon_badge: ^1.0.0

These are badges with icons for representing notifications.

Check out installation and/or implementation guide on pub.dev:

icon_badge | Flutter Package
A simple flutter icon widget with notification badge to show number of items.

Contribute or raise an issue ticket on GitHub:

GitHub – Dicksenz/icon_badge: A simple flutter icon with notification badge with number of items.
A simple flutter icon with notification badge with number of items. – GitHub – Dicksenz/icon_badge: A simple flutter icon with notification badge with number of items.

5. bottom_navigation_badge: ^1.0.3

This is simply the the badges with data at the bottom navigation bar items. We mostly use them to display the county.

Check out installation and/or implementation guide on pub.dev:

bottom_navigation_badge | Flutter Package
BottomNavigationBadge is a Flutter widget developed by westdabestdb that allows developers to add notification badges to bottom navigation bar items.

Contribute or raise an issue ticket on GitHub:

GitHub – westdabestdb/bottom_navigation_badge
Contribute to westdabestdb/bottom_navigation_badge development by creating an account on GitHub.

6. rotated_corner_decoration: ^2.0.0

Rotated Corner Decoration plugin is developed to create and implement corner triangle badges. It provides auto rotation of Text spans.

Check out installation and/or implementation guide on pub.dev:

rotated_corner_decoration | Flutter Package
RotatedCornerDecoration package was developed to create and apply corner triangle badges. It provides auto rotation of TextSpans.

Contribute or raise an issue ticket on GitHub:

GitHub – kalaganov/corner_decoration: F Flutter package to create Corner Decorations with rotated TextSpans
F Flutter package to create Corner Decorations with rotated TextSpans – GitHub – kalaganov/corner_decoration: F Flutter package to create Corner Decorations with rotated TextSpans

7. floating_ribbon: ^1.0.1

This simply creates a ribbon like badge over an image or a container.

Check out installation and/or implementation guide on pub.dev:

floating_ribbon | Flutter Package
A new Flutter package for creating floating ribbons on images.

Contribute or raise an issue ticket on GitHub:

GitHub – 101Loop/Floating-Ribbon: A Flutter package providing an easy way to add floating ribbon to images.
A Flutter package providing an easy way to add floating ribbon to images. – GitHub – 101Loop/Floating-Ribbon: A Flutter package providing an easy way to add floating ribbon to images.

8. flavor: ^2.0.0

A flutter plugin for configuring the flavour settings and displays a flavour bade on the app. These flavours are mainly used in app development life cycle example: dev, beta, production, or log settings.

Check out installation and/or implementation guide on pub.dev:

flavor | Flutter Package
An easy way to configure flavor settings and displaying flavor banner.

Contribute or raise an issue ticket on GitHub:

GitHub – stefandevo/flutter-flavor: An easy way to configure flavor settings and displaying flavor banner.
An easy way to configure flavor settings and displaying flavor banner. – GitHub – stefandevo/flutter-flavor: An easy way to configure flavor settings and displaying flavor banner.

We hope this list will help you out. If you have a suggestion to this list then let us know in the comment section and we will add into this list.