Tutorial

How To Embed Web Pages in Flutter with the WebView Plugin

Updated on March 18, 2021
How To Embed Web Pages in Flutter with the WebView Plugin

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:

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:

  1. flutter create flutter_webview_example

Navigate to the new project directory:

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

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:

lib/main.dart
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:

lib/home_page.dart
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".

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:

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({
     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:

lib/home_page.dart
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:

Screenshot of DigitalOcean website displaying within the Flutter application

After interacting with the Open Webpage button, you will see the DigitalOcean 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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more