{"id":13547969,"url":"https://github.com/alexmercerind/flutter_native_view","last_synced_at":"2025-07-11T10:05:35.700Z","repository":{"id":37658969,"uuid":"468826208","full_name":"alexmercerind/flutter_native_view","owner":"alexmercerind","description":"[WIP] Embedding native windows into Flutter. Scrollable support \u0026 widgets placement on-top. 🪟","archived":false,"fork":false,"pushed_at":"2022-12-29T13:29:26.000Z","size":158,"stargazers_count":153,"open_issues_count":13,"forks_count":27,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-07T07:23:01.808Z","etag":null,"topics":["cpp","flutter","flutter-desktop","hacktoberfest","linux","win32","winapi","windows"],"latest_commit_sha":null,"homepage":"","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexmercerind.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-11T16:37:45.000Z","updated_at":"2025-03-11T22:04:35.000Z","dependencies_parsed_at":"2023-01-31T09:01:22.310Z","dependency_job_id":null,"html_url":"https://github.com/alexmercerind/flutter_native_view","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/alexmercerind/flutter_native_view","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexmercerind%2Fflutter_native_view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexmercerind%2Fflutter_native_view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexmercerind%2Fflutter_native_view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexmercerind%2Fflutter_native_view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexmercerind","download_url":"https://codeload.github.com/alexmercerind/flutter_native_view/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexmercerind%2Fflutter_native_view/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264780779,"owners_count":23662719,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cpp","flutter","flutter-desktop","hacktoberfest","linux","win32","winapi","windows"],"created_at":"2024-08-01T12:01:03.952Z","updated_at":"2025-07-11T10:05:35.680Z","avatar_url":"https://github.com/alexmercerind.png","language":"C++","readme":"# [flutter_native_view](https://github.com/alexmercerind/flutter_native_view)\n\n[![](https://img.shields.io/twitter/follow/alexmercerind)](https://twitter.com/alexmercerind) • [![MIT](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/alexmercerind/flutter_native_view/LICENSE) • [![Donate](https://img.shields.io/badge/Donate-PayPal-blue.svg)](https://paypal.me/alexmercerind) • [![pub package](https://img.shields.io/pub/v/flutter_native_view.svg)](https://pub.dartlang.org/packages/flutter_native_view)\n\nEmbedding native windows \u0026 components directly into Flutter window.\n\n## Example\n\nVideo showing a Flutter Windows app running with embedded webview \u0026 VLC using [flutter_native_view](https://github.com/alexmercerind/flutter_native_view).\n\nNotice how `AppBar` is on-top of the the native surfaces \u0026 both native surfaces scroll perfectly.\n\nhttps://user-images.githubusercontent.com/28951144/159073594-813700fb-0988-424f-86b5-381beccf4247.mp4\n\n_[slight lag \u0026 delay can be observed due to screen recording. the actual experience is very seamless]_\n\nTry running the [example](./example) application by cloning the repository.\n\n## Sponsor\n\nYou may sponsor this project's future development \u0026 research at:\n\n- [GitHub Sponsors](https://github.com/sponsors/alexmercerind) (monthly-recurring)\n- [PayPal](https://www.paypal.me/alexmercerind) (one-time)\n\nIt'll be a great motivation for me to continue.\n\n### 💖 Current Sponsors\n\n- [Ahmad Arif Aulia Sutarman](https://github.com/damywise) • 20$ • one-time\n\n## Used By\n\n- [dart_vlc](https://github.com/alexmercerind/dart_vlc#nativevideo)\n\n## Description\n\nThis setup only uses Win32 APIs \u0026 no texture, intermediate buffers or copying of pixel buffers. Thus, it is **very performant**.\n\nA Flutter plugin / Win32 setup to embed other native Windows (`HWND` on Windows) into Flutter window.\n\nCurrent 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.\nHowever, 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).\n\nOn 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:\n\n- 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).\n- 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.\n\n## Future\n\nIn future, I will create natively rendered, performant \u0026 less-bundle-sized webview \u0026 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.\n\n## Setup\n\nAdd following lines to your `windows/runner/main.cpp` file:\n\n```diff\n  #include \u003cflutter/dart_project.h\u003e\n  #include \u003cflutter/flutter_view_controller.h\u003e\n  #include \u003cwindows.h\u003e\n\n+ #include \"flutter_native_view/flutter_native_view_plugin.h\"\n  #include \"flutter_window.h\"\n  #include \"utils.h\"\n```\n\n```diff\n  window.SetQuitOnClose(true);\n\n+ flutternativeview::NativeViewContainer::GetInstance()-\u003eCreate();\n\n  ::MSG msg;\n  while (::GetMessage(\u0026msg, nullptr, 0, 0)) {\n    ::TranslateMessage(\u0026msg);\n    ::DispatchMessage(\u0026msg);\n  }\n```\n\n## Docs\n\n#### Initialize the plugin\n\n```dart\nFuture\u003cvoid\u003e main() async {\n  WidgetsFlutterBinding.ensureInitialized();\n  /// Initialize.\n  await FlutterNativeView.ensureInitialized();\n  runApp(const MyApp());\n}\n```\n\n#### Create a controller \u0026 render a window\n\n```dart\nclass _MyAppState extends State\u003cMyApp\u003e {\n  /// Create a [NativeViewController].\n  final controller = NativeViewController(\n    /// Using [FindWindow] from `package:win32` to retrieve `HWND` as [int].\n    handle: FindWindow(nullptr, 'VLC Media Player'.toNativeUtf16()),\n    /// Make the [NativeView] interactable.\n    hitTestBehavior: HitTestBehavior.translucent,\n  );\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      home: Scaffold(\n        body: Center(\n            child: Padding(\n              padding: const EdgeInsets.all(24.0),\n              child: Stack(\n                children: [\n                  LayoutBuilder(\n                    /// Create a [NativeView].\n                    builder: (context, constraints) =\u003e NativeView(\n                      /// Pass [NativeViewController] to render the window.\n                      controller: controller,\n                      width: constraints.maxWidth,\n                      height: constraints.maxHeight,\n                    ),\n                  ),\n                  Padding(\n                    padding: const EdgeInsets.all(16.0),\n                    child: FloatingActionButton(\n                      onPressed: () {},\n                      child: const Icon(Icons.edit),\n                    ),\n                  ),\n                ],\n              ),\n            ),\n          ),\n        ),\n      ),\n    );\n  }\n}\n```\n\n#### Dispose the native view \u0026 destory the window\n\n```dart\ncontroller.dispose();\n```\n\n## Features\n\n#### Currently Implemented\n\n- Placement of other Flutter `Widget`s on top of the `NativeView`.\n- Multiple instances of `NativeView`.\n- Window movement handling \u0026 `NativeView`s positioning.\n- Window resize handling \u0026 `NativeView`s sizing.\n- Windows 10 \u0026 higher support.\n- Proper disposing of `HWND` and instances.\n- Semi transparent `Widget`s on top of `NativeView`.\n- Placement of `NativeView`s inside scrollables like `ListView`s.\n- [UNSTABLE] Customizable hit-test i.e. optional interactability with the `NativeView`s.\n\n#### Under Progress\n\n- Stable support for interactability with the `NativeView`s [maybe switching to programmatic approach].\n- Support for older Windows versions.\n- Defining z-order for each `NativeViewController`.\n- Finalized API.\n- General stability.\n\n## Motivation\n\nhttps://github.com/flutter/flutter/issues/31713\n\nAbsence of official Platform View APIs in Flutter for Windows, Linux \u0026 macOS.\n\n## Platforms\n\nThe plugin currently works on following platforms:\n\n| Platform | State   |\n| -------- | ------- |\n| Windows  | Working |\n\nI plan to add Linux support soon. For now, limiting the scope of work to just Windows.\n\n## License\n\nMIT License\n\nCopyright (C) 2022, Hitesh Kumar Saini \u003c\u003csaini123hitesh@gmail.com\u003e\u003e\n","funding_links":["https://paypal.me/alexmercerind","https://github.com/sponsors/alexmercerind","https://www.paypal.me/alexmercerind"],"categories":["C++"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexmercerind%2Fflutter_native_view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexmercerind%2Fflutter_native_view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexmercerind%2Fflutter_native_view/lists"}