badges

Creator: coderz1093

Last updated:

Add to Cart

Description:

badges

Installing: #
In your pubspec.yaml
dependencies:
badges: ^3.1.2
copied to clipboard
Attention! In Flutter 3.7 the Badge widget was introduced in the Material library, so to escape the ambiguous imports you need to import the package like this:
import 'package:badges/badges.dart' as badges;
copied to clipboard
and then use the "badges.Badge" widget instead of the "Badge" widget. The same for all the classes from this package.


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


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: #
Badges
Settings UI
Status Alert
Full Screen Menu
Diagonal decoration
Yako Yheme Switch
and more to come!

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Customer Reviews

There are no reviews.