flutter_inappwebview
A Flutter plugin that allows you to add an inline webview, to use a headless webview, and to open an in-app browser window.
Top Related Projects
File picker plugin for Flutter, compatible with mobile (iOS & Android), Web, Desktop (Mac, Linux, Windows) platforms with Flutter Go support.
WebRTC plugin for Flutter Mobile/Desktop/Web
Flutter Community Plus Plugins
SQLite flutter plugin
Quick Overview
Flutter InAppWebView is a powerful Flutter plugin that allows developers to embed and control web content within their Flutter applications. It provides a rich set of features for integrating web views, including JavaScript execution, cookie management, and custom schemes handling.
Pros
- Offers a wide range of customization options for web views
- Supports both Android and iOS platforms
- Provides advanced features like JavaScript injection and custom URL schemes
- Actively maintained with regular updates and bug fixes
Cons
- Can be complex to set up for advanced use cases
- May have performance implications for heavy web content
- Documentation can be overwhelming due to the extensive feature set
- Some features may require platform-specific implementations
Code Examples
- Basic WebView implementation:
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
InAppWebView(
initialUrlRequest: URLRequest(url: Uri.parse("https://flutter.dev")),
onWebViewCreated: (controller) {
// WebView created
},
)
- JavaScript execution:
controller.evaluateJavascript(source: """
document.body.style.backgroundColor = 'red';
""");
- Handling custom URL schemes:
InAppWebView(
initialUrlRequest: URLRequest(url: Uri.parse("https://example.com")),
onLoadStart: (controller, url) {
if (url.toString().startsWith("myapp://")) {
// Handle custom URL scheme
}
},
)
Getting Started
- Add the dependency to your
pubspec.yaml
:
dependencies:
flutter_inappwebview: ^5.7.2+3
- Import the package in your Dart file:
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
- Use the
InAppWebView
widget in your Flutter app:
InAppWebView(
initialUrlRequest: URLRequest(url: Uri.parse("https://example.com")),
onWebViewCreated: (controller) {
// WebView created
},
onLoadStop: (controller, url) {
// Page finished loading
},
)
Competitor Comparisons
File picker plugin for Flutter, compatible with mobile (iOS & Android), Web, Desktop (Mac, Linux, Windows) platforms with Flutter Go support.
Pros of flutter_file_picker
- Focused specifically on file picking functionality, making it more lightweight and specialized
- Supports a wide range of file types and multiple file selection
- Easier to implement for simple file picking tasks
Cons of flutter_file_picker
- Limited to file picking functionality, lacking the broader web-related features of flutter_inappwebview
- May require additional plugins for more complex file handling or web interactions
Code Comparison
flutter_file_picker:
FilePickerResult? result = await FilePicker.platform.pickFiles();
if (result != null) {
File file = File(result.files.single.path!);
}
flutter_inappwebview:
InAppWebViewController? webViewController;
webViewController?.loadUrl(urlRequest: URLRequest(url: Uri.parse("https://example.com")));
The code snippets demonstrate the core functionality of each plugin. flutter_file_picker focuses on file selection, while flutter_inappwebview provides web view capabilities.
flutter_file_picker is ideal for projects that primarily need file picking functionality, offering a straightforward API for this specific task. On the other hand, flutter_inappwebview is more suitable for applications requiring in-app web browsing and advanced web-related features, but may be overkill for simple file picking operations.
WebRTC plugin for Flutter Mobile/Desktop/Web
Pros of flutter-webrtc
- Specialized for WebRTC functionality, offering more comprehensive support for real-time communication features
- Provides direct access to WebRTC APIs, allowing for more fine-grained control over audio/video streams
- Actively maintained with regular updates and improvements specific to WebRTC use cases
Cons of flutter-webrtc
- Limited to WebRTC-specific functionality, lacking general web content rendering capabilities
- May require more setup and configuration for basic web-related tasks compared to a full-featured WebView solution
- Smaller community and ecosystem compared to more general-purpose WebView plugins
Code Comparison
flutter-webrtc:
final _localRenderer = RTCVideoRenderer();
final _remoteRenderer = RTCVideoRenderer();
await _localRenderer.initialize();
await _remoteRenderer.initialize();
final offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);
flutter_inappwebview:
InAppWebView(
initialUrlRequest: URLRequest(url: Uri.parse("https://example.com")),
onWebViewCreated: (controller) {
webViewController = controller;
},
onLoadStop: (controller, url) {
// Page loaded
},
)
The code snippets highlight the different focus areas of each library. flutter-webrtc deals with WebRTC-specific concepts like peer connections and video rendering, while flutter_inappwebview provides a more general-purpose WebView implementation for loading and displaying web content.
Flutter Community Plus Plugins
Pros of plus_plugins
- Broader range of functionality with multiple plugins for various features
- Maintained by the Flutter Community, potentially ensuring better long-term support
- Consistent API design across different plugins
Cons of plus_plugins
- May require multiple plugin imports for different functionalities
- Potentially larger overall package size if using multiple plugins
- Less specialized for in-app WebView functionality compared to flutter_inappwebview
Code Comparison
flutter_inappwebview:
InAppWebView(
initialUrlRequest: URLRequest(url: Uri.parse("https://example.com")),
onWebViewCreated: (controller) {
// WebView created
},
)
plus_plugins (webview_flutter_plus):
WebViewPlus(
initialUrl: "https://example.com",
onWebViewCreated: (controller) {
// WebView created
},
)
The code snippets show that both libraries offer similar basic functionality for creating a WebView, with slight differences in syntax and naming conventions. flutter_inappwebview uses InAppWebView
and initialUrlRequest
, while plus_plugins (specifically webview_flutter_plus) uses WebViewPlus
and initialUrl
. Both provide an onWebViewCreated
callback for handling WebView creation.
SQLite flutter plugin
Pros of sqflite
- Specialized for SQLite database operations in Flutter
- Lightweight and focused on database functionality
- Supports transactions and batch operations
Cons of sqflite
- Limited to SQLite databases only
- Lacks web browsing capabilities
- No support for JavaScript execution or DOM manipulation
Code Comparison
sqflite example:
final Database database = await openDatabase(
join(await getDatabasesPath(), 'doggie_database.db'),
onCreate: (db, version) {
return db.execute('CREATE TABLE dogs(id INTEGER PRIMARY KEY, name TEXT, age INTEGER)');
},
version: 1,
);
flutter_inappwebview example:
InAppWebView(
initialUrlRequest: URLRequest(url: Uri.parse("https://example.com")),
onWebViewCreated: (InAppWebViewController controller) {
webViewController = controller;
},
)
Summary
sqflite is a specialized SQLite plugin for Flutter, offering efficient database operations. flutter_inappwebview, on the other hand, provides a full-featured in-app browser experience. While sqflite excels in database management, it lacks the web browsing and JavaScript capabilities of flutter_inappwebview. The choice between these libraries depends on whether your project requires database functionality or web content display and interaction.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Flutter InAppWebView Plugin
A Flutter plugin that allows you to add an inline webview, to use an headless webview, and to open an in-app browser window.
New Version 6.x.x is OUT NOW!
Migrating from version 5.x.x
is easy! Follow the online Migration guide.
Articles/Resources
- Official documentation: inappwebview.dev/docs
- Read the online API Reference to get the full API documentation.
- Official blog: inappwebview.dev/blog
- Find open source projects on the Official Showcase page: inappwebview.dev/showcase
- Check the flutter_inappwebview_examples repository for project examples
- Check the flutter_inappwebview/example/integration_test/webview_flutter_test.dart file for other code examples
- Flutter Browser App: A Full-Featured Mobile Browser App (such as the Google Chrome mobile browser) created using Flutter and the features offered by the flutter_inappwebview plugin
Showcase - Who use it
Check the Showcase page to see an open list of Apps built with Flutter and Flutter InAppWebView.
Are you using the Flutter InAppWebView plugin and would you like to add your App there?
Send a submission request to the Submit App page!
Requirements
- Dart sdk: ">=2.17.0 <4.0.0"
- Flutter: ">=3.0.0"
- Android:
minSdkVersion >= 19
,compileSdk >= 34
, AGP version>= 7.3.0
(use Android Studio - Android Gradle plugin Upgrade Assistant for help), support forandroidx
(see AndroidX Migration to migrate an existing app) - iOS 9.0+:
--ios-language swift
, Xcode version>= 14.3
- MacOS 10.11+: Xcode version
>= 14.3
Installation
Add flutter_inappwebview
as a dependency in your pubspec.yaml file.
Installation - Web support
To make it work properly on the Web platform, you need to add the web_support.js
file inside the <head>
of your web/index.html
file:
<head>
<!-- ... -->
<script type="application/javascript" src="/assets/packages/flutter_inappwebview_web/assets/web/web_support.js" defer></script>
<!-- ... -->
</head>
Support
Did you find this plugin useful? Please consider to make a donation to help improve it!
Contributors â¨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
Top Related Projects
File picker plugin for Flutter, compatible with mobile (iOS & Android), Web, Desktop (Mac, Linux, Windows) platforms with Flutter Go support.
WebRTC plugin for Flutter Mobile/Desktop/Web
Flutter Community Plus Plugins
SQLite flutter plugin
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot