[Android] Using WebView in Flutter

foreword

Consider a situation where you want to display some content already on your website on your application. That content could be some user agreement page or some payment page or something. So you can build the whole page by writing the logic of the whole page and then use it in your application. The second thing you can do is display your website's content in your app, and you're good to go. The best part is, you don't need to use some browser application to open this webpage. That way, you'll end up saving hours of writing code for that page in your app.

Even many applications are using this feature. For example, whenever you perform some payment operation on any application, you will notice one thing, during the payment process, a web page will be loaded and you will make the payment there. The advantage of this is that we don't need to write the payment code again for the mobile application. Since you're dealing with money, it's better to display already tested webpages and transact than to write code again.

So, in order to display some web pages in your app, you can use a plugin called webview_flutter built by the Flutter team. In this blog, we will learn how to use this plugin to display a web page.

The webview_flutter plugin provides a WebView widget. On iOS, the WebView widget is backed by a WKWebView and on Android, the WebView widget is powered by WebView. So, let's learn how to use it.

set item

Create a new Flutter project. Name: flutter_webview_example
Below is the project structure. So you set up your project by creating the required folders (src) and files (main.dart, app.dart, webview_container.dart).

add dependencies

To use webview_flutter, you need to add its dependencies. So, in your pubspec.yaml file, add the following dependencies:

dependencies:
  webview_flutter: ^0.3.20

Note: When adding dependencies, please provide proper indentation, otherwise you will end up with errors.

Now install the dependencies by saving the file (if you are using VS Code) or by pressing the pub get option (in Android Studio) install dependencies. Additionally, you can use Flutter to install packages from the command line:

$ flutter pub get

Additional settings for iOS

To use WebView on iOS, open the Info.plist file and add the following to the file's element:

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

Now, we are done with the dependencies part. Let's move on to the coding part.

coding part

Open the main.dart file and add the following code:

import 'package:flutter/material.dart';
import 'package:flutter_webview_example/src/app.dart';

void main() => runApp(App());

Now, create a new folder called src and under this folder create two files app.dart namely webview_container.dart. This app.dart file will be used to provide this file with the URL to load and the AppBar's Title webview_container.dart. The webview_container.dart file is responsible for adding the WebView to display the required URLs in the application.

Here's the code for that app.dart file:

import 'package:flutter/material.dart';
import 'package:flutter_webview_example/src/webview_container.dart';

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebViewContainer('https://blog.mindorks.com', 'MindOrks'),
    );
  }
}

Here we return a MaterialApp and provide the URL and title to the WebViewContainer class. The code for the webview_container.dart file is:

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

class WebViewContainer extends StatefulWidget {
  final url;
  final title;
  WebViewContainer(this.url, this.title);
  @override
  createState() => _WebViewContainerState(this.url, this.title);
}

class _WebViewContainerState extends State<WebViewContainer> {
  var _url;
  var _title;
  final _key = UniqueKey();
  _WebViewContainerState(this._url, this._title);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_title),
      ),
      body: Column(
        children: [
          Expanded(
            child: WebView(
              key: _key,
              javascriptMode: JavascriptMode.unrestricted,
              initialUrl: _url,
            ),
          ),
        ],
      ),
    );
  }
}

In the above code you can see that we are using WebView widget and inside that widget we are using initialUrl to open the desired URL. You can also enable or disable JavaScript in the WebView using the javascriptMode parameter used above. JavaScript is disabled in WebView by default.

Other than that, you can use WebView in WebViewController. WebViewController will be returned as soon as the WebView is fully constructed. So, by using this controller, you can perform various actions like load another URL or get current URL, add URL to favorites, etc. Here is an example WebViewController:

WebViewController _controller;
WebView(
  initialUrl: 'https://blog.mindorks.com',
  onWebViewCreated: (WebViewController webViewController) {
    _controller = webViewController;
  },
);
//...After some operations:
_controller.loadUrl('https://mindorks.com');

It's all about using WebViews in Flutter.