Notification badge on floating action button in flutter


I want to add the items to the cart. The cart will be Floating action button and item count I want to show on top of it. Please help me with this.

I want something like this


In case, you don’t want to install any 3rd party package, you can always use the Stack widget to create your own badge.

Basically, while setting the floatingActionButton property of you Scaffold, you can use a Stack widget to build your Badge.

For example:

class BadgeExample extends StatelessWidget {
Widget build(BuildContext context) {
  return Scaffold(
    body: Container(),
    floatingActionButton: Container(
      child: FittedBox(
        child: Stack(
          alignment: Alignment(1.4, -1.5),
          children: [
            FloatingActionButton(  // Your actual Fab
              onPressed: () {},
              child: Icon(Icons.add),
              backgroundColor: Colors.deepOrange,
            Container(             // This is your Badge
              child: Center(
                  // Here you can put whatever content you want inside your Badge
                  child: Text('4', style: TextStyle(color: Colors.white)),
              padding: EdgeInsets.all(8),
              constraints: BoxConstraints(minHeight: 32, minWidth: 32),
              decoration: BoxDecoration( // This controls the shadow
                boxShadow: [
                    spreadRadius: 1,
                    blurRadius: 5,
                borderRadius: BorderRadius.circular(16),
                color:,  // This would be color of the Badge


enter image description here

Answered By – Nisanth Reddy

Answer Checked By – David Goodson (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *