webview_flutter_plus 0.1.1+9

  • Readme
  • Changelog
  • Example
  • Installing
  • 93

webview_flutter_plus #

Contents #

About #

webview_flutter_plus is a powerful extension of webview_flutter. This package helps to load Local HTML, CSS and Javascript content from Assets or Strings. This inherits all features of webview_flutter with minor API changes.

Do check flutter_tex a powerful implementation of this package.

What's unique in webview_flutter_plus #

  • Load HTML, CSS and Javascript content from Assets, see example.
  • Load HTML, CSS and Javascript content from Strings, see example.
  • Get height of Web content which will allow you to use WebviewPlus widget even in list view, see example.
  • It includes all features of its parent plugin webview_flutter.

How to use? #

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

dependencies:
  webview_flutter_plus: ^0.1.1+9

2: You can install packages from the command line:

$ flutter packages get

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

3: Now you need to put the following implementations in Android and iOS respectively.

Android #

Make sure to add this line android:usesCleartextTraffic="true" in your <project-directory>/android/app/src/main/AndroidManifest.xml under application like this.

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

Required Permissions are:

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

iOS #

Add following code in your <project-directory>/ios/Runner/Info.plist

<key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key> <true/>
  </dict>
<key>io.flutter.embedded_views_preview</key> <true/> 

4: Now in your Dart code, you can use:

import 'package:webview_flutter_plus/webview_flutter_plus.dart'; 

5: Now you can use WebViewPlus as a widget:

Examples #

Loading From String

WebViewPlus(
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (controller) {
      controller.loadString(r"""
           <html lang="en">
            <body>hello world</body>
           </html>
      """);
    },
  )

Loading from Assets

It is mandatory to mention all associated HTML, CSS and Javascript files in pubspecs.yaml under assets:

WebViewPlus(
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (controller) {
      controller.loadUrl('assets/index.html');
    },
  )

Use in ListView

WebViewPlusController also allows you to get WebViewPlus height like controller.getWebviewPlusHeight()

WebViewPlusController _controller;
double _height = 1;

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text('ListView Example'),
  ),
  body: ListView(
    children: [
      SizedBox(
        height: _height,
        child: WebViewPlus(
          onWebViewCreated: (controller) {
            this._controller = controller;
            controller.loadUrl('assets/index.html');
          },
          onPageFinished: (url) {
            _controller.getWebviewPlusHeight().then((double height) {
              print("Height:  " + height.toString());
              setState(() {
                _height = height;
              });
            });
          },
          javascriptMode: JavascriptMode.unrestricted,
        ),
      )
    ],
  ),
);
}

Plus APIs #

WebViewPlusController controller;

  • controller.loadUrl('path/to/index.html') load HTML content from Assets.
  • controller.loadString(r"<html>HTML, CSS and Javascript code in raw string</html>"); load HTML, CSS and Javascript Code from a String.
  • controller.getWebviewPlusHeight() returns height of WebViewPlus.

API differences from webview_flutter #

There are very minor API differences as following.

webview_flutterwebview_flutter_plus
WebViewWebViewPlus
WebViewPlusControllerWebViewPlusController
WebViewCreatedCallbackWebViewPlusCreatedCallback

Rest everything is same as webview_flutter.

[0.1.1+9] - Jul 5, 2020 #

  • Minor changes.

[0.1.1+8] - Jul 1, 2020 #

  • Minor changes.

[0.1.1+7] - Jul 1, 2020 #

  • Minor changes.

[0.1.1+6] - June 5, 2020 #

  • Minor api changes.
  • controller.loadUrl() can be used to load file from assets.

[0.1.1+6] - June 5, 2020 #

  • CodeInjection removed due to poor performance.

[0.1.1+5] - June 5, 2020 #

  • Minor API changes

[0.1.1+4] - June 3, 2020 #

  • Minor Api Changes for

[0.1.1+3] - June 1, 2020 #

  • Minor Fixes

[0.1.1+2] - June 1, 2020 #

  • CodeInjection added

[0.1.1+1] - June 1, 2020 #

  • Minor fixes.

[0.1.1] - May 30, 2020 #

  • getWebviewPlusHeight() method added in WebViewPlusController

[0.1.0] - May 30, 2020 #

  • Minor fixes

[0.0.1] - May 30, 2020 #

  • initial release.
  • loadString and loadAssets APIs are added.

example/lib/main.dart

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

void main() {
  runApp(WebViewPlusExample());
}

class WebViewPlusExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebViewPlusExampleMainPage(),
    );
  }
}

class WebViewPlusExampleMainPage extends StatefulWidget {
  @override
  _WebViewPlusExampleMainPageState createState() =>
      _WebViewPlusExampleMainPageState();
}

class _WebViewPlusExampleMainPageState
    extends State<WebViewPlusExampleMainPage> {
  WebViewPlusController _controller;
  double _height = 1000;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('webview_flutter_plus Example'),
      ),
      body: ListView(
        children: [
          SizedBox(
            height: 500,
            child: WebViewPlus(
              initialUrl: 'assets/index.html',
              onWebViewCreated: (controller) {
                this._controller = controller;
              },
              onPageFinished: (url) {
                _controller.getHeight().then((double height) {
                  print("Height: " + height.toString());
                  setState(() {
                    _height = height;
                  });
                });
              },
              javascriptMode: JavascriptMode.unrestricted,
            ),
          )
        ],
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  webview_flutter_plus: ^0.1.1+9

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:webview_flutter_plus/webview_flutter_plus.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
86
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
93
Learn more about scoring.

We analyzed this package on Jul 14, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.15
  • Flutter: 1.17.5

Analysis suggestions

Package does not support Flutter platform Linux

Because:

  • package:webview_flutter_plus/webview_flutter_plus.dart that imports:
  • package:webview_flutter_plus/src/webview_flutter_plus.dart that imports:
  • package:webview_flutter/webview_flutter.dart that declares support for platforms: Android, iOS

Package does not support Flutter platform Web

Because:

  • package:webview_flutter_plus/webview_flutter_plus.dart that imports:
  • package:webview_flutter_plus/src/webview_flutter_plus.dart that imports:
  • package:webview_flutter/webview_flutter.dart that declares support for platforms: Android, iOS

Package does not support Flutter platform Windows

Because:

  • package:webview_flutter_plus/webview_flutter_plus.dart that imports:
  • package:webview_flutter_plus/src/webview_flutter_plus.dart that imports:
  • package:webview_flutter/webview_flutter.dart that declares support for platforms: Android, iOS

Package does not support Flutter platform macOS

Because:

  • package:webview_flutter_plus/webview_flutter_plus.dart that imports:
  • package:webview_flutter_plus/src/webview_flutter_plus.dart that imports:
  • package:webview_flutter/webview_flutter.dart that declares support for platforms: Android, iOS

Package not compatible with SDK dart

Because:

  • webview_flutter_plus that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
flutter 0.0.0
mime ^0.9.6+3 0.9.6+3
webview_flutter ^0.3.22+1 0.3.22+1
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test