Flutter WebView Integration Example

This article explains you how you can integrate webview in your flutter applications to display existing web content with the help of example.

WebView is used when we want to display website content in our mobile applications without using external browser application. So we do not need to write code for website page if we use webview in our application. WebView is better solution for creating mobile application for an existing web application.

WebView is mobile component in which HTML content is rendered over a browser embedded. It allows us to display web content as part of our mobile application UI. WebView also provides control over web page lifecycle with the help of event listeners. We can provide same content to both web and mobile platforms using WebView.

We are using package called webview_flutter to integrate webview in our flutter application. This package is developed by core flutter team. This package provides WebView widget which we can add under any widget in widget tree. So first we need to add this package in our application.

 

Add required dependency for flutter webview in pubspec.yaml file

After adding below line in your pubspec.yaml file, press pub get option to install dependency if you are using android studio. For Visual Studio Code you need to save file for dependency.

webview_flutter: ^0.3.20
 
 

Changes for iOS

We need to add following key in Info.plist file to use webview in iOS platform.

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>
 
 

Changes for Android

We need to add following attribute in our android manifest file called AndroidManifest.xml to use webview in android platform. Otherwise you will get “net::err_cleartext_not_permitted” error when displaying content in WebView.

android:usesCleartextTraffic=”true”
 
 

Integrate Flutter WebView Widget

WebView widget is backed by a WKWebView in ios and WebView in android. WebView widget provides different parameters like initialUrl, javascriptMode, onWebViewCreated etc. initialUrl parameter is used to submit our specific url. javascriptMode parameter is used to enable or disable javascript in our webview. JavaScript is disabled in our webview by default.

WebViewController is used to perform other tasks after website page is fully loaded in webview. We can also open another url after initial url with the help of WebViewController.

import ‘dart:async’;
import ‘package:flutter/material.dart’;
import ‘package:webview_flutter/webview_flutter.dart’;

class WebViewPage extends StatefulWidget {

final String title;

WebViewPage({this.title});

@override
_WebViewPageState createState() => _WebViewPageState();

}

class _WebViewPageState extends State<WebViewPage> {

final Completer<WebViewController> _controller = Completer<WebViewController>();

@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text(widget.title),
        ),
        body: Column(
            children: [
                Expanded(
                    child: WebView(
                        initialUrl: ‘https://codingwithdhrumil.com/’,
                        javascriptMode: JavascriptMode.unrestricted,
                        onWebViewCreated: (WebViewController webViewController) {
                            _controller.complete(webViewController);
                        },
                    ),
                ),
            ],
        ),
    );
}
}

 
 
 
flutter webview
 
 

Leave a Reply