Flutter Community

Flutter WebView Plugin

Plugin that allows 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

newMaterialApp(
routes: {
"/": (_) =>newWebviewScaffold(
url:"https://www.google.com",
appBar:newAppBar(
title:newText("Widget webview"),
),
),
},
);

Optional parameters hidden and initialChild are available so that you can show something else while waiting for the page to load. If you set hidden to true it will show a default CircularProgressIndicator. If you additionally specify a Widget for initialChild you can have it display whatever you like till page-load.

e.g. The following will show a read screen with the text 'waiting.....'.

returnnewMaterialApp(
title:'Flutter WebView Demo',
theme:newThemeData(
primarySwatch:Colors.blue,
),
routes: {
'/': (_) =>constMyHomePage(title:'Flutter WebView Demo'),
'/widget': (_) =>newWebviewScaffold(
url: selectedUrl,
appBar:newAppBar(
title:constText('Widget webview'),
),
withZoom:true,
withLocalStorage:true,
hidden:true,
initialChild:Container(
color:Colors.redAccent,
child:constCenter(
child:Text('Waiting.....'),
),
),
),
},
);

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 =newFlutterWebviewPlugin();
flutterWebviewPlugin.onUrlChanged.listen((String url) {
});

Listen for scroll event in webview

final flutterWebviewPlugin =newFlutterWebviewPlugin();
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 =newFlutterWebviewPlugin();
flutterWebviewPlugin.launch(url, hidden:true);

Close launched WebView

flutterWebviewPlugin.close();

Webview inside custom Rectangle

final flutterWebviewPlugin =newFlutterWebviewPlugin();
flutterWebviewPlugin.launch(url,
fullScreen:false,
rect:newRect.fromLTWH(
0.0,
0.0,
MediaQuery.of(context).size.width,
300.0,
),
);

Webview Events

• Stream<Null> onDestroy
• Stream<String> onUrlChanged
• Stream<WebViewStateChanged> onStateChanged
• Stream<double> onScrollXChanged
• Stream<double> onScrollYChanged
• Stream<String> onError

Don't forget to dispose webviewflutterWebviewPlugin.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 withLocalUrl:true,
bool scrollBar:true,
bool supportMultipleWindows:false,
bool appCacheEnabled:false,
bool allowFileURLs:false,
});

Future<String> evalJavascript(String code);

Future<Map<String, dynamic>> getCookies();

Future<Null> cleanCookies();

Future<Null> resize(Rect rect);

Future<Null> show();

Future<Null> hide();

Future<Null> reloadUrl(String url);

Future<Null> close();

Future<Null> reload();

Future<Null> goBack();

Future<Null> goForward();

Future<Null> stopLoading();