Pub Version GitHub GitHub GitHub

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

Preview

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

Buy Me A Coffee Ko-Fi

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.

Libraries

wx_badge