Tutorial
Flutter: How to Use the WebView Plugin
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.
Displaying webpages inside of your Flutter applications is easy with the use of the WebView
plugin. In our example application, we’ll look at how to create a custom Widget
that can be used throughout our application to launch a WebView
from anywhere.
Creating a new Flutter Project
As always, we’ll start off by setting up a new project and adding the plugin:
# New Flutter project
$ flutter create my_webview_project
# Open this up inside of VS Code
$ cd my_webview_project && code .
Adding the WebView plugin
Next up, we’ll need to add the webview_flutter
plugin within our pubspec.yaml
:
dependencies:
flutter:
sdk: flutter
webview_flutter: ^0.3.14+1
We’ll then need to add the appropriate values to our Info.plist
, opting into the embedded views preview:
<key>io.flutter.embedded_views_preview</key>
<true/>
That’s all the required plugin preparation, we can now open our application up in the iOS or Android simulator.
Scaffolding our Project
We can now update main.dart
to contain our HomePage
widget that we’ll create in a second:
import 'package:flutter/material.dart';
import 'package:my_webview_project/home_page.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter WebView',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage());
}
}
The HomePage
widget will simply consist of a FlatButton
with an onPressed
event:
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home Page"),
),
body: Center(
child: FlatButton(
child: Text("Open Webpage"),
onPressed: () {},
),
),
);
}
}
Using the WebView Plugin
Let’s create a StatelessWidget
named MyWebView
which we can use to navigate a user to this page whenever we want to display WebView
data:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class MyWebView extends StatelessWidget {
final String title;
final String selectedUrl;
final Completer<WebViewController> _controller =
Completer<WebViewController>();
MyWebView({
@required this.title,
@required this.selectedUrl,
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: WebView(
initialUrl: selectedUrl,
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
));
}
}
If we wanted to navigate the user to https://alligator.io
, we could therefore use Navigator.push
with the selectedUrl
equal to https://alligator.io
. Let’s update our FlatButton
within the HomePage
:
child: FlatButton(
child: Text("Open Webpage"),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (BuildContext context) => MyWebView(
title: "Alligator.io",
selectedUrl: "https://alligator.io",
)));
},
),
And there we have it! Here’s our WebView
showing the Alligator homepage: