system_alert_window 0.3.2+2

Flutter Android iOS

A flutter plugin to show Truecaller like overlay window, over all other apps along with callback events.

system_alert_window #

Pub

A flutter plugin to show Truecaller like overlay window, over all other apps along with callback events.

Android #

Demo #

1. Clip of example app and 2. Working of button click in the background

      

Application Class #

JAVA (Application.java)

  import android.os.Bundle;
  import in.jvapps.system_alert_window.SystemAlertWindowPlugin;
  import io.flutter.app.FlutterApplication;
  import io.flutter.plugin.common.PluginRegistry;
  import io.flutter.plugins.GeneratedPluginRegistrant;

  public class Application extends FlutterApplication implements PluginRegistry.PluginRegistrantCallback {

      @Override
      public void onCreate() {
          super.onCreate();
          //This is required as we are using background channel for dispatching click events
          SystemAlertWindowPlugin.setPluginRegistrant(this);
      }

      @Override
      public void registerWith(PluginRegistry pluginRegistry) {
          GeneratedPluginRegistrant.registerWith(pluginRegistry);
      }

  }

KOTLIN (Application.kt)

  import `in`.jvapps.system_alert_window.SystemAlertWindowPlugin
  import io.flutter.app.FlutterApplication
  import io.flutter.plugin.common.PluginRegistry
  import io.flutter.plugin.common.PluginRegistry.PluginRegistrantCallback
  class Application : FlutterApplication(), PluginRegistrantCallback {
      override fun onCreate() {
          super.onCreate()
          SystemAlertWindowPlugin.setPluginRegistrant(this)
      }

     override fun registerWith(registry: PluginRegistry) {
        SystemAlertWindowPlugin.registerWith(registry.registrarFor("in.jvapps.system_alert_window"));
     }
  }

Manifest #

  //Permissions
  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
  <uses-permission android:name="android.permission.FOREGROUND_SERVICE " />
  <uses-permission android:name="android.permission.WAKE_LOCK" />
      <application
          //Linking the previously added application class
          android:name=".Application"
          android:label="system_alert_window_example"
          android:icon="@mipmap/ic_launcher">

Android 10 and below

Uses 'draw on top' permission and displays it as a overlay window

Android 11 and above

Uses Android Bubble APIs to show the overlay window.

IOS #

Displays as a notification in the notification center [Help Needed]

Example #

Show the overlay #

  SystemWindowHeader header = SystemWindowHeader(
      title: SystemWindowText(text: "Incoming Call", fontSize: 10, textColor: Colors.black45),
      padding: SystemWindowPadding.setSymmetricPadding(12, 12),
      subTitle: SystemWindowText(text: "9898989899", fontSize: 14, fontWeight: FontWeight.BOLD, textColor: Colors.black87),
      decoration: SystemWindowDecoration(startColor: Colors.grey[100]),
      button: SystemWindowButton(text: SystemWindowText(text: "Personal", fontSize: 10, textColor: Colors.black45), tag: "personal_btn"),
      buttonPosition: ButtonPosition.TRAILING);
        );
        
  SystemWindowFooter footer = SystemWindowFooter(
      buttons: [
        SystemWindowButton(
          text: SystemWindowText(text: "Simple button", fontSize: 12, textColor: Color.fromRGBO(250, 139, 97, 1)),
          tag: "simple_button", //useful to identify button click event
          padding: SystemWindowPadding(left: 10, right: 10, bottom: 10, top: 10),
          width: 0,
          height: SystemWindowButton.WRAP_CONTENT,
          decoration: SystemWindowDecoration(
          startColor: Colors.white, endColor: Colors.white, borderWidth: 0, borderRadius: 0.0),
         ),
        SystemWindowButton(
          text: SystemWindowText(text: "Focus button", fontSize: 12, textColor: Colors.white),
          tag: "focus_button",
          width: 0,
          padding: SystemWindowPadding(left: 10, right: 10, bottom: 10, top: 10),
          height: SystemWindowButton.WRAP_CONTENT,
          decoration: SystemWindowDecoration(
          startColor: Color.fromRGBO(250, 139, 97, 1), endColor: Color.fromRGBO(247, 28, 88, 1), borderWidth: 0, borderRadius: 30.0),
         )
      ],
      padding: SystemWindowPadding(left: 16, right: 16, bottom: 12),
      decoration: SystemWindowDecoration(startColor: Colors.white),
      buttonsPosition: ButtonPosition.CENTER);
      
  SystemWindowBody body = SystemWindowBody(
          rows: [
            EachRow(
              columns: [
                EachColumn(
                  text: SystemWindowText(text: "Some body", fontSize: 12, textColor: Colors.black45),
                ),
              ],
              gravity: ContentGravity.CENTER,
            ),
          ],
          padding: SystemWindowPadding(left: 16, right: 16, bottom: 12, top: 12),
        );

  SystemAlertWindow.showSystemWindow(
      height: 230,
      header: header,
      body: body,
      footer: footer,
      margin: SystemWindowMargin(left: 8, right: 8, top: 100, bottom: 0),
      gravity: SystemWindowGravity.TOP);
      

Register for onClick events (button click) #

  SystemAlertWindow.registerOnClickListener(callBackFunction);

  ///
  /// As this callback function is called from background, it should be declared on the parent level
  /// Whenever a button is clicked, this method will be invoked with a tag (As tag is unique for every button, it helps in identifying the button).
  /// You can check for the tag value and perform the relevant action for the button click
  ///
  void callBackFunction(String tag) {
    switch(tag){
      case "simple_button":
        print("Simple button has been clicked");
        break;
      case "focus_button":
        print("Focus button has been clicked");
        break;
      case "personal_btn":
        print("Personal button has been clicked");
        break;
      default:
        print("OnClick event of $tag");
    }
  }
      

Close the overlay #

  SystemAlertWindow.closeSystemWindow();
  

Isolate communication #

Use this snippet, if you want the callbacks on your main thread, instead of handling them in an isolate (like mentioned above)
Create an isolate_manager.dart
import 'dart:isolate';

import 'dart:ui';

class IsolateManager{

  static const FOREGROUND_PORT_NAME = "foreground_port";

  static SendPort lookupPortByName() {
    return IsolateNameServer.lookupPortByName(FOREGROUND_PORT_NAME);
  }

  static bool registerPortWithName(SendPort port) {
    assert(port != null, "'port' cannot be null.");
    removePortNameMapping(FOREGROUND_PORT_NAME);
    return IsolateNameServer.registerPortWithName(port, FOREGROUND_PORT_NAME);
  }

  static bool removePortNameMapping(String name) {
    assert(name != null, "'name' cannot be null.");
    return IsolateNameServer.removePortNameMapping(name);
  }

}
While initializing system alert window in your code
    await SystemAlertWindow.checkPermissions;
    ReceivePort _port = ReceivePort();
    IsolateManager.registerPortWithName(_port.sendPort);
    _port.listen((dynamic callBackData) {
      String tag= callBackData[0];
      switch (tag) {
        case "personal_btn":
          print("Personal button click : Do what ever you want here. This is inside your application scope");
          break;
        case "simple_button":
          print("Simple button click : Do what ever you want here. This is inside your application scope");
          break;
        case "focus_button":
          print("Focus button click : Do what ever you want here. This is inside your application scope");
          break;
      }
    });
    SystemAlertWindow.registerOnClickListener(callBackFunction);
Now the callBackFunction should looks like
bool callBackFunction(String tag) {
  print("Got tag " + tag);
  SendPort port = IsolateManager.lookupPortByName();
  port.send([tag]);
  return true;
}
19
likes
90
pub points
79%
popularity

Publisher

jvapps.in

A flutter plugin to show Truecaller like overlay window, over all other apps along with callback events.

Repository (GitHub)
View/report issues

Documentation

API reference

License

Apache 2.0 (LICENSE)

Dependencies

flutter

More

Packages that depend on system_alert_window