flutter_native_view

Embedding native windows into Flutter window.

Description

A Flutter plugin / C++ library to embed other native Windows (HWND on Windows, GtkWidget* on Linux etc.) into Flutter window.

Current API design allows to embed any arbitrary HWND completely from Dart as a Widget. This can be a good choice when client code wants to embed any arbitrary third-party window (which is already opened) into the Flutter window. However, this is not ideal in most cases because there is almost no point of embedding a third-party window directly (which will lack programmatic control via some API).

On the other hand, a window created by the client code itself e.g. a webview instance window or a video-output window etc. (on which the client code has full programmatic control) will be an ideal window to embed, in that case:

If client code decides to create an HWND through platform channel interface, they can use the setup present in core to embed a window.
Since dart:ffi is very capable now, one can pass the HWND directly as int of the window they created using dart:ffi or win32 through existing plugin API to embed it.

flutter_native_view.mp4

Example

class _MyAppState extends State<MyApp> {
  // Create a [NativeViewController].
  final controller = NativeViewController(
    // Using [FindWindow] from `package:win32` to retrieve [HWND] as [int].
    windowHandle: FindWindow(nullptr, 'VLC Media Player'.toNativeUtf16()));
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
            child: Padding(
              padding: const EdgeInsets.all(24.0),
              child: Stack(
                children: [
                  LayoutBuilder(
                    builder: (context, constraints) => NativeView(
                      // Pass [NativeViewController] to render the window.
                      controller: controller,
                      width: constraints.maxWidth,
                      height: constraints.maxHeight,
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: FloatingActionButton(
                      onPressed: () {},
                      child: const Icon(Icons.edit),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),    
    );
  }
}

Motivation

flutter/flutter#31713

Absence of official Platform View APIs in Flutter for Windows, Linux & macOS.

Features

Currently Implemented

Placement of other Flutter Widgets on top of the NativeView.
Multiple instances of NativeView.
window movement handling & NativeViews positioning.
Windows 7 SP1 >= support.

Under Progress

Finalized API.
Correct window resizing & NativeView sizing.
Interractions with the NativeView e.g. mouse clicks or keyboard presses.
Lazy resizing of NativeView Widget after changing size of the underlying native window to avoid airspace.
Removing Win32 specific types & ifdef magic.

Limitations & Known Issues

This setup though performant & highly customizable has few limitations right now:

Minimizing or maximizing the parent Flutter window isn't very pleasing to look at.
Window snapping animations on Windows 11 causes the that new indicator to render on top of the child HWNDs (z-order?).
Resizing window causes NativeViews to lag behind (race? slow flutter::MethodResultFunctions?). Maybe notifying the global positions of the NativeView upon every build using dart:ffi will be better?

Platforms

The plugin currently works on following platforms:

Platform	State
Windows	Working
Linux	Not Yet
macOS	Not Yet

License

Currently licensing strictly.

GNU General Public License v3.0

alexmercerind/flutter_native_view.md