How can I add item number on the cart icon on AppBar icon in Flutter

Having a shopping cart icon on the right side of the AppBar on Flutter it’s not that hard, you can use basically a stack widget and inside the stack get IconButton and Positioned widgets.

Here is the code and screenshot

appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(appBarTitle),
        actions: [
          Stack(
            children: [
              IconButton(
                onPressed: () {},
                icon: const Icon(
                  Icons.shopping_cart_rounded,
                  size: 30,
                ),
              ),
              Positioned(
                top: 4,
                right: 6,
                child: Container(
                  height: 22,
                  width: 22,
                  decoration: const BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.purple,
                  ),
                  child: const Center(
                      child: Text(
                    "2",
                    style: TextStyle(
                      fontSize: 12,
                      fontWeight: FontWeight.bold,
                    ),
                  )),
                ),
              ),
            ],
          ),
        ],
      )
Spread the love

Leave a comment