interactive_webview 0.1.1+8

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 89

pub package

interactive_webview #

Plugin that allow Flutter to communicate with a native WebView.

Warning: This is not a display WebView. This plugin is designed to make communication between Flutter and WebView javascript. You can call a Javascript function; in the other hand, you can send messgage (postMessage) from Javascript to Flutter

  • Android: using JavascriptInterface
  • iOS: using WKUserContentController

Getting Started #

For help getting started with Flutter, view our online documentation.

How it works #

InteractiveWebView provide a singleton instance linked to one unique webview, so you can take control of the webview from anywhere in the app. You don't need to care where is the webview. It is hidden and automatically added to the keyWindow (iOS) and decorView (Android)

Load HTML string with/without a base url #

InteractiveWebView allow you to load an HTML string with different base url

final _webView = new InteractiveWebView();

_webView.loadHTML("<html><head></head><script> src='https://code.jquery.com/jquery-3.3.1.min.js'></script><body></body></html>", baseUrl: "https://www.google.com/");

by using base url, you can do some hacking work on Javascript such as embedding iframe and AJAX request from Javascript. Normally you cannot do these things if your base url is different from url you are requesting

Load url #

final _webView = new InteractiveWebView();

_webView.loadUrl("https://www.google.com/");

Listen for events #

final _webView = new InteractiveWebView();

_webView.stateChanged.listen((state) {
  // state.type: enum (didStatrt and didFinish)
  // state.url
});

_webView.didReceiveMessage.listen((message) {
  // message.name
  // message.data (should be a Map/List/String)
});

Call Javascript function #

final _webView = new InteractiveWebView();

_webView.evalJavascript("<your javascript function>");

Set restricted schemes #

Sometimes you want the webview to restrict from loading specific urls/schemes. You can archieve that by using:

final _webView = new InteractiveWebView();

_webView.setOptions(restrictedSchemes: <String>["google.com"]); // google.com will not allow to load in webview

How to post message from Javascript #

As mentioned above, you can post message from Javascript to Flutter.

Both iOS and Android defined a message handler called 'native':

  • iOS: you can access this handler by using webkit.messageHandlers.native
  • Android: you can access this handler by using window.native

So you only need to check which one is available in the webview, for example:

const nativeCommunicator = typeof webkit !== 'undefined' ? webkit.messageHandlers.native : window.native;

Then you can post message to Flutter

Warning: postMessage accepts String value only. So if you want to send an object/array, you need to using JSON.stringify to convert it to JSON string. InteractiveWebView will convert it back to Map/List respectively.

// send an array data
const array = [{name: "Hello"}, 1, true, "from", "WebView!!!"];
nativeCommunicator.postMessage(JSON.stringify(array));

// send and object data
const obj = {action: "my_action", text: "Hello from WebView!!!", number: 1, bool: false};
nativeCommunicator.postMessage(JSON.stringify(obj));

// send a text data
const text = "Hello from WebView!!!";
nativeCommunicator.postMessage(text);

To listen to post message from Flutter, you can use didReceiveMessage, see Listen for events

0.1.0 #

  • Create and publish plugin

0.1.1+2 #

  • Update API
  • Add example

0.1.1+3 #

  • Fixed iOS: WKWebView not calling didFinish

example/README.md

interactive_webview_example #

Demonstrates how to use the interactive_webview plugin.

Getting Started #

For help getting started with Flutter, view our online documentation.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  interactive_webview: ^0.1.1+8

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:interactive_webview/interactive_webview.dart';
  
Version Uploaded Documentation Archive
0.1.1+8 Jan 10, 2019 Go to the documentation of interactive_webview 0.1.1+8 Download interactive_webview 0.1.1+8 archive
0.1.1+7 Jan 4, 2019 Go to the documentation of interactive_webview 0.1.1+7 Download interactive_webview 0.1.1+7 archive
0.1.1+6 Nov 27, 2018 Go to the documentation of interactive_webview 0.1.1+6 Download interactive_webview 0.1.1+6 archive
0.1.1+5 Nov 17, 2018 Go to the documentation of interactive_webview 0.1.1+5 Download interactive_webview 0.1.1+5 archive
0.1.1+4 Nov 11, 2018 Go to the documentation of interactive_webview 0.1.1+4 Download interactive_webview 0.1.1+4 archive
0.1.1+3 Nov 8, 2018 Go to the documentation of interactive_webview 0.1.1+3 Download interactive_webview 0.1.1+3 archive
0.1.1+2 Nov 3, 2018 Go to the documentation of interactive_webview 0.1.1+2 Download interactive_webview 0.1.1+2 archive
0.1.1 Nov 3, 2018 Go to the documentation of interactive_webview 0.1.1 Download interactive_webview 0.1.1 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
80
Health:
Code health derived from static analysis. [more]
99
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
95
Overall:
Weighted score of the above. [more]
89
Learn more about scoring.

We analyzed this package on Jun 17, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.3.2
  • pana: 0.12.18
  • Flutter: 1.5.4-hotfix.2

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health issues and suggestions

Document public APIs. (-1 points)

23 out of 23 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Format lib/interactive_webview.dart.

Run flutter format to format lib/interactive_webview.dart.

Maintenance issues and suggestions

Support latest dependencies. (-5 points)

The version constraint in pubspec.yaml does not support the latest published versions for 1 dependency.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8