Add Badge on a hamburger menu icon in flutter - flutter

Question

Hi Please help I am trying to add a red Badge on a hamburger menu icon in the flutter app like below

Answer 1

You can achieve this with badges plugin here
Add this to your package's pubspec.yaml file under dependencies:
badges: ^2.0.2
then import,
import 'package:badges/badges.dart';
finally add Badge in AppBar,
AppBar(
leading: Badge(
position: BadgePosition.topEnd(top: 10, end: 10),
badgeContent: null,
child: IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
),
),
title: Text('Badge Demo', style: TextStyle(color: Colors.black)),
backgroundColor: Colors.white,
)

Answer 2

Using Stack, similar sample code:
class NotificationIcon extends StatelessWidget {
final bool active;
final double marginTopLeft;
const NotificationIcon({Key key, this.active = true, this.marginTopLeft})
: super(key: key);
#override
Widget build(BuildContext context) {
final color = active ? Colors.white : const Color(0xff40a9ff);
final margin = marginTopLeft ?? 17;
return Container(
width: 24,
height: 24,
child: Stack(
children: [
Center(
child: Icon(
Icons.notifications,
color: color,
),
),
Positioned(
right: margin,
top: margin,
child: Container(
width: 8,
height: 8,
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
shape: BoxShape.circle,
),
child: Center(
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: color,
),
width: 5,
height: 5,
),
),
),
)
],
),
);
}
}

Answer 3

It can be easily done using the Stack widget. I have given an example of how you can use stack to achieve that. Note that you have to use Scaffold.of(yourContext).openDrawer() to open the attached drawer (as I've done here) since the hamburger icon is manually placed there.
import 'package:flutter/material.dart';
void main() {
runApp(Example());
}
class Example extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "Example",
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
leading: InkWell(
splashColor: Colors.lightBlue,
onTap: () => Scaffold.of(context).openDrawer(),
child: Center(
child: Container(
margin: EdgeInsets.only(left: 10),
width: 40,
height: 25,
child: Stack(
children: [
Icon(
Icons.menu,
color: Colors.grey[850],
),
Positioned(
left: 25,
top: 0,
child: Container(
width: 10,
height: 10,
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
child: Center(
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
),
width: 10,
height: 10,
),
),
),
)
],
),
),
),
),
title: Text("Hello"),
actions: [
],
),
body: Center(child: Text("Welcome")),
),
);
}
}

Answer 4

Widget build(BuildContext context) {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
return Scaffold(
key: _scaffoldKey,
drawer: Drawer(),
appBar: AppBar(
backgroundColor: Colors.red,
title: Text(
"Some Text",
style: TextStyle(color: Colors.white),
),
leading: InkWell(
splashColor: Colors.lightBlue,
onTap: () {
_scaffoldKey.currentState.openDrawer();
},
child: Center(
child: Container(
margin: EdgeInsets.only(left: 10),
width: 40,
height: 25,
child: Stack(
children: [
Icon(
Icons.menu,
color: Colors.white,
),
Positioned(
left: 25,
top: 0,
child: Container(
width: 10,
height: 10,
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
child: Center(
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
),
width: 10,
height: 10,
),
),
),
)
],
),
),
),
),
),
body: SafeArea(
child: Container(
),
),
);
}
Please use this. And if you want to show the number as well, you can use Badge too.