Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alexmercerind/flutter_native_view
[WIP] Embedding native windows into Flutter. Scrollable support & widgets placement on-top. 🪟
https://github.com/alexmercerind/flutter_native_view
cpp flutter flutter-desktop hacktoberfest linux win32 winapi windows
Last synced: 26 days ago
JSON representation
[WIP] Embedding native windows into Flutter. Scrollable support & widgets placement on-top. 🪟
- Host: GitHub
- URL: https://github.com/alexmercerind/flutter_native_view
- Owner: alexmercerind
- License: mit
- Created: 2022-03-11T16:37:45.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-12-29T13:29:26.000Z (almost 2 years ago)
- Last Synced: 2024-09-30T09:21:35.283Z (about 1 month ago)
- Topics: cpp, flutter, flutter-desktop, hacktoberfest, linux, win32, winapi, windows
- Language: C++
- Homepage:
- Size: 154 KB
- Stars: 148
- Watchers: 4
- Forks: 24
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# [flutter_native_view](https://github.com/alexmercerind/flutter_native_view)
[](https://twitter.com/alexmercerind) • [](https://github.com/alexmercerind/flutter_native_view/LICENSE) • [](https://paypal.me/alexmercerind) • [](https://pub.dartlang.org/packages/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](https://github.com/alexmercerind/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](./example) application by cloning the repository.
## Sponsor
You may sponsor this project's future development & research at:
- [GitHub Sponsors](https://github.com/sponsors/alexmercerind) (monthly-recurring)
- [PayPal](https://www.paypal.me/alexmercerind) (one-time)
It'll be a great motivation for me to continue.
### 💖 Current Sponsors
- [Ahmad Arif Aulia Sutarman](https://github.com/damywise) • 20$ • one-time
## Used By
- [dart_vlc](https://github.com/alexmercerind/dart_vlc#nativevideo)
## 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`](https://github.com/alexmercerind/flutter_native_view/tree/master/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`](https://github.com/timsneath/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:
```diff
#include
#include
#include
+ #include "flutter_native_view/flutter_native_view_plugin.h"
#include "flutter_window.h"
#include "utils.h"
```
```diff
window.SetQuitOnClose(true);
+ flutternativeview::NativeViewContainer::GetInstance()->Create();
::MSG msg;
while (::GetMessage(&msg, nullptr, 0, 0)) {
::TranslateMessage(&msg);
::DispatchMessage(&msg);
}
```
## Docs
#### Initialize the plugin
```dart
Future main() async {
WidgetsFlutterBinding.ensureInitialized();
/// Initialize.
await FlutterNativeView.ensureInitialized();
runApp(const MyApp());
}
```
#### Create a controller & render a window
```dart
class _MyAppState extends State {
/// 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),
),
),
],
),
),
),
),
),
);
}
}
```
#### Dispose the native view & destory the window
```dart
controller.dispose();
```
## Features
#### Currently Implemented
- Placement of other Flutter `Widget`s on top of the `NativeView`.
- Multiple instances of `NativeView`.
- Window movement handling & `NativeView`s positioning.
- Window resize handling & `NativeView`s sizing.
- Windows 10 & higher support.
- Proper disposing of `HWND` and instances.
- Semi transparent `Widget`s on top of `NativeView`.
- Placement of `NativeView`s inside scrollables like `ListView`s.
- [UNSTABLE] Customizable hit-test i.e. optional interactability with the `NativeView`s.
#### Under Progress
- Stable support for interactability with the `NativeView`s [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 <>