Push Notification doesn't appear like Heads-up in Flutter

Question

I want like this. I use FCM for push notifications. Notifications arrive but doesn't appear like heads-up. It only appears on status bar. Am I doing something wrong or do I have to something else?

Answer 1

Did you want to show your app notification in the notification bar if yes you should try this package flutter_local_notifications: ^16.3.0

as you can show on top of image

Answer 2

To create heads-up notifications in Flutter you need awesome_notifications package

---

In your main.dart file:

AwesomeNotifications().initialize(
  // set the icon to null if you want to use the default app icon
  null,
  [
    NotificationChannel(
      channelGroupKey: 'channel_group_key',
      channelKey: 'channel_key',
      channelName: 'channel_name',
      channelDescription: 'channel_description',
      importance: NotificationImportance.Max,
    )
  ],
  debug: true,
);

Android initialization only:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example">

  <uses-permission android:name="android.permission.USE_FULL_SCREEN_INTENT" />
  <application>
    ...
     <activity
       android:name=".MainActivity"
       android:showOnLockScreen="true"
       android:showWhenLocked="true"
       android:turnScreenOn="true">
       ...
     </activity>
   ...
  </application>
</manifest>

Note: On iOS, you need to request for notifications permissions. And on Android 11, you need to request for fullScreenIntent. Here's the code (put it in initState() or whatever):

AwesomeNotifications().isNotificationAllowed().then(
  (isAllowed) {
    //It would be more appropriate if you can show your own dialog
    //to the user before requesting the notifications permissons.
    if (!isAllowed) {
      AwesomeNotifications().requestPermissionToSendNotifications(
        permissions: [
          NotificationPermission.Alert,
          NotificationPermission.Sound,
          NotificationPermission.Badge,
          NotificationPermission.Vibration,
          NotificationPermission.Light,
          NotificationPermission.FullScreenIntent,
        ],
      );
    }
  }
);

And how to create the notification, put it whenever you need to fire the notification:

AwesomeNotifications().createNotification(
  content: NotificationContent(
    id: 10,
    channelKey: 'channel key' //Same as above in initilize,
    title: title,
    body: body,
    wakeUpScreen: true,
    fullScreenIntent: true,
    criticalAlert: true,
    //Other parameters
  ),
);