WebView In Flutter

Mohit Kumar

22 March 2024

In this blog, we will discuss how we can achieve Webview in our flutter app. WebViews are mobile components where HTML content is rendered over a browser inside a mobile app. We will use the

webview_flutter plugin to show web pages in our app.

webview_flutter is a Flutter plugin. It provides a WebView widget on Android and iOS. WebView widget has the following properties.

You may also visit our Flutter app development company page for more information.

Properties of WebView

onWebViewCreated: This function is invoked once when the web view is created.

initialUrl: The initial URL of the web resource.

javascriptMode: It is used to enable JavaScript in the WebView.

javascriptChannels: The set of JavascriptChannels available to JavaScript code running in the WebView.

navigationDelegate: A delegate function that decides how to handle navigation actions.

onPageStarted: This function is invoked when a page starts loading.

onPageFinished: This function is invoked when a page has finished loading.

onProgress: This function invoked when a page loading started.

debuggingEnabled: It is use to Controls debugging in WebView by doing its value true but the default debuggingEnabled is false.

gestureNavigationEnabled: A Boolean value indicating whether horizontal swipe gestures will trigger back-forward list navigations. Its default value is false.

allowsInlineMediaPlayback: Inline playback of HTML5 videos controlled by this property on iOS. Android allows it by default. Its default value is false.

zoomEnabled: It indicates whether the WebView should support zooming using its on-screen zoom controls and gestures. Its default value is true.

backgroundColor: The background color of the WebView.

Step to integrate WebView in Flutter

Step-1 -> Firstly, add the webview_flutter dependency in the pubspec.yaml file.

  webview_flutter: ^4.2.3

1	webview_flutter: ^4.2.3

Step– 2 -> Run ‘flutter pub get‘ command.

After this, we are ready to write our code.

main.dart

import 'package:flutter/material.dart';
import 'package:webview_flutter_demo/CommonWebView.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: const MyHomePage(title: 'Flutter WebView'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State&lt;MyHomePage&gt; createState() =&gt; _MyHomePageState();
}

class _MyHomePageState extends State&lt;MyHomePage&gt; {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
 
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: &#091;
            MaterialButton(
              color: Colors.blue,
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) =&gt; CommonWebView(
                            url: "https://flutter.dev", title: "Flutter")));
              },
              child: Text(
                'https://flutter.dev',
                style: TextStyle(fontSize: 16),
              ),
            ),
            MaterialButton(
              color: Colors.blue,
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) =&gt; CommonWebView(
                            url:
                                "https://en.wikipedia.org/wiki/Flutter_(software)",
                            title: "Wikipedia")));
              },
              child: Text(
                "https://en.wikipedia.org/wiki/Flutter",
                style: TextStyle(fontSize: 16),
              ),
            )
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

import 'package:webview_flutter_demo/CommonWebView.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

home: const MyHomePage(title: 'Flutter WebView'),

);

}

class MyHomePage extends StatefulWidget {

const MyHomePage({Key? key, required this.title}) : super(key: key);

final String title;

@override

State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(widget.title),

body: Padding(

padding: const EdgeInsets.all(8.0),

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

crossAxisAlignment: CrossAxisAlignment.stretch,

children: [

MaterialButton(

color: Colors.blue,

onPressed: () {

Navigator.push(

context,

MaterialPageRoute(

builder: (context) => CommonWebView(

url: "https://flutter.dev", title: "Flutter")));

child: Text(

'https://flutter.dev',

style: TextStyle(fontSize: 16),

MaterialButton(

color: Colors.blue,

onPressed: () {

Navigator.push(

context,

MaterialPageRoute(

builder: (context) => CommonWebView(

url:

"https://en.wikipedia.org/wiki/Flutter_(software)",

title: "Wikipedia")));

child: Text(

"https://en.wikipedia.org/wiki/Flutter",

style: TextStyle(fontSize: 16),

)

);

}

Webview Back Navigation:

common_webview.dart



import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class CommonWebView extends StatefulWidget {
  final String url;
  final String title;
  CommonWebView({required this.url, required this.title});
  @override
  _CommonWebViewState createState() =&gt; _CommonWebViewState();
}

class _CommonWebViewState extends State&lt;CommonWebView&gt; {
  WebViewController? _controller;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
              leading: BackButton(
              onPressed: () {
                backNavigationHandler();
              },
            ),
        title: Text(widget.title),
      ),
        body: WebView(
           zoomEnabled: true ,
           initialUrl: widget.url,
           javascriptMode: JavascriptMode.unrestricted,
           onWebViewCreated: (WebViewController webViewController){
             _controller = webViewController;
             },
          )
    );
  }
}

import 'package:flutter/material.dart';

import 'package:webview_flutter/webview_flutter.dart';

class CommonWebView extends StatefulWidget {

final String url;

final String title;

CommonWebView({required this.url, required this.title});

@override

_CommonWebViewState createState() => _CommonWebViewState();

}

class _CommonWebViewState extends State<CommonWebView> {

WebViewController? _controller;

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

leading: BackButton(

onPressed: () {

backNavigationHandler();

title: Text(widget.title),

body: WebView(

zoomEnabled: true ,

initialUrl: widget.url,

javascriptMode: JavascriptMode.unrestricted,

onWebViewCreated: (WebViewController webViewController){

_controller = webViewController;

)

);

}

While running the app, you may face issue related to minSdkVersion. To solve this issue, you should correct the value of minSdkVersion in android/app/build.gradle.

android {
    defaultConfig {
        minSdkVersion 19
    }
}

android {

defaultConfig {

minSdkVersion 19

}

The output of the code is –

Conclusion

In this blog, we have read about the WebView in Flutter.

I hope it will help you out in understanding and getting a brief idea about flutter Webview. You can also check our other blog here.

Thank you for reading!!!