Integrating a WebView in Flutter allows you to display web pages directly inside your app without opening an external browser. This is useful for loading websites, payment gateways, blogs, or dashboards.
In this guide, you’ll learn how to implement WebView in Flutter with a practical example.
🚀 What is WebView in Flutter?
A WebView is a widget that lets you display web content (HTML, CSS, JavaScript) inside a mobile app.
Flutter uses the official plugin:
- webview_flutter
📦 Step 1: Add Dependency
Open your pubspec.yaml file and add:
dependencies:
flutter:
sdk: flutter
webview_flutter: ^4.0.7
Then run:
flutter pub get
⚙️ Step 2: Platform Setup
✅ Android Setup
Go to:
android/app/src/main/AndroidManifest.xml
Add internet permission:
<uses-permission android:name="android.permission.INTERNET"/>
✅ iOS Setup
Open:
ios/Runner/Info.plist
Add:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
💻 Step 3: Basic WebView Example
Create a new Dart file:
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';class WebViewExample extends StatefulWidget {
const WebViewExample({super.key}); @override
State<WebViewExample> createState() => _WebViewExampleState();
}class _WebViewExampleState extends State<WebViewExample> {
late final WebViewController controller; @override
void initState() {
super.initState(); controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..loadRequest(Uri.parse('https://flutter.dev'));
} @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Flutter WebView"),
),
body: WebViewWidget(controller: controller),
);
}
}
🔑 Step 4: Enable JavaScript
To enable JavaScript:
controller.setJavaScriptMode(JavaScriptMode.unrestricted);
This is required for modern websites.
🔄 Step 5: Handle Navigation
You can control navigation like this:
controller.setNavigationDelegate(
NavigationDelegate(
onPageStarted: (url) {
print("Page started loading: $url");
},
onPageFinished: (url) {
print("Page finished loading: $url");
},
onNavigationRequest: (request) {
if (request.url.contains("youtube.com")) {
return NavigationDecision.prevent;
}
return NavigationDecision.navigate;
},
),
);
📊 Step 6: Show Loading Indicator
Add a loading spinner:
bool isLoading = true;controller.setNavigationDelegate(
NavigationDelegate(
onPageFinished: (url) {
setState(() {
isLoading = false;
});
},
),
);
UI:
Stack(
children: [
WebViewWidget(controller: controller),
if (isLoading)
const Center(child: CircularProgressIndicator()),
],
)
🔙 Step 7: Handle Back Button
Allow back navigation:
Future<bool> _onWillPop() async {
if (await controller.canGoBack()) {
controller.goBack();
return false;
}
return true;
}
Wrap with:
WillPopScope(
onWillPop: _onWillPop,
child: WebViewWidget(controller: controller),
)
🌐 Step 8: Load Local HTML
You can load HTML directly:
controller.loadHtmlString("""
<html>
<body>
<h1>Hello Flutter</h1>
</body>
</html>
""");
🔐 Step 9: Security Best Practices
- Avoid enabling JavaScript unnecessarily
- Restrict unknown URLs
- Use HTTPS websites only
- Validate user inputs in web forms
⚡ Common Use Cases
- In-app browser
- Payment gateway integration
- Display blog or CMS content
- Admin dashboards
- Help & support pages
❗ Common Issues & Fixes
1. WebView Not Loading
- Check internet permission
- Verify URL (https required)
2. Blank Screen
- Enable JavaScript
- Check SSL issues
3. Slow Performance
- Optimize website
- Avoid heavy scripts
🎯 Conclusion
Using WebView in Flutter is simple with the webview_flutter plugin. It allows you to seamlessly integrate web content into your app while maintaining full control over navigation and behavior.
0 Comments