Flutter: WebView - a simple demo

A step-by-step demo of a basic implementation of webview_flutter, a Flutter plugin that provides a WebView widget on Android and iOS.

webview_flutter is avaliable for iOS and Android platforms. On iOS the WebView widget is backed by a WKWebView. On Android the WebView widget is backed by a WebView.

Step 1 - Installation and configuration

To install the webview_flutter package run:

flutter pub add webview_flutter

You will be able to import the package in your code using:

import 'package:webview_flutter/webview_flutter.dart';

To use the webview_flutter plugin on Android you need to set the minSDK to 19 or 20, depending which Android Platform View you want to use.

Modify your android/app/build.gradle file as follows:

  minSdkVersion 20
  targetSdkVersion 30

Step 2 - Basic webview

For a basic webview implementation you should follow three steps:

1. Define a WebViewController:

late final WebViewController controller;

2. Instatiate the controller, inside insitState method, and set the properties for loadRequest method with the url you want to open.

controller = WebViewController()
    ..loadRequest(Uri.parse('https://flutter.dev'));

3. And inside the build method pass the controller to a WebViewWidget:

WebViewWidget(controller: controller)

Full code:

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

void main() {
  runApp(
    const MaterialApp(
      home: WebViewApp(),
    ),
  );
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  late final WebViewController controller;

  @override
  void initState() {
    controller = WebViewController()
      ..loadRequest(Uri.parse('https://flutter.dev'));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: WebViewWidget(controller: controller),
    );
  }
}

You can also view step 2 code at github.

Step 3 - Activate javascript

If you want to activate javascript, just add setJavaScriptMode:

..setJavaScriptMode(JavaScriptMode.unrestricted)

You can see step 3 code at github.

Step 4 - Restrict navigation to url

setNavigationDelegate method sets the NavigationDelegate containing the callback methods that are called during navigation events.

These callbacks can be used for accepting or rejecting navigation changes, and for tracking the progress of navigation requests.

So we can compare the navigation url with the url we want navigation be restricted to, and if it's different prevent navigation.

Full code:

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

void main() {
  runApp(
    const MaterialApp(
      home: WebViewApp(),
    ),
  );
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  late final WebViewController controller;
  String url = 'https://flutter.dev';

  @override
  void initState() {
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(
        NavigationDelegate(
          onNavigationRequest: (navigation) {
            if (navigation.url != url) {
              return NavigationDecision.prevent;
            }
            return NavigationDecision.navigate;
          },
        ),
      )
      ..loadRequest(Uri.parse(url));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}

See step 4 code at github.

If you want to restrict navigation to a domain or a sub-path, you can change the if condition to something like:

if (!navigation.url.startsWith('https://flutter.dev'))

I hope this demos can be useful to you!

Cheers,

Paulo