WebView CEF
Flutter Desktop WebView backed by CEF (Chromium Embedded Framework). This project is under heavy development, and the APIs are not stable yet.
Index
Supported OSs
x
Windows 7+x
macOS 10.12+x
Linux (x64 and arm64)
Setting Up
Windows
Inside your application folder, you need to add some lines in your windows\runner\main.cpp
.(Because of Chromium multi process architecture, and IME support, and also flutter rquires invoke method channel on flutter engine thread)
//Introduce the source code of this plugin into your own project
#include "webview_cef/webview_cef_plugin_c_api.h"
int APIENTRY wWinMain(_In_ HINSTANCE instance, _In_opt_ HINSTANCE prev,
_In_ wchar_t *command_line, _In_ int show_command) {
//start cef deamon processes. MUST CALL FIRST
initCEFProcesses();
::MSG msg;
while (::GetMessage(&msg, nullptr, 0, 0)) {
::TranslateMessage(&msg);
::DispatchMessage(&msg);
//add this line to enable cef keybord input, and enable to post messages to flutter engine thread from cef message loop thread.
handleWndProcForCEF(msg.hwnd, msg.message, msg.wParam, msg.lParam);
}
When building the project for the first time, a prebuilt cef bin package (200MB, link in release) will be downloaded automatically, so you may wait for a longer time if you are building the project for the first time.
macOS
To use the plugin in macOS, you'll need to clone the repository onto your project location, prefereably inside a packages/
folder on the root of your project.
Update your pubspec.yaml
file to accomodate the change.
...
dependencies:
# Webview
webview_cef:
path: ./packages/webview_cef # Or wherever you cloned the repo
...
Then follow the below steps inside the macos/
folder of the cloned repository.
Note: You can also download universal binary for build an mac-universal app if you want to build an mac universal app. See #30. Thanks to @okiabrian123.
-
Unzip the archive and put all files into
macos/third/cef
. (Inside the cloned repository, not your project) -
Run the example app.
[HELP WANTED!]
Finding a more elegant way to distribute the prebuilt package.
Note: Currently the project has not been enabled with multi process support due to debug convenience. If you want to enable multi process support, you may want to enable multi process mode by changing the implementation and build your own helper bundle. (Finding a more elegant way in the future.)
Linux
This part of the content needs to be summarized. You can refer to the methods in the example first(Very similar to on the Windows). In addition, you need to modify the method of copying resources in the linux/CMakeLists.txt under your own project to be consistent with that in windows. Otherwise, the resource files cannot be copied properly under linux.
TODOs
Pull requests are welcome.
x
Windows supportx
macOS supportx
Linux supportx
Multi instance supportx
IME support(Only support Third party IME on Linux and Windows, Microsoft IME on Windows, and only tested Chinese input methods)x
Mouse events supportx
JS bridge supportx
Cookie manipulation supportx
Release to pubx
Trackpad supportx
devTools support
Demo
This demo is a simple webview app that can be used to test the webview_cef
plugin.
Screenshots
Windows | macOS | Linux |
---|---|---|
Credits
This project is inspired from flutter_webview_windows
.