WebView Widget in Flutter | Embed Websites Easily

WebView Widget in Flutter

WebView Widget in Flutter is still under development mode(as on 26.07.2019). However, apart from minor pending bugs, it’s a really useful widget to create and show websites in the flutter app with ease.

In this article, we will talk about using the WebView Widget plugin in Flutter and creating simple Webviews. We will require the flutter webview plugin even before we begin. It is

flutter_webview_plugin: ^0.3.5 

Use this inside the pubspec.yaml file under dependencies.

WebView Widget App Basics

Even before we begin, we will take the base template(A simple Stateful Widget) so that it becomes easy to look at the rest of the WebView components.

import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(WebViewApp());
class WebViewApp extends StatelessWidget {
@override Widget build(BuildContext context) {
return MaterialApp(title: 'Sample Webview Widget', home: WebViewWidget(), );
}
}
class WebViewWidget extends StatefulWidget {
WebViewWidget({
Key key
}): super(key: key);
@override _WebViewWidgetState createState() => _WebViewWidgetState();
}
class _WebViewWidgetState extends State {
@override void initState() {
super.initState();
}
@override Widget build(BuildContext context) {
return Scaffold();
}
}
  • To make use of the WebView Plugin, we will begin with adding it in the pubspec.yaml.
  • Once done, import the following to your main.dart file.
    import ‘package:flutter_webview_plugin/flutter_webview_plugin.dart’;

This will give access to the WebViewScaffold Widget(Custom Class name from the plugin. Very similar to the Scaffold Widget in Flutter). We will see more about it in the next section.

Using the WebViewScaffold Widget

WebViewScaffold Widget is going to give access to the basic WebView Widget(Native to Flutter) and on top of that provide a lot of additional controls like zoom, hide, etc. We will see all the available attributes below.

url

The most important attribute of the WebViewScaffold Widget. It takes in a string and will render the required website in the Flutter application. To access the Website, just pass the URL to this attribute like shown below.

WebviewScaffold(
url: "https://www.androidmonks.com",
)
appBar

The AppBar attribute is the similar to the Scaffold Widget‘s Appbar. It lets you create a simple Top Bar which can hold any title corresponding to the WebView.  Check out the example application in the next section for detailed use of AppBar widget inside WebViewScaffold.

withZoom

This attribute takes in a Boolean value and lets you have a zoom in and out control. It creates a simple button at the bottom through which Zoom can be done easily. It is a very handy attribute. To know more about this attribute, check out the next section with the example app.

withLocalStorage

Takes in a Boolean value. It allows storing the website data to the local storage. Particularly useful if the widget is going to allow download feature.

hidden

This attribute lets you decide if the WebView should be hidden or not.

initialChild

InitialChild attribute is used as a placeholder till the WebView gets loaded. In the background, it uses a FutureBuilder widget and waits for the URL to load and the website to be shown. This attribute will let you define the placeholder until it gets done.

By default, the circular progress indicator widget is shown.

WebView Example Application

The following code example creates the WebView Application using the webview_flutter_plugin.

import 'dart:async';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:flutter/material.dart';

void main() => runApp(WebViewApp());
class WebViewApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample Webview Widget',
home: WebViewWidget(),
);
}
}

class WebViewWidget extends StatefulWidget {
WebViewWidget({
Key key
}): super(key: key);

@override
_WebViewWidgetState createState() => _WebViewWidgetState();
}

class _WebViewWidgetState extends State {

@override
void initState() {
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Sample WebView Widget"),
backgroundColor: Colors.black45, ),
body: Center(
child: Column(
children: [
Container(
child: FlatButton(
child: Text("Open my Blog"),
onPressed: () {
print("in");
Navigator.push(context,
MaterialPageRoute(builder: (context) => WebView()));
}
), )
],
),
)

);

}
}

class WebView extends StatefulWidget {
WebView({
Key key
}): super(key: key);

@override
_WebViewState createState() => _WebViewState();
}

class _WebViewState extends State {

@override
void initState() {
super.initState();
}

@override
Widget build(BuildContext context) {
return WebviewScaffold(
url: "https://www.androidmonks.com",
appBar: AppBar(title: Text("Androidmonks"), ),
withZoom: true,
);
}
}

The application looks like below once run on the AVD.

WebView Widget Example Application
WebView Widget Example Application

WebView Widget like mentioned at the start, still has few bugs pending and hence is not released as part of the production build. It has got an ETA of October 2019 for providing all the required fixes.

Drop in any comments below.

“Learn and Be Curious”

Leave a Comment

Your email address will not be published. Required fields are marked *