Notification badge on floating action button in flutter

Issue

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

Solution

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 {
@override
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: [
                  BoxShadow(
                    spreadRadius: 1,
                    blurRadius: 5,
                    color: Colors.black.withAlpha(50))
                ],
                borderRadius: BorderRadius.circular(16),
                color: Colors.blue,  // This would be color of the Badge
              ),
            ),
          ],
        ),
      ),
    ),
  );
}
}

Output

Answered By – Nisanth Reddy

Answer Checked By – David Goodson (FlutterFixes Volunteer)