Flutter WebView Implementation : Open any Webpage in Mobile

Do you want to display any web page on android or iOS devices? If yes then you have come to the right place. In this entire tutorial, you will learn how to display different web pages on android or iOS devices using the great flutter webview package webview_flutter.

What is Flutter WebView?

Suppose you have a responsive web page and you want to display the in app you have built for android and iOS devices. Then you have to use a package webview_flutter to display. The page you are showing on the mobile devices is WebView. It means the same design and the same webpage will be displayed on the mobile app.

How to add a Webview in Flutter?

Before adding Webview()  in the flutter you have to first add the package webview_flutter to the package’s pubspec.yaml. Use the below line to add the package in the dependencies.

webview_flutter: ^3.0.1

You can also add the package using the flutter command.

flutter pub add webview_flutter

How to use WebView in Flutter?

Let’s create a webview in a flutter. You have to call the WebView() constructor with the intialUrl attribute. It is for the webview_flutter package. Run the below lines of code to create a flutter webview.

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

class FlutterWebViewApp extends StatefulWidget {
  const FlutterWebViewApp({Key? key}) : super(key: key);

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

class _FlutterWebViewAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: WebView(
          initialUrl: "https://www.codethebest.com/",
        ),
      ),
    );
  }
}

void main() {
  runApp(FlutterWebViewApp());
}

Output

How to manipulate Flutter Webview

If you are using the webview_flutter package for displaying URLs then you can easily manipulate the display using the various attributes provided by the WebView() constructor. We will discuss most of them here.

By default, javascript mode is restricted for the web view URL. The attribute javascriptMode.unrestricted enables to run Javascript on the URL.

javascriptMode: JavascriptMode.unrestricted,

Now you are able to click anything on the website and the page will respond.

2. zoomEnabled

It accepts a boolean value and allows you to zoom the webpage using the on-screen zoom controls and gestures.

3. userAgent

Just like you sent userAgenet in the header of the HTML file. You can also send userAgent on the header to the webview. It is of string type.

userAgenet: "'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/62.0.3202.94 Mobile Safari/537.36'"

4. onProgress

Suppose you want to show the progress bar until the webpage is fully loaded to the screen. The attribute onProgress allows you to do so.  For example, I want to display a circular progress bar until the web page loading is in progress.

Stack(
          children: [
            WebView(
                initialUrl: "https://www.codethebest.com/",
                javascriptMode: JavascriptMode.unrestricted,
                zoomEnabled: true,
                onProgress: (finish) {
                  setState(() {
                    isLoading = false;
                  });
                }),
            isLoading
                ? Center(
                    child: CircularProgressIndicator(),
                  )
                : Stack()
          ],
        ),

Here the flutter stack will be used to show the progress indicator above the webview.

Conclusion

Webview allows you to convert any mobile responsive web application to an android app. There are also various manipulations you can do with the webview_flutter packager. But most of them are defined here.

I hope you have liked this tutorial. If you have any suggestions or queries then you can contact us for more help.