Display Over Other Apps Using Flutter on Android

Question

Is it possible to make enable the "Display Over Other Apps" on an Android Flutter app ?

Will bridging to the native Android API possible to enable this feature on Flutter apps? Can anyone elaborate on this please?

Solution 1

The feature you describe is handled by the application permission

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

Documentation states that this permission

Allows an app to create windows using the type WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY, shown on top of all other apps.

A bit vague explanation isn't it? Lets find out what does TYPE_APPLICATION_OVERLAY means.

Application overlay windows are displayed above all activity windows (types between FIRST_APPLICATION_WINDOW and LAST_APPLICATION_WINDOW) but below critical system windows like the status bar or IME.

Why have I mentioned this two lines?

Well to answer your question we need to understand how to achieve the thing in plain android. And we do know ho it works. The thing is this method only works for android components with UI - activities, services, dialogs(latter two will require some extra work).

What does this mean in connection with Flutter? This means that there are no settings in clean Flutter to enable such a behaviour, only the tools underlying platform offers.

In context of android using this permission will allow you to use this feature for android UI containers(it needs to be explicitly requested through a permission management screen like this)

if(!Settings.canDrawOverlays(this)){
    // ask for setting 
     Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
     Uri.parse("package:" + getPackageName()));
     startActivityForResult(intent, REQUEST_OVERLAY_PERMISSION);
}

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    if (requestCode == REQUEST_OVERLAY_PERMISSION) {
        if (Settings.canDrawOverlays(this)) {
            // permission granted...
        }else{
            // permission not granted...
        }
    }
}

And I am not sure there is a Flutter analog yet.

Exploring further it turns out that the Flutter renders itself in special android containers FlutterActivity and FlutterFragment.

For these two you are able to force intended behaviour with relevant permission. The whole flutter UI will have possibility to be drawn as overlay. But if you want only some parts of your flutter UI to be draws as overlays, for example some flutter dialogs or parts of navigation route - you will not be able to achieve it that easily(only be creating a separate Android native UI containers and channeling your flutter UI there - AFAIK it is not recommended because having multiple flutter UI containers may cause problems)

Solution 2

There already is a plugin available that claims to "show Truecaller like overlay window over all other apps along with callback events",

Please checkout the plugin system_alert_window URL: https://pub.flutter-io.cn/packages/system_alert_window

system_alert_window

A flutter plugin to show Truecaller like overlay window, over all other apps along with callback events. Android Go or Android 11 & above, this plugin shows notification bubble, in other android versions, it shows an overlay window.