flutter_native_view

Description:

flutter native view

flutter_native_view #
• • •
Embedding native windows & components directly into Flutter window.
Example #
Video showing a Flutter Windows app running with embedded webview & VLC using flutter_native_view.
Notice how AppBar is on-top of the the native surfaces & both native surfaces scroll perfectly.
https://user-images.githubusercontent.com/28951144/159073594-813700fb-0988-424f-86b5-381beccf4247.mp4
[slight lag & delay can be observed due to screen recording. the actual experience is very seamless]
Try running the example application by cloning the repository.
Sponsor #
You may sponsor this project's future development & research at:

GitHub Sponsors (monthly-recurring)
PayPal (one-time)

It'll be a great motivation for me to continue.
💖 Current Sponsors #

Ahmad Arif Aulia Sutarman • 20$ • one-time

Used By #

dart_vlc

Description #
This setup only uses Win32 APIs & no texture, intermediate buffers or copying of pixel buffers. Thus, it is very performant.
A Flutter plugin / Win32 setup 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 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 window without having a programmatic control to it (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 (or send back the HWND as int64_t to the plugin throught Dart).
Since dart:ffi is very capable now, one can pass the HWND directly as int of the window they created using dart:ffi or package:win32 through existing plugin API to embed it.

Future #
In future, I will create natively rendered, performant & less-bundle-sized webview & video playback plugins, if I get enough community support. Currently I'm only targetting Windows to limit the scope of work, though I plan for Linux support at some point.
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"
copied to clipboard
window.SetQuitOnClose(true);

+ flutternativeview::NativeViewContainer::GetInstance()->Create();

::MSG msg;
while (::GetMessage(&msg, nullptr, 0, 0)) {
::TranslateMessage(&msg);
::DispatchMessage(&msg);
}
copied to clipboard
Docs #
Initialize the plugin
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
/// Initialize.
await FlutterNativeView.ensureInitialized();
runApp(const MyApp());
}
copied to clipboard
Create a controller & 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()),
/// Make the [NativeView] interactable.
hitTestBehavior: HitTestBehavior.translucent,
);

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.all(24.0),
child: Stack(
children: [
LayoutBuilder(
/// Create a [NativeView].
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),
),
),
],
),
),
),
),
),
);
}
}
copied to clipboard
Dispose the native view & destory the window
controller.dispose();
copied to clipboard
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.
Placement of NativeViews inside scrollables like ListViews.
[UNSTABLE] Customizable hit-test i.e. optional interactability with the NativeViews.

Under Progress

Stable support for interactability with the NativeViews [maybe switching to programmatic approach].
Support for older Windows versions.
Defining z-order for each NativeViewController.
Finalized API.
General stability.

Motivation #
https://github.com/flutter/flutter/issues/31713
Absence of official Platform View APIs in Flutter for Windows, Linux & macOS.
Platforms #
The plugin currently works on following platforms:



Platform
State




Windows
Working



I plan to add Linux support soon. For now, limiting the scope of work to just Windows.
License #
MIT License
Copyright (C) 2022, Hitesh Kumar Saini <[email protected]>