badges 4.0.0

A package for creating badges. Badges can be used for an additional marker for any widget, e.g. show a number of items in a shopping cart.

example/lib/main.dart

import 'package:badges/badges.dart' as badges;
import 'package:example/alarm_app.dart';
import 'package:example/flag_app.dart';
import 'package:example/human_avatar.dart';
import 'package:example/instagram_message.dart';
import 'package:example/instagram_verified_account.dart';
import 'package:example/twitter_verified_account.dart';
import 'package:example/yako_app.dart';
import 'package:material_ui/material_ui.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.light(useMaterial3: true),
      darkTheme: ThemeData.dark(useMaterial3: true),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _cartBadgeAmount = 3;
  late bool _showCartBadge;
  Color color = Colors.red;

  @override
  Widget build(BuildContext context) {
    _showCartBadge = _cartBadgeAmount > 0;

    return DefaultTabController(
      length: 2,
      child: Scaffold(
        backgroundColor: Colors.white,
        bottomNavigationBar: _bottomNavigationBar(),
        appBar: AppBar(
          leading: badges.Badge(
            position: badges.BadgePosition.topEnd(top: 10, end: 10),
            child: IconButton(icon: Icon(Icons.menu), onPressed: () {}),
          ),
          title: Text('Badges Demo'),
          actions: <Widget>[_shoppingCartBadge()],
          bottom: _tabBar(),
        ),
        body: Column(
          children: <Widget>[
            _addRemoveCartButtons(),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 20.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  TwitterVerifiedAccount(),
                  SizedBox(width: 10),
                  InstagramVerifiedAccount(),
                ],
              ),
            ),
            Column(
              children: [
                Padding(
                  padding: const EdgeInsets.only(top: 20),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [AlarmApp(), YakoApp(), FlagApp(), HumanAvatar()],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 36, left: 24, right: 24),
                  child: Column(
                    children: [
                      Align(
                        alignment: Alignment.centerRight,
                        child: InstagramMessage(
                          text:
                              'Dude, that Chamber of Reflection\n'
                              'song is so sick!',
                          emojiReaction: '❤️',
                        ),
                      ),
                      SizedBox(height: 30),
                      Align(
                        alignment: Alignment.centerLeft,
                        child: InstagramMessage(
                          text: 'omg dude, I sent it to you 2 years ago',
                          emojiReaction: '😆',
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _shoppingCartBadge() {
    return badges.Badge(
      position: badges.BadgePosition.topEnd(top: 0, end: 3),
      badgeAnimation: badges.BadgeAnimation.slide(
        // disappearanceFadeAnimationDuration: Duration(milliseconds: 200),
        // curve: Curves.easeInCubic,
      ),
      showBadge: _showCartBadge,
      badgeStyle: badges.BadgeStyle(badgeColor: color),
      badgeContent: Text(
        _cartBadgeAmount.toString(),
        style: TextStyle(color: Colors.white),
      ),
      child: IconButton(icon: Icon(Icons.shopping_cart), onPressed: () {}),
    );
  }

  PreferredSizeWidget _tabBar() {
    return TabBar(
      tabs: [
        Tab(
          icon: badges.Badge(
            badgeStyle: badges.BadgeStyle(badgeColor: Colors.blue),
            position: badges.BadgePosition.topEnd(top: -14),
            badgeContent: Text('3', style: TextStyle(color: Colors.white)),
            child: Icon(Icons.account_balance_wallet, color: Colors.grey[800]),
          ),
        ),
        Tab(
          child: badges.Badge(
            badgeStyle: badges.BadgeStyle(
              shape: badges.BadgeShape.square,
              borderRadius: BorderRadius.circular(5),
              padding: EdgeInsets.all(2),
              badgeGradient: badges.BadgeGradient.linear(
                colors: [Colors.purple, Colors.blue],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
              ),
            ),
            position: badges.BadgePosition.topEnd(top: -12, end: -20),
            badgeContent: Text(
              'NEW',
              style: TextStyle(
                color: Colors.white,
                fontSize: 10,
                fontWeight: FontWeight.bold,
              ),
            ),
            child: Text('music', style: TextStyle(color: Colors.black)),
          ),
        ),
      ],
    );
  }

  Widget _bottomNavigationBar() {
    return BottomNavigationBar(
      showSelectedLabels: false,
      showUnselectedLabels: false,
      items: [
        BottomNavigationBarItem(label: 'Events', icon: Icon(Icons.dashboard)),
        BottomNavigationBarItem(
          label: 'Messages',
          icon: Icon(Icons.notifications),
        ),
        BottomNavigationBarItem(
          label: 'Settings',
          icon: badges.Badge(
            position: badges.BadgePosition.topEnd(),
            badgeStyle: badges.BadgeStyle(padding: EdgeInsets.all(6)),
            badgeContent: Container(
              height: 3,
              width: 3,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.white,
              ),
            ),
            child: Icon(Icons.settings),
          ),
        ),
      ],
    );
  }

  Widget _addRemoveCartButtons() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          ElevatedButton.icon(
            onPressed: () => setState(() {
              _cartBadgeAmount++;
              if (color == Colors.blue) {
                color = Colors.red;
              }
            }),
            icon: Icon(Icons.add),
            label: Text('Add to cart'),
          ),
          ElevatedButton.icon(
            onPressed: _showCartBadge
                ? () => setState(() {
                    _cartBadgeAmount--;
                    color = Colors.blue;
                  })
                : null,
            icon: Icon(Icons.remove),
            label: Text('Remove from cart'),
          ),
        ],
      ),
    );
  }
}