Is there WebView in Flutter?
A Flutter plugin that provides a webview widget is available now for Developers Preview
usage
return Scaffold(
appBar: AppBar(
title: const Text('Flutter WebView example'),
),
body: const WebView(
initialUrl: 'https://flutter.io',
javaScriptMode: JavaScriptMode.unrestricted,
),
);
full code
You can use
> flutter_webview_plugin
It is a plugin that allow Flutter
to communicate with a native WebView
.
Note: 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 ...
You can use my plugin flutter_inappwebview, which is a Flutter Plugin that allows you to add inline webviews integrated with the widget tree or open an in-app browser window! It offers a lot of events, methods, and options compared to other webview plugins!
Main Classes:
- InAppWebView: Flutter Widget for adding an inline native WebView integrated into the flutter widget tree. To use
InAppWebView
class on iOS you need to opt-in for the embedded views preview by adding a boolean property to the app'sInfo.plist
file, with the keyio.flutter.embedded_views_preview
and the valueYES
. - ContextMenu: This class represents the WebView context menu.
- HeadlessInAppWebView: Class that represents a WebView in headless mode. It can be used to run a WebView in background without attaching an
InAppWebView
to the widget tree. - InAppBrowser: In-App Browser using native WebView.
- ChromeSafariBrowser: In-App Browser using Chrome Custom Tabs on Android / SFSafariViewController on iOS.
- InAppLocalhostServer: This class allows you to create a simple server on
http://localhost:[port]/
. The defaultport
value is8080
. - CookieManager: This class implements a singleton object (shared instance) which manages the cookies used by WebView instances.
- HttpAuthCredentialDatabase: This class implements a singleton object (shared instance) which manages the shared HTTP auth credentials cache.
- WebStorageManager: This class implements a singleton object (shared instance) which manages the web storage used by WebView instances.
Quick example:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
Future main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(new MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
InAppWebViewController webView;
String url = "";
double progress = 0;
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('InAppWebView Example'),
),
body: Container(
child: Column(children: <Widget>[
Container(
padding: EdgeInsets.all(20.0),
child: Text(
"CURRENT URL\n${(url.length > 50) ? url.substring(0, 50) + "..." : url}"),
),
Container(
padding: EdgeInsets.all(10.0),
child: progress < 1.0
? LinearProgressIndicator(value: progress)
: Container()),
Expanded(
child: Container(
margin: const EdgeInsets.all(10.0),
decoration:
BoxDecoration(border: Border.all(color: Colors.blueAccent)),
child: InAppWebView(
initialUrl: "https://flutter.dev/",
initialHeaders: {},
initialOptions: InAppWebViewGroupOptions(
crossPlatform: InAppWebViewOptions(
debuggingEnabled: true,
)
),
onWebViewCreated: (InAppWebViewController controller) {
webView = controller;
},
onLoadStart: (InAppWebViewController controller, String url) {
setState(() {
this.url = url;
});
},
onLoadStop: (InAppWebViewController controller, String url) async {
setState(() {
this.url = url;
});
},
onProgressChanged: (InAppWebViewController controller, int progress) {
setState(() {
this.progress = progress / 100;
});
},
),
),
),
ButtonBar(
alignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Icon(Icons.arrow_back),
onPressed: () {
if (webView != null) {
webView.goBack();
}
},
),
RaisedButton(
child: Icon(Icons.arrow_forward),
onPressed: () {
if (webView != null) {
webView.goForward();
}
},
),
RaisedButton(
child: Icon(Icons.refresh),
onPressed: () {
if (webView != null) {
webView.reload();
}
},
),
],
),
])),
),
);
}
}
Screenshot: