flutter_native_view

Embedding native windows & components directly into Flutter window (no texture, no intermediate buffers, no copying, just performance). 💙

Notes

In future, I will create natively rendered, performant & less-bundle-sized webview & video playback plugins. Currently I'm only targetting Windows to limit the scope of work.

Example

Try running the example application by cloning the repository.

video.mp4

Description

A Flutter plugin / C++ library to embed other native Windows (HWND on Windows) 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.

Motivation

flutter/flutter#31713

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

Sponsor

You may sponsor this project at Patreon or make voluntary donations at PayPal. It'll be a great motivation for me.

💖 Current Sponsors

• Ahmad Arif Aulia Sutarman ● 20$

Setup

Add following lines to your windows/runner/main.cpp file:

  #include <flutter/dart_project.h>
  #include <flutter/flutter_view_controller.h>
  #include <windows.h>

+ #include "flutter_native_view/flutter_native_view_plugin.h"
  #include "flutter_window.h"
  #include "utils.h"

  window.SetQuitOnClose(true);

+ flutternativeview::CreateNativeViewContainer();

  ::MSG msg;
  while (::GetMessage(&msg, nullptr, 0, 0)) {
    ::TranslateMessage(&msg);
    ::DispatchMessage(&msg);
  }

Docs

Initialize the plugin

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await FlutterNativeView.ensureInitialized();
  runApp(const MyApp());
}

Render a window

class _MyAppState extends State<MyApp> {
  /// Create a [NativeViewController].
  final controller = NativeViewController(
    /// Using [FindWindow] from `package:win32` to retrieve `HWND` as [int].
    handle: 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),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Features

Currently Implemented

• Placement of other Flutter Widgets on top of the NativeView.
• Multiple instances of NativeView.
• Window movement handling & NativeViews positioning.
• Window resize handling & NativeViews sizing.
• Windows 10 & higher support.
• Proper disposing of HWND and instances.
• Semi transparent Widgets on top of NativeView.
• Customizable hit-test i.e. optional interactability with the NativeViews.

Under Progress

• Finalized API.
• Better maximize/minimize animations.
• Support for older Windows versions.
• Efficient redraws of child windows.
• Removing Win32 specific types & ifdef magic.
• Defining z-order for each NativeViewController.

Platforms

The plugin currently works on following platforms:

Platform	State
Windows	Working

License

Currently licensing strictly.

GNU General Public License v3.0

Copyright (C) 2021, Hitesh Kumar Saini <[email protected]>