Render web pages using the Flutter WebView plugin

Google created Flutter to simplify the way we create apps, enabling our apps to run on different platforms without porting code or rewriting our existing apps.

This is not easy to do because each native operating system is unique in its own way and there are so many of them. Google can’t support all of them. So Google made Flutter configurable in a way that plug-ins could be developed by other developers.

Now, one common widget we have is the WebView widget. This WebView widget allows us to load web pages.

How do we use this same part in Flutter when we need it? Flutter. Dev solves this problem for us. They developed a Flutter plugin for this purpose: it is webview_flutter.

What is Flutter WebView?

Webview_flutter is a Flutter plugin that provides a WebView widget on Android and iOS. This plugin is designed to display web pages on Android and iOS devices.

In this article, we will learn how to use webview_flutter in a Flutter project.

We will learn how to load web pages from their URLS or local sources using the webview_FLUTTER plugin.

requirements

We are going to build a Flutter project, so we need to have some tools installed on our machine.

Flutter

This is a Flutter SDK for running and compiling Flutter projects. Please go to the Documentation for Flutter and select the Flutter SDK based on your operating system.

• Windows
• macOS
• Linux
• Chrome OS

These links contain instructions on how to install the Flutter SDK on your machine. After installation, make sure that Flutter is in your global path. Run Flutter –help to test whether the Flutter SDK is installed and globally accessible on your machine.

VS code

VS Code is a powerful modern Code editor that Microsoft has brought to us. It has an extension that helps you easily use Flutter in VS Code. Install the extension to Flutter in your VS Code.

Android Studio

If you want to run and test your applications in Android, you need to have Android Studio installed on your machine. Then we need to install the Flutter and Dart plug-ins.

• Flutter plug-in
• The Dart plug-in

Make sure everything is installed and running. In the next section, we will set up a Flutter project.

Set up your Flutter project

Now we will create a Flutter project. We will use the Flutter CLI tool to do this. The name of our Flutter project will be WebViewprj. Run the following command.

flutter create webviewprj

Copy the code

Flutter will create a project in the folder webViewprj and then install dependencies. Open the project in VS Code. If you don’t use VS Code, you can do everything from the terminal, but you have to open the project in your favorite Code editor.

cd webviewprj

Copy the code

If you’re using VS Code, you don’t need to do this. Just go to “View” in the top menu and click “Terminal” to open VS Code’s integration terminal.

addwebview_flutterdependency

Next, we will add webview_FLUTTER dependencies to our project.

Open the pubspec.yaml file in your project root directory and add the following lines.

dependencies:
  flutter:
    sdk: flutter
  webview_flutter:

Copy the code

Saving the pubspec.yaml file will cause VS Code to install the dependency. If you are not using VS Code, run the following command on your terminal to install the webview_FLUTTER dependencies.

flutter pub get webview_flutter

Copy the code

The FLUTTER pub contains commands for managing flutter packages.

The flutter pub get gets the package in the flutter project. In this case, it gets the webView_FLUTTER package in our Flutter project.

Next, we set up the minimum SDK version required for the WebView_FLUTTER plugin. Open Android /app/build.gradle in your project and add the following configuration code in the Android → defaultConfig section.

android {
    defaultConfig {
        minSdkVersion 19
    }
}

Copy the code

Webview_flutter is available from Android V19 up to the latest Android version.

usewebview_flutter

Webview_flutter outputs a WebView class. This class starts and creates a new Web view and renders the configured Web page (via its URL) within the WebView widget. A WebView can use a WebViewController, which is passed to the onWebViewCreated callback once the WebView is created. To render the WebView widget, we need to import the webView_flutter package.

import 'package:webview_flutter/webview_flutter.dart';

Copy the code

We then render the WebView widget like this.

WebView(
    initialUrl: 'https://medium.com'
);

Copy the code

This loads the page [https://medium.com](https://medium.com) and renders it in the WebView Widget. The WebView widget renders [https://medium.com](https://medium.com) just as the browser renders the page. The parameters that the WebView passes to initialUrl tell the WebView the URL of the web page to load and render. There are other parameters that we can pass to the WebView. Let’s take a look at the following.

Note that the following parameters and their descriptions are excerpted from the WebView library documentation.

• onWebViewCreatedThis is a function that will be called once the network view is created.
• initialUrlThis is a string that holds the URL of a web page for loading and rendering on the WebView.
• javascriptModeThis sets whether JavaScript is enabled in the WebView.
• javascriptChannels: available for JavaScript code running in WebViewJavascriptChannels 。
• navigationDelegateA delegate function that decides how to handle navigation actions
• onPageStarted: is called when a page starts loading.
• onPageFinished: is called when the page has finished loading.
• onProgress: is called when a page is loading.
• debuggingEnabled: Controls whether to enable WebView debugging. By default, it is set tofalse
• gestureNavigationEnabled: A Boolean value indicating whether the horizontal swipe gesture triggers the backward list navigation. By default, it is set tofalse
• allowsInlineMediaPlayback: Controls whether to allow inline HTML5 video playback on iOS. This field is ignored on Android because Android allows it by default. Its default value isfalse

Note that the javascriptMode and autoMediaPlaybackPolicy parameters cannot be empty.

Create the widget page

Now, we will create two widget pages in our application: HomePage and WebViewPage. The HomePage page will contain two buttons. When each button is clicked, the WebViewPage page opens. This WebViewPage page will render a WebView, passing the URL of the web page to the WebView Widget.

Let’s create them. Already, Flutter generates some code for us. We will cancel the other widgets except the MyApp Widget. Open the lib/main.dart file and edit it to the following code.

import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; import 'dart:io'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: HomePage() ); }}Copy the code

See, we render a HomePage in the MyApp Widget. This causes HomePage to appear when the application is opened.

Let’s code the HomePage Widget.

class HomePage extends StatelessWidget { void _handleURLButtonPress(BuildContext context, String url, String title) { Navigator.push(context, MaterialPageRoute(builder: (context) => WebViewPage(url, title))); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("WebView Flutter Example"), ), body: Center( child: Column( children: [ MaterialButton( color: Colors.blue, child: Text( "Open pub.dev", style: TextStyle(color: Colors.white70, fontWeight: FontWeight.bold), ), onPressed: () { _handleURLButtonPress( context, "https://pub.dev", "pub.dev"); }, ), MaterialButton( color: Colors.blue, child: Text( "Open Medium.com", style: TextStyle(color: Colors.white70, fontWeight: FontWeight.bold), ), onPressed: () { _handleURLButtonPress( context, "https://medium.com", "Medium.com"); }, ), ], )), ); }}Copy the code

Look, this HomePage renders two buttons, the MaterialButton. Each button is set to call the function _handleURLButtonPress when clicked.

The first button, Open pub.dev, calls _handleURLButtonPress, via context, “https://pub.dev”, and “pub.dev”. https://pub.dev” is the URL of the web page loaded and rendered by the WebView. Pub. dev” will be the AppBar title WebViewPage.

The second button, Open Medium.com, will call the function _handleURLButtonPress with the context argument. [https://medium.com.com](https://medium.com.com)(WebView the URL of the page that the widget will load and render), and Medium.com (the title of the WebViewPage page).

The function _handleURLButtonPress launches the WebViewPage Widget page. It passes the URL and title of the web page to the WebViewPage.

Let’s code the WebViewPage widget.

class WebViewPage extends StatefulWidget { final String url; final String title; WebViewPage(this.url, this.title); @override WebViewPageState createState() => WebViewPageState(this.url, this.title); } class WebViewPageState extends State<WebViewPage> { final String url; final String title; WebViewPageState(this.url, this.title); @override void initState() { super.initState(); // Enable hybrid composition. if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(this.title), ), body: Column(children: [ Expanded( child: WebView( initialUrl: this.url, javascriptMode: JavascriptMode.unrestricted ) ) ]) ); }}Copy the code

WebViewPage is a stateful part, and WebPageState is the logical and internal state of WebViewPage.

The WebViewPage constructor accepts the URL and title. It passes it to WebViewPageState in the createState method.

When WebViewPageState renders the WebView, it passes the initialUrl to the WebView with this.url as its value.

JavascriptMode JavaScript mode is set to javascriptMode. Unrestricted. This JavaScript mode enables web pages to run JavaScript.

Run the application

At this point, we are done coding. We will run the application. To do this, run the following command on your terminal.

flutter run

Copy the code

If you’re using VS Code, right click lib/main.dart and then Run Without Debugging or Start Debugging.

Note, make sure your emulator is running.

This will compile the application and run it on your phone’s emulator.

The home page

Click to enterOpen pub.dev

Click on theOpen Medium.com

conclusion

We’ve learned a lot in this tutorial.

First, we will introduce WebView and how to port it to Flutter. Next, we introduced webview_FLUTTER. We also learned how to set up a Flutter project and install webview_flutter dependencies. Later, We set up a widget to render and display web site (https://blog.logrocket.com) and [https://blog.logrocket.com] [https://logrocket.com](https://logrocket.com) on a WebView widget from the WebView_FLUTTER plugin.

With this webview_FLUTTER plugin, we will be able to render and display web pages in our Flutter application.

See the source code at GitHub.

The resources

• Webview_flutter: v2.0.10
• Web view class

The postRender webpages using the Flutter WebView pluginappeared first onLogRocket Blog.