webview_win_floating 1.0.2 copy "webview_win_floating: ^1.0.2" to clipboard
webview_win_floating: ^1.0.2 copied to clipboard

Published 19 months ago • Latest: 2.2.4
[unknown platforms]
→

Metadata

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

More...

webview_win_floating #

pub version

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

Advantages & 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.

Advantages:

  • fast display speed (no texture)
  • support fullscreen

Limitations:

  • all the Flutter widgets cannot show on top of the webview (only in Windows)
  • focus switch between webview and flutter widgets is not support (only in Windows)

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,
      ),
    );
  }
}

← Metadata

14
likes
0
pub points
85%
popularity

Publisher

unverified uploader

Metadata

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

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

flutter, fullscreen_window, plugin_platform_interface, webview_flutter_platform_interface

More

Packages that depend on webview_win_floating

Back