How to Use WebView in Flutter Application

WebView in Flutter allows you to display web content (HTML pages, websites, web apps) directly inside your mobile application. It is very useful when you want to show privacy policy pages, payment gateways, web dashboards, or any external website inside your Flutter app without opening a browser.

In this complete guide, you will learn:

✅ What is WebView in Flutter
✅ How to install WebView plugin
✅ How to load a website in Flutter WebView
✅ How to load local HTML files
✅ How to handle navigation & back button
✅ How to enable JavaScript
✅ Best practices for production apps

---

What is WebView in Flutter?

A WebView is a widget that allows you to embed a web browser inside your Flutter application. It can load:

• External websites (https://example.com)
• Local HTML files
• Web apps
• Payment pages
• Terms & Conditions pages
• Admin panels or dashboards

Flutter uses official plugins to support WebView functionality.

---

Best WebView Plugin for Flutter (2026)

The most recommended and official plugin is:

✅ webview_flutter

Package name:

webview_flutter

Pub.dev link:
https://pub.dev/packages/webview_flutter

---

Step 1: Add WebView Dependency

Open your pubspec.yaml file and add:

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.4.2

Then run:

flutter pub get

---

Step 2: Android & iOS Setup

Android Configuration

Open:

android/app/src/main/AndroidManifest.xml

Add Internet permission:

<uses-permission android:name="android.permission.INTERNET"/>

For Android 9+ (HTTP websites), allow cleartext traffic:

<application
    android:usesCleartextTraffic="true"
    ...
>

---

iOS Configuration

Open:

ios/Runner/Info.plist

Add:

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

---

Step 3: Basic WebView Example

Here is a simple Flutter WebView example:

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

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

  @override
  State<WebViewPage> createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();

    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse('https://www.google.com'));
  }

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

---

Step 4: Enable JavaScript in WebView

JavaScript is disabled by default. To enable:

controller.setJavaScriptMode(JavaScriptMode.unrestricted);

⚠️ Use unrestricted mode carefully for security reasons.

---

Step 5: Handle Back Button in WebView

To handle Android back button:

Future<bool> _onWillPop() async {
  if (await controller.canGoBack()) {
    await controller.goBack();
    return false;
  }
  return true;
}

Use it with:

return WillPopScope(
  onWillPop: _onWillPop,
  child: WebViewWidget(controller: controller),
);

---

Step 6: Show Loading Progress

double progress = 0;

controller.setNavigationDelegate(
  NavigationDelegate(
    onProgress: (int value) {
      setState(() {
        progress = value / 100;
      });
    },
  ),
);

Add progress bar:

if (progress < 1.0)
  LinearProgressIndicator(value: progress),

---

Step 7: Load Local HTML File

Add HTML file

Create folder:

assets/html/index.html

Update pubspec.yaml:

flutter:
  assets:
    - assets/html/index.html

Load it:

controller.loadFlutterAsset('assets/html/index.html');

---

Step 8: Open External Links in Browser

NavigationDelegate(
  onNavigationRequest: (request) {
    if (request.url.contains('youtube.com')) {
      return NavigationDecision.prevent;
    }
    return NavigationDecision.navigate;
  },
);

---

Common Use Cases

• Privacy Policy page
• Payment Gateway (Razorpay, Stripe, Paytm Web)
• Admin panel inside app
• Blog or website content
• Hybrid mobile apps

---

Best Practices (Important for Production)

✅ Use HTTPS URLs only
✅ Restrict JavaScript when not needed
✅ Validate URLs before loading
✅ Handle network errors
✅ Show loading indicators
✅ Use navigation delegate for security
✅ Test on real devices

---

Common Errors & Fixes

WebView not loading on Android

✔ Add INTERNET permission

White screen on iOS

✔ Update Info.plist

HTTP blocked

✔ Enable cleartext traffic (Android)

---

Conclusion

Flutter WebView is a powerful feature that allows you to integrate web content directly into your mobile app. Using the webview_flutter package, you can easily load websites, local HTML files, and even full web apps inside your Flutter application.

This is perfect for building hybrid apps, payment flows, and content-based apps.