[Flutter/dart] Make a notification number badge

Overview

That badge that shows the number of notifications that are often used on many app like LINE. I had to make it with my own app, so I'll show you how to make it.

Method

static Widget NotificationNumberBadge(int num, Color col, [double size]) {
  return Stack(
    alignment: Alignment.center,
    children: [
      Icon(
        Icons.brightness_1,
        color: col,
        size: size,
      ),      
      Text(num.toString()),
    ],
  );
}

Icons.brightness_1 is circular icon. If you put the number of notifications in Text and stack them by the Stack, it's OK. I made it a method with the number of notifications, color, and size as arguments.

Actually, I think that it is often displayed on top of other icons. In that case, do as follows.

Stack(
  overflow: Overflow.visible,
  children: [
    CircleAvatar(
      child: Icon(Icons.person),
    ),
    Positioned(
      top: -8,
      left: 20,
      child: NotificationNumberBadge(1, Colors.red)
    )
  ],
)

Overlay the notification number badge you created earlier with another icon.

Here, "1" is displayed because it is a sample, but in reality, I think that it is necessary to get the number of notifications and change the icon depending on whether it is 0 or more.