How to Use the WebView Plugin in Flutter
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:
step-1) open command terminal
# 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://sites.google.com/view/geeky-traveller/, we could therefore use Navigator.push with the selectedUrl equal to https://sites.google.com/view/geeky-traveller/. 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: "Geeky Traveller",
selectedUrl: "https://sites.google.com/view/geeky-traveller/",
)));
},
),
And there we have it! Here’s our WebView showing the geeky traveller homepage:
