How to Show Notification Counter Badge on App Icon in Flutter

In this example, we are going to show you how to show the notification counter badge on the app icon of the Flutter App. The number of active notifications on the status bar will be shown on the app icon. See the example below:

You can easily achieve this feature with awesome_notifications package. Add this package to your project by adding the following lines in pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  awesome_notifications: ^0.6.19

You can learn about awesome_notifications on details at How to Show Local Notification in Flutter App

Now, import this package into your script:

import 'package:awesome_notifications/awesome_notifications.dart';

Now initialize Awesome notifications inside main() method:

void main() async {
   WidgetsFlutterBinding.ensureInitialized();

   AwesomeNotifications().initialize(
     'resource://drawable/notification_icon', 
     [            // notification icon 
        NotificationChannel(
            channelGroupKey: 'basic_test',
            channelKey: 'basic',
            channelName: 'Basic notifications',
            channelDescription: 'Notification channel for basic tests',
            channelShowBadge: true, //make it true, to show notifications counter
        ),

     ]
  );
   
  runApp(MyApp()); //run your app.
}

Note: Don't forget to add channelShowBadge: true on NotificationChannel(), so that the counter will be shown on the app icon.

Now you can show the notification using the following code:

AwesomeNotifications().createNotification(
    content: NotificationContent( //simgple notification
        id: 123,
        channelKey: 'basic', //set configuration wuth key "basic"
        title: 'Welcome to FlutterCampus.com',
        body: 'This simple notification with action buttons in Flutter App',
        payload: {"name":"FlutterCampus"},
    ),
);

When the notification will be shown with this code, there will be a counter on your app icon like below: