wx_badge 2.0.0

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

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,
    borderAlign: 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.