badges 1.1.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 99

Badges for Flutter #

pub package

Installing: #

In your pubspec.yaml

  badges: ^1.1.0
import 'package:badges/badges.dart';

Basic Usage: #

      badgeContent: Text('3'),
      child: Icon(Icons.settings),

Animations: #


Chips: #

Sometimes you may want to use chip but it's too big, even if set padding to zero. This is where Badge comes handy.

      backgroundColor: Colors.deepPurple,
      padding: EdgeInsets.all(0),
      label: Text('BADGE', style: TextStyle(color: Colors.white)),
      badgeColor: Colors.deepPurple,
      shape: BadgeShape.square,
      borderRadius: 20,
      toAnimate: false,
          Text('BADGE', style: TextStyle(color: Colors.white)),

Custom Usage #

There are several options that allow for more control:

Widget badgeContentThe content of badge. Usually Text or Icon.
Color badgeColorBackground color of the badge.
Widget childThe main widget. By default it's below the red badge. Usually Icon, IconButton, Text or button.
double elevationShadow of the badge.
bool toAnimateWhether animate badge when badge content changed or not.
BadgePosition positionCan be one of BadgePosition.topLeft(), BadgePosition.topRight(), BadgePosition.bottomLeft(), BadgePosition.bottomRight(). Sometimes you want to create unique badge position or create new one manually. For this use BadgePosition.topRight(top: -12, right: -20) or BadgePosition.(left, top, right, bottom).
BadgeShape or BadgeShape.square. You can use borderRadius to change border radius of badge of you use square BadgeShape.square.
double borderRadiusBorder radius of badge. Applies only if BadgeShape.square is used.
EdgeInsets paddingThe padding of badge content.
Duration animationDurationThe duration of badge animation when badge content is changed.
BadgeAnimationType animationTypeCan be one of BadgeAnimationType.slide, BadgeAnimationType.scale or BadgeAnimationType.fade.
bool showBadgeHide or show badge with animation using bool flag.

License #

This project is licensed under the Apache License 2.0 - see the LICENSE file for details

[1.1.0] - [July 2, 2019]

  • Added showBadge parameter to hide or show badge with animation

[1.0.3] - [June 5, 2019]

  • Fixed a bug when all the badges on the screen are animated if one of them is updated. Fixed only for badges that have Text or Icon in badge content.

[1.0.2] - [June 5, 2019]

  • Updated versions in readme.

[1.0.1] - [June 4, 2019]

  • Updated readme images and lib description.

[1.0.0] - [June 4, 2019]

  • Badge class for creating badges for every widget.


example #

A new Flutter project.

Getting Started #

For help getting started with Flutter, view our online documentation.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  badges: ^1.1.0

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:badges/badges.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Dec 7, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.6.1
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.6


Detected platforms: Flutter

References Flutter, and has no conflicting libraries.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.2.2 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
pedantic ^1.5.0