Convert Figma logo to code with AI

pichillilorenzo logoflutter_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.

3,141
1,461
3,141
1,100

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

2,855

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

  1. Basic WebView implementation:
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://flutter.dev")),
  onWebViewCreated: (controller) {
    // WebView created
  },
)
  1. JavaScript execution:
controller.evaluateJavascript(source: """
  document.body.style.backgroundColor = 'red';
""");
  1. 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

  1. Add the dependency to your pubspec.yaml:
dependencies:
  flutter_inappwebview: ^5.7.2+3
  1. Import the package in your Dart file:
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
  1. 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.

2,855

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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Flutter InAppWebView Plugin Share on Twitter Share on Facebook

InAppWebView-logo

All Contributors

Pub Pub Points Pub Popularity Pub Likes Awesome Flutter License

Donate to this project GitHub forks GitHub stars

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

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

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):

Alex Li
Alex Li

💻
1/2
1/2

💻
Christofer Bodin
Christofer Bodin

💻
Matthew Lloyd
Matthew Lloyd

💻
C E
C E

💻
Robson Araujo
Robson Araujo

💻
Ryan
Ryan

💻
CodeEagle
CodeEagle

💻
Tanay Neotia
Tanay Neotia

💻
Jamie Joost
Jamie Joost

💻
Matias de Andrea
Matias de Andrea

💻
YouCii
YouCii

💻
Salnikov Sergey
Salnikov Sergey

💻
Po-Jui Chen
Po-Jui Chen

💻
Manuito
Manuito

💻
setcy
setcy

💻
EArminjon
EArminjon

💻
Ashank Bharati
Ashank Bharati

💻
Michael Chow
Michael Chow

💻
Osvaldo Saez
Osvaldo Saez

💻
rsydor
rsydor

💻
Le Minh Hoang
Le Minh Hoang

💻
Michael Kao
Michael Kao

💻
cloudygeek
cloudygeek

💻
Christoph Eck
Christoph Eck

💻
Ser1ous
Ser1ous

💻
Caleb Jones
Caleb Jones

💻
Saverio Murgia
Saverio Murgia

💻
Trần Đức Tâm
Trần Đức Tâm

💻
Joker
Joker

💻
Yash Chandra Verma
Yash Chandra Verma

💻
Arne Kepp
Arne Kepp

💻
Ömral Cörüt
Ömral Cörüt

💻
LrdHelmchen
LrdHelmchen

💻
Steven Gunanto
Steven Gunanto

💻
Michael Rittmeister
Michael Rittmeister

💻
Akira Aratani
Akira Aratani

💻
Doflatango
Doflatango

💻
Edmund Tay
Edmund Tay

💻
Andrei Diaconu
Andrei Diaconu

💻
Daniel Kao
Daniel Kao

💻
xuty
xuty

💻
Ben Bieker
Ben Bieker

💻
Phạm Như Vũ
Phạm Như Vũ

💻
SebastienBtr
SebastienBtr

💻
NeZha
NeZha

💻
Jan Klinge
Jan Klinge

💻
PauloDurrerMelo
PauloDurrerMelo

💻
benmeemo
benmeemo

💻
cinos
cinos

💻
Rex Raphael
Rex Raphael

💻
Jan Henrik Høiland
Jan Henrik Høiland

💻
Iguchi Tomokatsu
Iguchi Tomokatsu

💻
Jonas Uekötter
Jonas Uekötter

📖
emakar
emakar

💻
liasica
liasica

💻
Eiichiro Adachi
Eiichiro Adachi

💻
Kamil Powałowski
Kamil Powałowski

💻
Akio Yamamoto
Akio Yamamoto

💻
mohenaxiba
mohenaxiba

💻
Ben Anderson
Ben Anderson

💻
Daan Poron
Daan Poron

🛡️
ふぁ
ふぁ

💻
perffecto
perffecto

💻
Chandra Abdul Fattah
Chandra Abdul Fattah

💻
Aleksandar Lugonja
Aleksandar Lugonja

💻
Alexandre Richonnier
Alexandre Richonnier

💻
Sunbreak
Sunbreak

💻
Eric Lee
Eric Lee

📖
KhatibFX
KhatibFX

💻
Guide.inc
Guide.inc

💻
Niraj Nandish
Niraj Nandish

💻
nesquikm
nesquikm

💻
Andreas Gangsø
Andreas Gangsø

💻
Alexandru Terente
Alexandru Terente

💻
Dango Mango
Dango Mango

💻
Max Zimmermann
Max Zimmermann

💻
Alexandru Dochioiu
Alexandru Dochioiu

💻
YumengNevix
YumengNevix

💻
lrorpilla
lrorpilla

💻
Michal Šrůtek
Michal Šrůtek

💻
daisukeueta
daisukeueta

💻

This project follows the all-contributors specification. Contributions of any kind welcome!