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.
To complete this tutorial, you will need:
This tutorial was verified with Flutter v1.22.2, Android SDK v30.0.2, and Android Studio v4.1.
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:
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
.
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
:
import 'package:flutter/material.dart';
import 'home_page.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
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:
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
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"
.
WebView
PluginThe 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:
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({
this.title,
this.selectedUrl,
});
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.digitalocean.com/
. Use Navigator.push
with selectedUrl
set to "https://www.digitalocean.com/"
.
Revisit home_page.dart
and add MyWebView
:
import 'package:flutter/material.dart';
import my_webview.dart;
class HomePage extends StatelessWidget {
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: "DigitalOcean",
selectedUrl: "https://www.digitalocean.com",
)
));
},
),
),
);
}
}
Compile your code and have it run in an emulator:
After interacting with the Open Webpage button, you will see the DigitalOcean website displayed in your Flutter application.
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.
Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.
Sign up