1 Introduction

With the WebView Flutter plugin, you can add a WebView widget/widget to your Flutter app for Android or iOS. In iOS, the WebView widget is powered by WKWebView ; in Android, the WebView widget is powered by WebView . This plugin can render Flutter widgets through web views. For example, a drop-down menu can be rendered by a web view.

What's Built
In this codelab, you'll use the Flutter SDK to build step-by-step a mobile app that includes a WebView. Your application will:

Display webpage content in WebView
Display stacked Flutter widgets through WebView
Respond to webpage loading progress events Control
WebView through WebViewController
Use NavigationDelegate Block websites
Evaluate JavaScript expressions
Use JavascriptChannels to handle JavaScript callbacks
Set, remove, add or display cookies
Loading and Display HTML from resources, files, or strings containing HTML
insert image description here

2. Set up your Flutter environment

You need two pieces of software to complete this codelab: the Flutter SDK and an editor .

You can run this codelab with any of the following devices:

A real mobile device (Android or iOS) connected to a computer and set to developer mode.
iOS Simulator (macOS only, and requires Xcode tools to be installed .)
Android Emulator (requires setup in Android Studio ).

3. start

Getting started with Flutter
You can create new Flutter projects in a number of ways, and both Android Studio and Visual Studio Code provide tools for this task. Follow the linked steps to create a project, or execute the following commands in the handy command-line terminal.

$ flutter create webview_in_flutter
Creating project webview_in_flutter...
[Listing of created files elided]
Wrote 81 files.

All done!
In order to run your application, type:

  $ cd webview_in_flutter
  $ flutter run

Your application code is in webview_in_flutter\lib\main.dart.

Adding the WebView Flutter plugin as a dependency
Using Pub packages makes it easy to add extra functionality to your Flutter app. In this codelab, you'll add the webview_flutter plugin to your project . Run the following command in terminal.

$ cd webview_in_flutter
$ flutter pub add webview_flutter
Resolving dependencies...
  async 2.8.1 (2.8.2 available)
  characters 1.1.0 (1.2.0 available)
  matcher 0.12.10 (0.12.11 available)
+ plugin_platform_interface 2.0.2
  test_api 0.4.2 (0.4.8 available)
  vector_math 2.1.0 (2.1.1 available)
+ webview_flutter 3.0.0
+ webview_flutter_android 2.8.0
+ webview_flutter_platform_interface 1.8.0
+ webview_flutter_wkwebview 2.7.0
Downloading webview_flutter 3.0.0...
Downloading webview_flutter_wkwebview 2.7.0...
Downloading webview_flutter_android 2.8.0...
Changed 5 dependencies!\

If you check the pubspec.yaml , you will now see that there is a line in the dependencies section of the webview_flutter plugin.

Configure Android minSDK

To use the webview_flutter plugin on Android, you need to set minSDK to 19 or 20, depending on which Android platform view you want to use. For more information on views for the Android platform, visit the webview_flutter plugin page. Modify the android/app/build.gradle file to look like this:

android/app/build.gradle

defaultConfig {
    // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
    applicationId "com.example.webview_in_flutter"
    minSdkVersion 20        // MODIFY
    targetSdkVersion 30
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
}

4. Add the WebView widget to your Flutter app

In this step, you'll add a WebView to your application. WebViews are hosted native views, and as an app developer, you can choose how to host these native views in your app. On Android, you can choose between virtual display mode (currently the default for Android) and hybrid integration mode. But iOS always uses hybrid integration mode.

For an in-depth look at the differences between virtual display mode and hybrid integration mode, see the documentation on Hosting native Android and iOS views in your Flutter app with Platform Views.

Put the WebView on the screen
Replace the contents of lib/main.dart with the following:

lib/main.dart

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({Key? key}) : super(key: key);

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

class _WebViewAppState extends State<WebViewApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: const WebView(
        initialUrl: 'https://flutter.dev',
      ),
    );
  }
}

When running the above code on iOS or Android, the WebView will be displayed as a full width browser window on your device, which means that the browser will be displayed full screen on the device without borders or margins of any kind. As you scroll, you'll see that some parts of the page may look a little odd. This is because JavaScript is currently disabled and is required to render flutter.dev properly.

Enabling Hybrid Integration Mode
If you want to use hybrid integration mode on your Android device, you only need to modify it slightly. Modify lib/main.dart to look like this:
lib/main.dart

import 'dart:io';                            // Add this import.
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({Key? key}) : super(key: key);

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

class _WebViewAppState extends State<WebViewApp> {
  // Add from here ...
  @override
  void initState() {
    if (Platform.isAndroid) {
      WebView.platform = SurfaceAndroidWebView();
    }
    super.initState();
  }
  // ... to here.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: const WebView(
        initialUrl: 'https://flutter.dev',
      ),
    );
  }
}

Don't forget to change minSdkVersion to 19 in build.gradle if you want to use hybrid integration mode platform view.

run the application

Run the Flutter app in iOS or Android to view the WebView, which displays the flutter.dev website. Alternatively, run the app in the Android Emulator or iOS Simulator. Feel free to replace the initial WebView URL used as an example with your own website.

$ flutter run

Assuming you have the appropriate emulator running, or a real device connected, after compiling and deploying your app to the device, you should see something like this:

insert image description here
References: (Vpn access required)
Add WebView to your Flutter application