Table of Contents
Introduction
The WebView plugin allows you to display a webpage within your Flutter application.
In this tutorial, you will create a custom Widget that can be used throughout your application to launch a WebView from anywhere.
Prerequisites
To complete this tutorial, you will need:
- To download and install Flutter.
- To download and install Android Studio _or_ Visual Studio Code.
- It is recommended to install plugins for your code editor:
Flutterextension installed for Visual Studio Code.
This tutorial was verified with Flutter v1.22.2, Android SDK v30.0.2, and Android Studio v4.1.
Step 1 — Setting Up the Project
Once you have your environment set up for Flutter, you can run the following to create a new application:
flutter create <^>flutter_webview_example<^>
Navigate to the new project directory:
cd <^>flutter_webview_example<^>
Using flutter create will produce a demo application that will display the number of times a button is clicked.
Open pubspec.yaml in your code editor and add the following plugin:
[label pubspec.yaml]
dependencies:
flutter:
sdk: flutter
<^>webview_flutter: ^1.0.5<^>
With this setup complete, you can create the widget that will trigger and display the WebView.
Step 2 — Scaffolding the Project
Next, you will need to update the main.dart file and create a new home_page.dart file.
Open main.dart in your code editor and import home_page.dart and change the home from MyHomePage to HomePage:
[label lib/main.dart]
import 'package:flutter/material.dart';
<^>import 'home_page.dart';<^>
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: <^>HomePage()<^>,
);
}
}
Then, create a new home_page.dart file and add the following code:
[label lib/home_page.dart]
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: () {},
),
),
);
}
}
Compile your code and have it run in an emulator. This code will create a FlatButton with the message "Open Webpage".
Step 3 — Using the WebView Plugin
The next step will be to create a StatelessWidget named MyWebView to display WebView data.
Create a new my_webview.dart file and add the following code:
[label lib/my_webview.dart]
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);
},
));
}
}
For this tutorial, you will navigate the user to https://www.progressiverobot.com/. Use Navigator.push with selectedUrl set to "https://www.progressiverobot.com/;.
Revisit home_page.dart and add MyWebView:
[label lib/home_page.dart]
import 'package:flutter/material.dart';
<^>import my_webview.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: () {
<^>Navigator.of(context).push(MaterialPageRoute(<^>
<^>builder: (BuildContext context) => MyWebView(<^>
<^>title: "the cloud provider",<^>
<^>selectedUrl: "https://www.progressiverobot.com/",<^>
<^>)<^>
<^>));<^>
},
),
),
);
}
}
Compile your code and have it run in an emulator:
After interacting with the Open Webpage button, you will see the the cloud provider website displayed in your Flutter application.
Conclusion
In this tutorial, you used the WebView package to display a webpage in your Flutter application.
If you'd like to learn more about Flutter, check out our Flutter topic page for exercises and programming projects.
