Customizable badge widget to show notifications, shopping cart items, and more with ease.
Usage
To read more about classes and other references used by wx_badge
, see the API Reference.
WxBadge(
hidden: count == 0,
position: WxBadgePosition.topRight,
offset: const Offset(8, -8),
style: WxBadgeStyle.circle(
borderWidth: 2,
borderStyle: BorderStyle.solid,
borderColor: Theme.of(context).colorScheme.surface,
backgroundColor: Colors.red,
padding: const EdgeInsets.all(6),
),
content: Text(
count.toString(),
key: ValueKey(count),
style: const TextStyle(height: 1.15),
),
transition: AnimatedSwitcherTransitions.zoomOut,
child: const WxAvatar(
image: NetworkImage('https://i.pravatar.cc/50?u=2'),
elevation: 3.0,
backgroundColor: Colors.red,
child: Text('Wx'),
),
)
WxBadge(
animated: true,
position: WxBadgePosition.bottomRight,
offset: const Offset(1, 1),
style: WxBadgeStyle.circle(
radius: 5,
borderWidth: 2,
borderStyle: BorderStyle.solid,
borderColor: Theme.of(context).colorScheme.surface,
backgroundColor: online ? Colors.green : Colors.red,
padding: const EdgeInsets.symmetric(
horizontal: 5,
vertical: 2,
),
),
child: const WxAvatar.circle(
image: NetworkImage('https://i.pravatar.cc/50?u=20'),
borderWidth: 2,
borderOffset: 3,
borderStyle: BorderStyle.solid,
borderColor: Colors.blue,
backgroundColor: Colors.red,
child: Text('Wx'),
),
)
Sponsoring
If this package or any other package I created is helping you, please consider to sponsor me so that I can take time to read the issues, fix bugs, merge pull requests and add features to these packages.