DEV Community: Hosam Hasan

Handling Firebase Notifications in Flutter: Practical Tips

Hosam Hasan — Sun, 14 Jan 2024 15:48:06 +0000

I was assigned the task of handling system notifications for medication reminders. The notifications will include two actions: Take and Skip. The notification should function in all app states, including foreground, background, and terminated. Let's begin with these basic requirements and add more as we progress.

This blog will serve as a QA form for the challenges I faced while implementing this functionality.

Tools helped me along the way:

Mockoon - Used as a logging server instead of using print in the console.
Google Dev Playground - Used for obtaining an auth token to use Google APIs for sending notifications.
Hoppscotch - HTTP client used for sending notifications through the Google API.

What libraries should use to achieve this functionality ?

firebase_messaging, flutter_local_notifications and permission_handler .

How to listen to remote notification in all app states ?

1- Ensure that notification permission is configured and granted

// in AndroidManifist.xml add this permession
// <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
Permission.notification.request();

2- Initialize Firebase in the main function.

await Firebase.initializeApp();

3- Configure notification callbacks.

FirebaseMessaging.onBackgroundMessage(_onBackgroundMessage);
FirebaseMessaging.onMessage.listen(_onForegroundMessage);

4- Implement notification callbacks.

@pragma('vm:entry-point')
Future<void> _onBackgroundMessage(RemoteMessage message) async {}

void _onForegroundMessage(RemoteMessage message) {}

_onBackgroundMessage: Triggered when the app receives a remote notification in the background and terminated.
_onForegroundMessage: Triggered when the app receives a remote notification in the foreground.

Don't forget @pragma('vm:entry-point') for the background callback to work properly. Now we can show notifications with actions in all states.

Hint: Sometimes, FirebaseMessaging callbacks don't work properly without calling FirebaseMessaging.instance.getToken() first.

How to add actions to remote notifications ?

We can't add actions to notification directly using firebase_messaging package only, we need to use flutter_local_notifications to implement this functionally

1- Initialize and configure flutter_local_notifications.

// call this function in main
Future<void> configLocalNotification() async {
  await FlutterLocalNotificationsPlugin().initialize(
    const InitializationSettings(
      android: AndroidInitializationSettings('@mipmap/ic_launcher'),
    ),
    onDidReceiveNotificationResponse: _onForegroundNotificationResponse,
    onDidReceiveBackgroundNotificationResponse: _onBackgroundNotificationResponse,
  );
}

2- Implement action callbacks.

void _onForegroundNotificationResponse(NotificationResponse details) {}

@pragma('vm:entry-point')
void _onBackgroundNotificationResponse(NotificationResponse details) {}

_onForegroundNotificationResponse: Triggered when the app receives a notification action in the foreground.
_onBackgroundNotificationResponse: Triggered when the app receives a notification action in the background and terminated. Don't forget @pragma('vm:entry-point') for background callback to work properly. Now we can show notification with actions in all states.

3- Receive silent remote notifications or data-only notifications from the backend and then show local notifications with actions once the device receives remote notifications.

{
    "message": {
        "token": "",
        "android": {
            "priority": "HIGH"
        },
        "data": {
            "title": "string",
            "body": "string"
        }
    }
}

4- Show local notifications with actions on _onBackgroundMessage and _onForegroundMessage callbacks using the FlutterLocalNotificationsPlugin.show(...) method.

How to redirect the user to a specific page if the app was opened from a notification tap?

Call FlutterLocalNotificationsPlugin().getNotificationAppLaunchDetails() in the main function to know if the app was opened from a notification or not.

How to bring app to foreground when app receives remote notification on background or terminated state ?

Using android_intent_plus and package_info_plus will help us achieve this feature:

1- Make sure that SYSTEM_ALERT_WINDOW permission is granted

/// <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
// Used to show full app notifcation on lock screen
 Permission.systemAlertWindow.request();

2- use android Intent to open or bring app to foreground

Future<void> _bringAppToForeground() async {
  final package = await PackageInfo.fromPlatform();
  final packageName = package.packageName;
  final intent = AndroidIntent(
    action: 'android.intent.action.MAIN',
    flags: [Flag.FLAG_ACTIVITY_NEW_TASK],
    category: 'android.intent.category.LAUNCHER',
    arguments: {'args': 'run flutter app automatically from notification'},
    package: packageName,
    componentName: '$packageName.MainActivity',
  );
  return intent.launch();
}

we need to check arguments on app start to check if app was opened automatically from background
Also if we need to bring app to foreground when screen in locked we need to add USE_FULL_SCREEN_INTENT permission to manifest, and config main activity

<uses-permission android:name="android.permission.USE_FULL_SCREEN_INTENT" />

<!-- add this keys to activity -->
<activity
    ...
    android:showWhenLocked="true"
    android:turnScreenOn="true">
</activity>

To check if app was launched using the android Intent we need to check launch arguments using launch_args or receive_intent package or simply implement native android function and call it using method channel and call it in main function

private fun getIntentArgs(): Map<String,Any?>?{
     val args = intent.extras
     val map = mutableMapOf<String,Any?>();
     args?.keySet()?.forEach{
         map[it] = args[it]
     }
     return  if(args == null) null else map
}

const _methodChannel = MethodChannel('channel_name');
Future<Map<String, dynamic>?> getIntentArgs() async {
  final argsResult = await _methodChannel.invokeMapMethod('getIntentArgs');
  final args = argsResult?.cast<String, dynamic>();
  return args;
}

How to close app once user responds to notification if app was opened from notification ?

Using the flutter_exit_app package to close the app completely whenever we want.

How to Display App-Specific UI when Receiving Notifications in Foreground or Background?

While reacting to notification events in the foreground has no challenges since all listeners are registered in the main isolate, the complexity arises when dealing with background events. To address this, a communication mechanism between the main isolate and other isolates becomes essential.

The IsolateNameServer API comes to our rescue in establishing straightforward isolate communication. We achieve this by registering the UIIsolateCommunicationChannel in the main thread using the forceRegister method. Additionally, the listen function facilitates the reception of data through this channel, making use of the send method to communicate with the UIIsolateCommunicationChannel.

abstract class UIIsolateCommunicationChannel {
  static final _receivePort = ReceivePort();
  static const name = 'ui_isolate';

  static bool register() => IsolateNameServer.registerPortWithName(
        _receivePort.sendPort,
        name,
      );

  static void forceRegister() {
    final isRegistered = IsolateNameServer.registerPortWithName(
      _receivePort.sendPort,
      name,
    );

    if (isRegistered == false) {
      IsolateNameServer.removePortNameMapping(name);
      IsolateNameServer.registerPortWithName(
        _receivePort.sendPort,
        name,
      );
    }
  }

  static StreamSubscription listen(void Function(dynamic) listener) => _receivePort.listen(listener);

  static void send(dynamic value) => IsolateNameServer.lookupPortByName(name)?.send(value);

  static bool unregister() => IsolateNameServer.removePortNameMapping(name);

  static bool isRegistered() => IsolateNameServer.lookupPortByName(name) != null;
}

Hints:

Supported types for communication channel Link.
Also, make sure to use primary constructors from List and Map to pass them through communication channel to work on release mode . issue reference

UIIsolateCommunicationChannel.send((data.toList())) // fails in release mode ❌
UIIsolateCommunicationChannel.send((List.of(data))) //  ✅

Not the End

I hope this small journey has been helpful for you.
Stay tuned for the IOS implementation

Resources:

Pub.dev How to choose the right package

Hosam Hasan — Fri, 26 May 2023 22:24:33 +0000

If you're struggling to choose the right package from Pub.dev's vast library of over 35K packages, this article will guide you through the process.

It's important to remember that once you've added a package to your project, it's your responsibility to keep up with updates and news related to that package. So, choosing the right package is crucial.

Here are the steps to follow:

1. Define Your Problem

Start by defining your problem accurately and specifying your expectations for the package. Be clear about how you want the package to solve your problem.

2. Check Flutter and Dart API Before You Browse Pub.dev

Before diving into Pub.dev, check the Flutter and Dart API. You may find that the solution you need is already available in the SDK.

3. Consider the Platforms You're Supporting

Make sure to read the package documentation carefully, as some features may not work on all platforms, even if the package can be compiled on all platforms.

4. Packages Metrics :

Documentation and Testing
Read the package documentation and check its quality and clarity. Look for examples and check the testing coverage and quality of the tests.
Code Quality
Take a tour inside the code and check the style and quality of the code. Evaluate the complexity and readability of the code and consider how you can contribute to it.
Package History
Check the update history and change logs to see how the package has evolved over time. This can give you an idea of how active the package is and whether it's being actively maintained.
Transitive dependency
Check the transitive dependencies and evaluate how heavy they are in maintenance. This can help you avoid packages with unnecessary dependencies that may add to the complexity of your project.
Community Activity
Check the issues section in GitHub and see how issues are being handled. Also, check the PRs and their acceptance criteria. Look for other community channels on Discord, Telegram, and other platforms to gauge the health of the community.
Popularity
Consider the package's popularity, as indicated by GitHub stars and Pub.dev metrics (likes, Pub Points, and Popularity).

5. Test Before Implementation

it's essential to test it first. Create a proof of concept or a test app to see if the package solves your problem as expected. This will help you avoid potential issues and ensure that the package is the right fit for your project.

In conclusion, choosing the right package from Pub.dev's extensive library can be challenging. By following these steps and considering these metrics, you can make the right choice and find a package that meets your needs and helps you achieve your project goals.

Package Flutter Linux App Into AppImage Part 2

Hosam Hasan — Mon, 05 Jul 2021 19:30:14 +0000

Now, We are ready to build our first Flutter AppImage app 🚀

Firstly , we will change our working directory to the project directory.

$ cd flutter_appimage

Then follow these steps:

1- Create folder AppDir

$ mkdir AppDir

2- Generate the YAML recipe file required to build the AppImage

$ appimage-builder --generate

this command will prompt some questions. Here is the final output :

INFO:Generator:Searching AppDir
? ID [Eg: com.example.app]: com.example.flutter_appimage
? Application Name: Flutter AppImage
? Icon: flutter_appimage_icon
? Executable path relative to AppDir [usr/bin/app]: flutter_appimage
? Arguments [Default: $@]: $@
? Version [Eg: 1.0.0]: latest
? Update Information [Default: guess]: guess
? Architecture: x86_64

Now, you will notice a new file AppImageBuilder.yml added to the root directory of our project.

Wait a second, What the hack this flutter_appimage_icon comes from 🙄🤔

Stop rubbing your head. Here is why :

copy your favorite icon to the root directory and make sure its extension is SVG
rename you icon to flutter_appimage_icon.svg

Now, let's open `AppImageBuilder.yml` and edit some stuff:

add starting script that will delete old AppDir:

  script:
   - rm -rf AppDir | true
   - mkdir AppDir

add after bundling scripts to add the Flutter App to the bandle

  AppDir:
    after_bundle:
    - cp build/linux/x64/release/bundle/flutter_appimage AppDir
    - cp -r build/linux/x64/release/bundle/lib/. AppDir/lib
    - cp -r build/linux/x64/release/bundle/data AppDir
    - cp flutter_appimage_icon.svg AppDir/usr/share/icons/

Add gtk3 required for flutter app also define the repositories where dependencies comes from

    pacman:
      Architecture: x86_64
      repositories:
        core:
          - https://mirror.rackspace.com/archlinux/$repo/os/$arch
        extra:
          - https://mirror.rackspace.com/archlinux/$repo/os/$arch
      include:
        - gtk3
        - python # I don't know why we need but build fails without it  
        - perl # I don't know why we need but build fails without it

Alright, Here is the moment we have been waiting for:

$ appimage-builder --skip-test

🥁🥁🥁🥁🥁🥁🥁🥁🥁🥁🥁🥁🥁🥁🥁🥁🥁🥁🥁.....................Voila 🥳🥳🥳🥳🥳

New file added to the root directory Flutter AppImage-latest-x86_64.AppImage

Flutter Counter App packaged in AppImage.

But wait a second ...... not again 😫.

The bundled AppImage file is about 225 MB , your kidding me 😠.

I know the bundle size needs some optmization , I wil pospone this to part 3.

References :

GitHub :

GitHub - hosamkora/Flutter_AppImage: Sample app for packaging Flutter Linux app into AppImage using AppImage Builder

Package Flutter Linux App Into AppImage Part 1

Hosam Hasan — Mon, 05 Jul 2021 19:27:13 +0000

Flutter is one of the fastest-growing cross-platform UI frameworks with a great and powerful community which has a great part of Flutter success.

Lately, Flutter announced desktop support including Linux which got the attention of big corporates like Canonical (Publisher of Ubuntu), and lately announced that they are rebuilding Ubuntu Desktop Installer using Flutter.

Flutter official docs also have a section on how to build and package Flutter Linux app in Snap (Linux Universal Package Manager) and ship it to Snap Store. here

So it will be interesting if we tried to package Flutter Apps using another universal package manager which is AppImage.

Requirments :

Linux OS (I will use Manjaro)
Flutter with Linux config enabled ( assuming you have latest flutter stable version )
AppImage Tool
AppImage Builder

Install AppImage Tool and AppImage Builder

1- Install required deps

$ sudo pacman -Sy python-pip python-setuptools binutils patchelf desktop-file-utils gdk-pixbuf2 wget fakeroot strace

2 - Install Apimage Tool

$ sudo wget https://github.com/AppImage/AppImageKit/releases/download/continuous/appimagetool-x86_64.AppImage -O /usr/local/bin/appimagetool
$ sudo chmod +x /usr/local/bin/appimagetool

3 - Install AppImage Builder

sudo pip3 install appimage-builder

Create and build Flutter Linux app

1 - install required deps for building flutter linux app

sudo pacman -Sy clang cmake ninja pkgconf gtk3

2 - Enable Flutter linux desktop configuration

$ flutter config --enable-linux-desktop

3 - Create flutter project flutter_appimage

$ flutter create flutter_appimage

3 - Build Linux App

$ (cd flutter_appimage && flutter build linux)