How to use WebView in Flutter App

December 10, 2020

151

Flutter web view provides an easy way to embed already existing web page inside a Flutter app with less no of code. This is just like the other Flutter widget and you can directly use that in your application

Adding a WebView to Flutter App

First, need to add a dependency to your pubspec.yaml

    
dependencies:
  webview_flutter: ^1.0.7

Next, run the following command to install the package

    
flutter pub get

Next Import following code inside the dart file to use the widget

    
import 'package:webview_flutter/webview_flutter.dart';

You can Just use WebView widget with setting the initialUrl property to load your website inside the app.

    
WebView(
  initialUrl: 'https://flutter.io',
)

Enable Javascript in Webview

Default Javascript is disabled in the Flutter webview. But you can enable Javascript with a single line of code. Just set the JavascriptMode.unrestricted to the javascriptMode property.

    
WebView(
  initialUrl: 'https://flutter.io',
  javascriptMode: JavascriptMode.unrestricted,
)

Load webpage when click a button

You can control the functionality of the webview using WebViewController. When the webview full loaded it return the webViewController and you set your controller to access those options.

    
     WebViewController _webviewController;

     WebView(
            initialUrl: '',
            onWebViewCreated: (WebViewController webViewController) {
              _webviewController = webViewController;
            },
          )

You can keep the initialUrl as an empty and set that later on using the _webviewController.

    
     RaisedButton(
          child: Text("Load Flutter"),
          onPressed: () {
            _webviewController.loadUrl("https://flutter.io");
          },
        )

Adding Previous an Forward actions

If you move inside a page inside the website and if you want to go backward of history, you can use goBack method in WebViewController. Also if need to go forward of the history you can use goForward method.

    
        RaisedButton(
              child: Text("Forward"),
              onPressed: () {
                _webviewController.goForward();
              },
            )

       RaisedButton(
              child: Text("Back"),
              onPressed: () {
                _webviewController.goBack();
              },
            )

Get title of the webpage

you can use getTitle() method to access the website name which has specified under the HTML title tag.

    
         RaisedButton(
              child: Text("Title"),
              onPressed: () {
                _webviewController.getTitle().then((value) => {
                      print(value)
                });
              },
            )

Access DOM inside the Application

You can access or manipulate DOM by setting JS code to evaluateJavascript in the WebViewController. In this example, I will share a code to access the Button name using the class name of the button. This is a very powerful method if you want to manipulate DOM inside your Flutter application.

    
        RaisedButton(
              child: Text("Button Text"),
              onPressed: () {
                _webviewController
.evaluateJavascript("document.getElementsByClassName('btn-cta')[0].text;")
.then((value) => {
                  print(value)
                });
              },
            )

Clear WebView cache

By default, webview will cache the required data to improve the performance of the web application. But in case you want to manually clear the cache you can use clearCache method of the WebViewController.

    
      RaisedButton(
              child: Text("Clear cache"),
              onPressed: () {
                _webviewController.clearCache();
              },
            )

Reload current URL

You can use the reload method of the WebViewController to reload the current URL

    
      RaisedButton(
              child: Text("Reload"),
              onPressed: () {
                _webviewController.reload();
              },
            )

Scroll to a certain position

scrollTo will give feasibility to Scroll the webpage based on the x and y position.

    
      RaisedButton(
              child: Text("Scroll"),
              onPressed: () {
                _webviewController.scrollTo(0,400);
              },
            )

Conclusion

Hope you got a better idea about how to add webview in Flutter and control different functionalities like javascript, backward, foward, clear cache etc.

You Will Like Also

Flutter