Multiple windows - Message Loop blocking the main thread

[antoinem60]

Hello,

I'm building an app that requires to create many small windows as 'overlays'. Basically, I'm making a HUD (Head up display) for another software. Here is what my app looks like : Image. I need to create many small windows like the one on the left of the image. Theses windows must be frameless, movable, always on top and should not appear in the taskbar/alt+tab.

From what I know, Flutter doesn't really allow to create such windows. This is why I tried to use the win32 package. Here is my code :

static void createFramelessWindow() {
    final hInstance = GetModuleHandle(nullptr);

    // Register the window class.
    final className = TEXT('Sample Window Class');

    final wc = calloc<WNDCLASS>()
      ..ref.style = CS_HREDRAW | CS_VREDRAW
      ..ref.lpfnWndProc = Pointer.fromFunction<WindowProc>(mainWindowProc, 0)
      ..ref.hInstance = hInstance
      ..ref.lpszClassName = className
      ..ref.hCursor = LoadCursor(NULL, IDC_ARROW)
      ..ref.hbrBackground = GetStockObject(BLACK_BRUSH);
    RegisterClass(wc);

    // Create the window.
    final hWnd = CreateWindowEx(
        WS_EX_TOPMOST | WS_EX_LAYERED | WS_EX_TOOLWINDOW, // Optional window styles.
        className, // Window class
        nullptr, // Window caption
        WS_POPUP, // Window style

        // Size and position
        500,
        500,
        200,
        100,
        getMainWindowHandle(), // Parent window
        NULL, // Menu
        hInstance, // Instance handle
        nullptr // Additional application data
        );

    SetLayeredWindowAttributes(hWnd, 0, 180, LWA_ALPHA);

    // Remove the title bar
    SetWindowLongPtr(hWnd, GWL_STYLE, 0);

    if (hWnd == 0) {
      final error = GetLastError();
      throw WindowsException(HRESULT_FROM_WIN32(error));
    }

    ShowWindow(hWnd, SW_SHOWNORMAL);
    UpdateWindow(hWnd);

    // Run the message loop.
    final msg = calloc<MSG>();
    while (GetMessage(msg, NULL, 0, 0) != 0) {
      TranslateMessage(msg);
      DispatchMessage(msg);
    }

    free(className);
    DestroyWindow(hWnd);
    UnregisterClass(wc.ref.lpszClassName, wc.ref.hInstance);
  }

static int mainWindowProc(int hWnd, int uMsg, int wParam, int lParam) {
    switch (uMsg) {
      case WM_DESTROY:
        PostQuitMessage(0);
        return 0;

      case WM_NCHITTEST:
        // A click on the client area is treated as a click on the title bar
        if (DefWindowProc(hWnd, uMsg, wParam, lParam) == HTCLIENT) {
          return HTCAPTION;
        }
        return 0;

      case WM_PAINT:
        final ps = calloc<PAINTSTRUCT>();
        final hdc = BeginPaint(hWnd, ps);
        final hPen = CreatePen(PS_SOLID, 4, RGB(64, 64, 64));
        final hPrevPen = SelectObject(hdc, hPen);

        Rectangle(hdc, 500, 500, 700, 600);
        SelectObject(hdc, hPrevPen);
        DeleteObject(hPen);

        final rect = calloc<RECT>();
        final msg = TEXT(title);

        GetClientRect(hWnd, rect);
        DrawText(hdc, msg, -1, rect, DT_CENTER | DT_VCENTER | DT_SINGLELINE);

        EndPaint(hWnd, ps);

        free(rect);
        free(msg);
        free(ps);

        return 0;
    }

    return DefWindowProc(hWnd, uMsg, wParam, lParam);
  }

My problem is that there is a infinite loop for the window Message Loop and this loop is blocking the main thread (the app main window).
How can I create several windows like this one and avoid blocking the main window ?

I tried to run the message loop into an Isolate but the window doesn't respond (I guess because Isolates are not sharing memory but not sure). I tried to put the whole function (window creation + message loop) into an Isolate, it worked. The main window wasn't blocked anymore and the HUD window was displaying correctly. But I also need to update the texts displayed on the HUD window, for this I tried to use communication between Isolates but somehow the Listen Stream is never reached. Here is the code :

class CrossIsolatesMessage<T> {
  final SendPort sender;
  final T message;

  CrossIsolatesMessage({
    required this.sender,
    required this.message,
  });
}

static void createIsolate() async {
    // Local and temporary ReceivePort to retrieve
    // the new isolate's SendPort
    final ReceivePort receivePort = ReceivePort();

    // Instantiate the new isolate
    newIsolate = await Isolate.spawn(
        callbackFunction,
        receivePort.sendPort,
    );

    // Retrieve the port to be used for further communication
    SendPort sp = await receivePort.first;
    newIsolateSendPort = sp;
}

static void callbackFunction(SendPort callerSendPort){
    // Instantiate a SendPort to receive message
    // from the caller
    final ReceivePort newIsolateReceivePort = ReceivePort();

    // Provide the caller with the reference of THIS isolate's SendPort
    callerSendPort.send(newIsolateReceivePort.sendPort);

    newIsolateReceivePort.listen((dynamic message){
        final CrossIsolatesMessage<String> incomingMessage = message as CrossIsolatesMessage<String>;

        // Process the message
        print(incomingMessage.message); // Never reached
        title = incomingMessage.message;
        // updateOverlayText(incomingMessage.message);
        // InvalidateRect(hWnd, nullptr, TRUE);
        // UpdateWindow(hWnd);
    });

    createFramelessWindow();
}

static void sendMessage(String messageToBeSent) async {
    // We create a temporary port to receive the answer
    final ReceivePort port = ReceivePort();

    // We send the message to the Isolate
    newIsolateSendPort.send(
        CrossIsolatesMessage<String>(
            sender: port.sendPort,
            message: messageToBeSent,
        )
    );
}

Any idea on how to create many non-blocking windows like that ? From all the examples I've found in the package, there is always only one window and a blocking message loop at the end of the main function.

Any help will be very much appreciated !