How to send data from the app to the overlay widget.

[hemandroid]

Hi there,

I want to send some data from the app to the overlay button. For ex: Overlay chat head is having a text which can present the timer value. So, after enabling the overlay. I want to run the timer in the app, and the same data should reflect on the chat head as well. Please do help me on the same asap.

[X-SLAYER]

You can use the method

 await FlutterOverlayWindow.shareData("Hello from the other side"); 

and inside the overlay use

 FlutterOverlayWindow.overlayListener.listen((event) {
      log("Current Event: $event");
    });

[hemandroid]

Hi @X-SLAYER I tried as you mentioned, but data is printing in the logs. But it was not updating in the UI. Please check the below code once and correct me

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:flutter_overlay_window/flutter_overlay_window.dart';

class MessangerChatHead extends StatefulWidget {
  const MessangerChatHead({Key? key}) : super(key: key);

  @override
  State<MessangerChatHead> createState() => _MessangerChatHeadState();
}

class _MessangerChatHeadState extends State<MessangerChatHead> {
  Color color = const Color(0xFFFF0C0C);
  BoxShape shape = BoxShape.rectangle;
  String data = '';

  @override
  void initState() {
    super.initState();
    FlutterOverlayWindow.overlayListener.listen((event) {
      // setState(() {
        data = event.toString();
        log('Received Data : ${event.toString()}');
      // });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      elevation: 0.0,
      child: GestureDetector(
        onTap: () async {
          if (shape == BoxShape.circle) {
            await FlutterOverlayWindow.resizeOverlay(matchParent, matchParent);
            setState(() {
              shape = BoxShape.rectangle;
            });
          } else {
            await FlutterOverlayWindow.resizeOverlay(150, 150);
            setState(() {
              shape = BoxShape.circle;
            });
          }
        },
        child: Container(
          height: MediaQuery.of(context).size.height,
          decoration: BoxDecoration(color: color, shape: shape),
          child:  Center(
            child: Text(data, style: const TextStyle(color: Colors.black, fontSize: 20),),
          ),
        ),
      ),
    );
  }
}

I tried with setState and without setState as well.

[dorlanpabon]

Amigos pueden usar al comunicación mediante puertos Isolate.

Overlay********
En mi caso uso en overlay los siguiente atributos.

  static const String _kPortName = 'overlay_port';
  final _receivePort = ReceivePort();
  static const String _kPortNameHome = 'home_port';
  SendPort? homePort;

En initiState del overlay registro el puerto con el nombre;

IsolateNameServer.registerPortWithName(_receivePort.sendPort, _kPortName);

_receivePort.listen((message) {
 //Aqui se recibe los mensajes del enviados del home al overlay
  print("message overlay: $message");
});

En el evento onTop() de algun widget del overlay, trato de obtener el puerto del home o main, como ustedes lo usen.

homePort ??= IsolateNameServer.lookupPortByName(_kPortNameHome);

##para enviar mensaje del overlay al home usen, luego de haber registrado su homePort con la linea anterior.

homePort.send("texto"), homePort.send(list), homePort.send( { pro:"prop" } ), etc...

MAIN o Home o como lo usen****

Propiedades del main, o home, o como lo usen.

static const String _kPortName = 'overlay_port';
final _receivePort = ReceivePort();
static const String _kPortNameHome = 'home_port';
SendPort? homePort;

metodo initState

IsolateNameServer.registerPortWithName(_receivePort.sendPort, _kPortName);

_receivePort.listen((message) {
 //Aqui se recibe los mensajes del enviados del overlay al home
  print("message overlay: $message");
});

##para enviar mensaje del home al overlay usen lo siguiente:

overlayPort.send("texto"), overlayPort.send(list), overlayPort.send( { pro:"prop" } ), etc...

[birnayt]

Hi @dorlanpabon, i tried to implement but it didn't work, I did what you say and also tried put kPortHomeName in registerPortWithName in home code.

In home:

IsolateNameServer.registerPortWithName(_receivePort.sendPort, _kPortNameHome);
  _receivePort.listen((message) {
    //Aqui se recibe los mensajes del enviados del overlay al home
    print("message overlay: $message");
  });

And in some onTap of widget overlay:

mapPort ??= IsolateNameServer.lookupPortByName(_kPortNameHome);
mapPort?.send("test");

I noticed that mapPort receives Sendport, but it still doesn't work.

[dorlanpabon]

Hola @birnayt ,

Trata de colocar el codigo del widget en una funcion que se ejecute luego del initState

En mi caso, lo ejecuto en el onTap,

mapPort ??= IsolateNameServer.lookupPortByName(_kPortNameHome); mapPort?.send("test");

Esto debido a que puede que el puerto Home aún no esté registrado, por ello opte colocarlo en el onTap del widget.

Avisame cualquier novedad

[birnayt]

First of all thank you very much @dorlanpabon!

I needed to close debug and start again for it to work. It seems that the reload is not enough. Now works!

[X-SLAYER]

#46 (comment)