webview_win_floating 1.0.4

WebView for Windows. A Flutter plugin that implements the interface of package webview_flutter.

webview_win_floating

Flutter webView for Windows. It's also a plugin that implements the interface of webview_flutter.

Platform Support

This package itself support only Windows.

But use it with webview_flutter, you can write once then support Windows / Android / iOS at the same time.

Android / iOS webview is supported by webview_flutter

Features & Limitations

This package place a native Windows WebView2 component on the window, no texture involved.

That's why it called "floating". In Windows, Flutter widgets cannot show on top of the webview.

However, since it is a native WebView2 component, without texture involved, the display speed is the same with native WebView2.

Feature:

• fast display speed (no texture)
• support fullscreen
• support cross-platform (Windows / Android / iOS)

Limitations:

• all the Flutter widgets cannot show on top of the webview (only in Windows)
• cannot push a new route on top of the webview
• focus switch between webview and flutter widgets (via Tab key) is not support (only in Windows)
• The webview can be put in a scrollable widget, but you may need to assign a ScrollController to the scrollable widget (to enable reposition the webview when scrolling).
• The webview cannot be clipped by Flutter. So if the webview is put in a scrollable, and the webview is outside of the scrollable, the webview is still visible. (However, if the scrollable is filled with the window size, then this issue can be ignored)

Hmm... there are so many limitations.

So try this package only if the limitations mentioned above is not a concern for you, or your app really need cross-platform, or other packages cannot satisfy your requirement (ex. cannot build pass, text blur, low display fps, large ~200MB dll size, security issue when cannot updating the webview core, etc).

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  webview_win_floating: ^1.0.0
  webview_flutter: ^3.0.4

Or

dependencies:
  webview_win_floating:
    git:
      url: https://github.com/jakky1/webview_win_floating.git
      ref: master
  webview_flutter: ^3.0.4

Usage

register webview first

Before using webview, you should add the following code:

import 'package:webview_win_floating/webview.dart';

if (Platform.isWindows) WebView.platform = WindowsWebViewPlugin();

Use webview now

NOTE: all the interface are supplied by webview_flutter

  late WebViewController controller;
  @override
  Widget build(BuildContext context) {

    Widget webview = WebView(
      backgroundColor: Colors.black,
      initialUrl: "https://www.google.com/",
      javascriptMode: JavascriptMode.unrestricted,
      onWebViewCreated: (controller) {
        this.controller = controller;
      },
      navigationDelegate: (navigation) {
        return navigation.url.contains("google") ? NavigationDecision.navigate : NavigationDecision.prevent;
      },
      onPageStarted: (url) => print("onPageStarted: $url"),
      onPageFinished: (url) => print("onPageFinished"),
      onWebResourceError: (error) => print("error: ${error.failingUrl}"),
    );

    return webview;
}

enable javascript

don't forgot to add this line if you want to enable javascript:

 javascriptMode: JavascriptMode.unrestricted,

restricted user navigation

For example, to disable the facebook / twitter links in youtube website:

navigationDelegate: (navigation) {
  return navigation.url.contains("youtube") ? NavigationDecision.navigate : NavigationDecision.prevent;
},

Communication with javascript

Hint: you can rename the name 'myChannelName' in the following code

Widget build(BuildContext context) {
    return WebView(
        ....
        javascriptChannels: <JavascriptChannel> { channels },
        onWebViewCreated: (controller) {
            controller.loadHtmlString(htmlContent);
            controller.runJavascript("callByDart(100)");
        }
    );
}

var channels = JavascriptChannel(name: "myChannelName", onMessageReceived: (jmsg) {
    String message = jmsg.message;
    print(message);  // print "This message is from javascript"
});

var htmlContent = '''
<html>
<body>
<script>
function callByDart(int value) {
    console.log("callByDart: " + value);
}
myChannelName.postMessage("This message is from javascript");
</script>
</body>
</html>
''';

controller operations

• controller.loadUrl(url)
• controller.runJavascript( jsStr )
• controller.runJavascriptReturningResult( jsStr ) // return javascript function's return value
• controller.reload()
• controller.canGoBack()
• controller.goBack()
• controller.goForward()
• controller.canGoForward()
• controller.currentUrl()
• controller.clearCache()

standalon mode

If your app only runs on Windows, and you want to remove library dependencies as many as possible, you can modify pubspec.yaml file:

dependencies:
  webview_win_floating: ^1.0.0
  # webview_flutter: ^3.0.4  # mark this line, for Windows only app

and modify all the following class name in your code:

WebView -> WinWebView  // add "Win" prefix
WebViewController -> WinWebViewController  // add "Win" prefix
NavigationDecision  -> WinNavigationDecision  // add "Win" prefix

just only modify class names. All the properties / method are the same with webview_flutter

Example

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:webview_win_floating/webview.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  if (Platform.isWindows) WebView.platform = WindowsWebViewPlugin();
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    super.initState();
  }

  late WebViewController controller;
  @override
  Widget build(BuildContext context) {

    Widget webview = WebView(
      initialUrl: "https://www.youtube.com/",
      javascriptMode: JavascriptMode.unrestricted,
      onWebViewCreated: (controller) {
        this.controller = controller;
      },
    );

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Windows Webview example app'),
        ),
        body: webview,
      ),
    );
  }
}