clone_flutter_webview_plugin 1.2.2

Flutter Android iOS

Plugin that allow Flutter to communicate with a native Webview.

pub package

flutter_webview_plugin #

Plugin that allow Flutter to communicate with a native WebView.

Warning: The webview is not integrated in the widget tree, it is a native view on top of the flutter view. you won't be able to use snackbars, dialogs ...

Getting Started #

For help getting started with Flutter, view our online documentation.

How it works #

Launch WebView Fullscreen with Flutter navigation

new MaterialApp(
      routes: {
        "/": (_) => new WebviewScaffold(
              url: "https://www.google.com",
              appBar: new AppBar(
                title: new Text("Widget webview"),
              ),
            )
      },
    );

FlutterWebviewPlugin provide a singleton instance linked to one unique webview, so you can take control of the webview from anywhere in the app

listen for events

final flutterWebviewPlugin = new FlutterWebviewPlugin();

flutterWebviewPlugin.onUrlChanged.listen((String url) {
  
});

Listen for scroll event in webview

final flutterWebviewPlugin = new FlutterWebviewPlugin();
flutterWebviewPlugin.onScrollYChanged.listen((double offsetY) { // latest offset value in vertical scroll
  // compare vertical scroll changes here with old value
});

flutterWebviewPlugin.onScrollXChanged.listen((double offsetX) { // latest offset value in horizontal scroll
  // compare horizontal scroll changes here with old value
});

Note: Do note there is a slight difference is scroll distance between ios and android. Android scroll value difference tends to be larger than ios devices.

Hidden WebView

final flutterWebviewPlugin = new FlutterWebviewPlugin();  

flutterWebviewPlugin.launch(url, hidden: true);

Close launched WebView

flutterWebviewPlugin.close();

Webview inside custom Rectangle

final flutterWebviewPlugin = new FlutterWebviewPlugin();  

flutterWebviewPlugin.launch(url,
                  fullScreen: false,
                  rect: new Rect.fromLTWH(
                      0.0, 
                      0.0, 
                      MediaQuery.of(context).size.width, 
                      300.0));

Webview Events #

  • Stream<Null> onDestroy
  • Stream<String> onUrlChanged
  • Stream<WebViewStateChanged> onStateChanged
  • Stream<String> onError

Don't forget to dispose webview flutterWebviewPlugin.dispose()

Webview Functions #

Future<Null> launch(String url,
         {Map<String, String> headers: null,
         bool withJavascript: true,
         bool clearCache: false,
         bool clearCookies: false,
         bool hidden: false,
         bool enableAppScheme: true,
         Rect rect: null,
         String userAgent: null,
         bool withZoom: false,
         bool withLocalStorage: true,
         bool scrollBar: true});
Future<String> evalJavascript(String code);
Future<Map<String, dynamic>> getCookies();
Future<Null> resize(Rect rect);
Future<Null> show();
Future<Null> hide();
Future<Null> reloadUrl(String url);
0
likes
85
pub points
49%
popularity

Plugin that allow Flutter to communicate with a native Webview.

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

hungldm@sendo.vn

License

BSD (LICENSE)

Dependencies

flutter

More

Packages that depend on clone_flutter_webview_plugin