top of page

[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.



Recent Posts

See All

[Flutter/Dart] Format string with TextField

What want to do I want to create an input form using TextField. For example, if the input content is a monetary amount, I would like to display it in 3-digit delimiters with a ¥ prefix. Rather than ha

Comments


Let's do our best with our partner:​ ChatReminder

iphone6.5p2.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Let's do our best with our partner:​ ChatReminder

納品:iPhone6.5①.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Theme diary: Decide the theme and record for each genre

It is a diary application that allows you to post and record with themes and sub-themes for each genre.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png
bottom of page