badge_flutter 1.1.4
badge_flutter: ^1.1.4

Flutter Android iOS web

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.

Badges for Flutter #

Pub Version

Installing: #

In your pubspec.yaml

dependencies:
  badges: ^1.1.4
import 'package:badges/badges.dart';

Basic Usage: #

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


Animations: #

BadgeAnimationType.slideBadgeAnimationType.scaleBadgeAnimationType.fade

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.

    Chip(
      padding: EdgeInsets.all(0),
      backgroundColor: Colors.deepPurple,
      label: Text('BADGE', style: TextStyle(color: Colors.white)),
    ),
    Badge(
      toAnimate: false,
      shape: BadgeShape.square,
      badgeColor: Colors.deepPurple,
      borderRadius: BorderRadius.circular(8),
      badgeContent: Text('BADGE', style: TextStyle(color: Colors.white)),
    ),

Custom Usage #

There are several options that allow for more control:

PropertiesDescription
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.topStart(), BadgePosition.topEnd(), BadgePosition.bottomStart(), BadgePosition.bottomEnd(). Sometimes you want to create unique badge position or create new one manually. For this use BadgePosition.topEnd(top: -12, end: -20) or BadgePosition(start, top, end, bottom).
BadgeShape shapeBadgeShape.circle or BadgeShape.square. You can use borderRadius to change border radius of badge of you use square BadgeShape.square.
BorderRadiusGeometry borderRadiusBorder radius of badge. Applies only if BadgeShape.square is used.
EdgeInsetsGeometry 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.
AlignmentGeometry alignmentAlignment of the whole widget
bool ignorePointerEnable or disable (default) ignore pointer option


License #

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

0
likes
100
pub points
17%
popularity

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.

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

oliveiraisadora119@gmail.com

License

Apache 2.0 (LICENSE)

Dependencies

flutter

More

Packages that depend on badge_flutter