Comment afficher le badge du compteur de notifications sur l'icône de l'application dans Flutter

Un badge de compteur de notifications est un indicateur visuel qui affiche le nombre de notifications non lues ou en attente au sein d'une application ou sur son icône d'application. Il s'agit d'une fonctionnalité courante sur les appareils mobiles et les applications de bureau.

Dans ce didacticiel, nous apprendrons comment afficher le badge du compteur de notifications sur l'icône de l'application Flutter. Le nombre de notifications actives sur la barre d'état sera affiché sur l'icône de l'application.

Vous pouvez facilement obtenir cette fonctionnalité avec le package awesome_notifications. Ajoutez ce package à votre projet en ajoutant les lignes suivantes dans le fichier pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  awesome_notifications: ^0.6.19

Maintenant, importez ce package dans votre script :

import 'package:awesome_notifications/awesome_notifications.dart';

Maintenant, initialisez les notifications Awesome dans la méthode main() :

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

Remarque : N'oubliez pas d'ajouter channelShowBadge: true sur NotificationChannel(), afin que le compteur s'affiche sur l'icône de l'application.

Vous pouvez maintenant afficher la notification en utilisant le code suivant :

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"},
    ),
);

Lorsque la notification sera affichée avec ce code, il y aura un compteur sur l'icône de votre application comme ci-dessous :

De cette façon, vous pouvez ajouter un badge de compteur de notifications sur l'icône de l'application dans l'application Flutter.