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 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.
