badges 3.0.0-beta.1 copy "badges: ^3.0.0-beta.1" to clipboard
badges: ^3.0.0-beta.1 copied to clipboard

A 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.

Pub Version popularity likes building style: flutter lints Package of the week

Installing: #

In your pubspec.yaml

dependencies:
  badges: ^3.0.0-beta
import 'package:badges/badges.dart';

Basic Usage: #

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

Advanced usage #

    Badge(
      position: BadgePosition.topEnd(top: -10, end: -12),
      showBadge: true,
      ignorePointer: false,
      onTap: () {},
      badgeContent:
          Icon(Icons.check, color: Colors.white, size: 10),
      badgeAnimation: BadgeAnimation.rotation(
        animationDuration: Duration(seconds: 1),
        colorChangeAnimationDuration: Duration(seconds: 1),
        loopAnimation: false,
        curve: Curves.fastOutSlowIn,
        colorChangeAnimationCurve: Curves.easeInCubic,
      ),
      badgeStyle: BadgeStyle(
        shape: BadgeShape.square,
        badgeColor: Colors.blue,
        padding: EdgeInsets.all(5),
        borderRadius: BorderRadius.circular(4),
        borderSide: BorderSide(color: Colors.white, width: 2),
        borderGradient: BadgeGradient.linear(
            colors: [Colors.red, Colors.black]),
        badgeGradient: BadgeGradient.linear(
            colors: [Colors.blue, Colors.yellow],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
        ),
        elevation: 0,
      ),
      child: Text('Badge'),
    ),


Animations: #

From left to right:
1) Color change animation 2) BadgeAnimation.slide 3) BadgeAnimation.fade 4) BadgeAnimation.scale 5) BadgeAnimation.size 6) BadgeAnimation.rotation
Also, loop animation is available, this will loop the animation until you stop it.


Shapes: #

From left to right:
1) BadgeShape.circle 2) BadgeShape.square 3) BadgeShape.twitter 4) BadgeShape.instagram


Migration from Badges 2: #

Check out other Yako packages: Settings UI, Status Alert, Full Screen Menu and more to come!

3188
likes
0
pub points
100%
popularity

Publisher

verified publisheryako.io

A 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.

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

flutter

More

Packages that depend on badges