Skip to main content

Display Counter Badge above an Icon in Flutter

If you’re a Flutter developer, you’re probably familiar with a counter badge. It’s a great way to show a count of something without having to use up valuable space on your screen. But what if you want to show the counter badge above an icon? In this post, we’ll show you how to do just that!

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Row(
            children: const [
              CounterIcon(icon: Icon(Icons.message, color:, size: 36), counter: 12),
              CounterIcon(icon: Icon(Icons.notifications_none_outlined, color:, size: 36), counter: 6),

class CounterIcon extends StatelessWidget {
  final Icon? icon;
  final int? counter;

  const CounterIcon({Key? key, this.icon, this.counter}) : super(key: key);

  Widget build(BuildContext context) {
    return Stack(children: <Widget>[
        right: 0,
        child: Container(
          padding: const EdgeInsets.all(2),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(6),
          constraints: const BoxConstraints(
            minWidth: 16,
            minHeight: 16,
          child: Text(
            style: const TextStyle(
              color: Colors.white,
              fontSize: 10,

By continuing to use the site, you agree to the use of cookies.