wx_badge 3.0.0⧉

Customizable badge widget to show notifications, shopping cart items, and more with ease.

Demo

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.