flutter_webview_plugin 0.1.5

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

pub package

flutter_webview_plugin

Plugin that allow Flutter to communicate with a native WebView.

Getting Started

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

How it works

Launch WebView Fullscreen with Flutter navigation

new MaterialApp(
      routes: {
        "/": (_) => new WebviewScaffold(
              url: "https://www.google.com",
              appBar: new AppBar(
                title: new Text("Widget webview"),
              ),
            )
      },
    );

FlutterWebviewPlugin provide a singleton instance linked to one unique webview, so you can take control of the webview from anywhere in the app

listen for events

final flutterWebviewPlugin = new FlutterWebviewPlugin();

flutterWebviewPlugin.onUrlChanged.listen((String url) {
  
});

Hidden WebView

final flutterWebviewPlugin = new FlutterWebviewPlugin();  

flutterWebviewPlugin.launch(url, hidden: true);

Close launched WebView

flutterWebviewPlugin.close();

Webview inside custom Rectangle

final flutterWebviewPlugin = new FlutterWebviewPlugin();  

flutterWebviewPlugin.launch(url,
                  fullScreen: false,
                  rect: new Rect.fromLTWH(
                      0.0, 
                      0.0, 
                      MediaQuery.of(context).size.width, 
                      300.0));

Webview Events

  • Stream<Null> onDestroy
  • Stream<String> onUrlChanged
  • Stream<WebViewStateChanged> onStateChanged
  • Stream<String> onError

Don't forget to dispose webview flutterWebviewPlugin.dispose()

Webview Functions

Future<Null> launch(String url,
         {bool withJavascript: true,
         bool clearCache: false,
         bool clearCookies: false,
         bool hidden: false,
         bool enableAppScheme: true,
         Rect rect: null,
         String userAgent: null,
         bool withZoom: false,
         bool withLocalStorage: true});
Future<String> evalJavascript(String code);
Future<Map<String, dynamic>> getCookies();
Future<Null> resize(Rect rect);

0.1.5

  • iOS use WKWebView instead of UIWebView

0.1.4

  • support localstorage for ANDROID

0.1.3

  • support zoom in webview

0.1.2

  • support bottomNavigationBar and persistentFooterButtons on webview scaffold

0.1.1

  • support back button navigation for Android
    • if cannot go back, it will trigger onDestroy
  • support preview dart2

0.1.0+1

  • fix Android close webview

0.1.0

  • iOS && Android:

    • get cookies
    • eval javascript
    • user agent setting
    • state change event
    • embed in rectangle or fullscreen if null
    • hidden webview
  • Android

    • adding Activity in manifest is not needed anymore
  • Add WebviewScaffold

0.0.9

  • Android: remove the need to use FlutterActivity as base activity

0.0.5

  • fix "onDestroy" event for iOS #4
  • fix fullscreen mode for iOS #5

0.0.4

  • IOS implementation
  • Update to last version of Flutter

0.0.3

  • Documentation

0.0.2

  • Initial version for Android

example/lib/main.dart

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

const kAndroidUserAgent =
    "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Mobile Safari/537.36";

String selectedUrl = "https://flutter.io";

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter WebView Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: {
        "/": (_) => new MyHomePage(title: "Flutter WebView Demo"),
        "/widget": (_) => new WebviewScaffold(
              url: selectedUrl,
              appBar: new AppBar(
                title: new Text("Widget webview"),
              ),
              withZoom: true,
              withLocalStorage: true,
            )
      },
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // Instance of WebView plugin
  final flutterWebviewPlugin = new FlutterWebviewPlugin();

  // On destroy stream
  StreamSubscription _onDestroy;

  // On urlChanged stream
  StreamSubscription<String> _onUrlChanged;

  // On urlChanged stream
  StreamSubscription<WebViewStateChanged> _onStateChanged;

  TextEditingController _urlCtrl = new TextEditingController(text: selectedUrl);

  TextEditingController _codeCtrl =
      new TextEditingController(text: "window.navigator.userAgent");

  GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey();

  final _history = [];

  @override
  initState() {
    super.initState();

    flutterWebviewPlugin.close();

    _urlCtrl.addListener(() {
      selectedUrl = _urlCtrl.text;
    });

    // Add a listener to on destroy WebView, so you can make came actions.
    _onDestroy = flutterWebviewPlugin.onDestroy.listen((_) {
      if (mounted) {
        // Actions like show a info toast.
        _scaffoldKey.currentState
            .showSnackBar(new SnackBar(content: new Text("Webview Destroyed")));
      }
    });

    // Add a listener to on url changed
    _onUrlChanged = flutterWebviewPlugin.onUrlChanged.listen((String url) {
      if (mounted) {
        setState(() {
          _history.add("onUrlChanged: $url");
        });
      }
    });

    _onStateChanged =
        flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged state) {
      if (mounted) {
        setState(() {
          _history.add("onStateChanged: ${state.type} ${state.url}");
        });
      }
    });
  }

  @override
  void dispose() {
    // Every listener should be canceled, the same should be done with this stream.
    _onDestroy.cancel();
    _onUrlChanged.cancel();
    _onStateChanged.cancel();

    flutterWebviewPlugin.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      key: _scaffoldKey,
      appBar: new AppBar(
        title: new Text('Plugin example app'),
      ),
      body: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          new Container(
            padding: const EdgeInsets.all(24.0),
            child: new TextField(controller: _urlCtrl),
          ),
          new RaisedButton(
            onPressed: () {
              flutterWebviewPlugin.launch(selectedUrl,
                  rect: new Rect.fromLTWH(
                      0.0, 0.0, MediaQuery.of(context).size.width, 300.0),
                  userAgent: kAndroidUserAgent);
            },
            child: new Text("Open Webview (rect)"),
          ),
          new RaisedButton(
            onPressed: () {
              flutterWebviewPlugin.launch(selectedUrl, hidden: true);
            },
            child: new Text("Open 'hidden' Webview"),
          ),
          new RaisedButton(
            onPressed: () {
              flutterWebviewPlugin.launch(selectedUrl);
            },
            child: new Text("Open Fullscreen Webview"),
          ),
          new RaisedButton(
            onPressed: () {
              Navigator.of(context).pushNamed("/widget");
            },
            child: new Text("Open widget webview"),
          ),
          new Container(
            padding: const EdgeInsets.all(24.0),
            child: new TextField(controller: _codeCtrl),
          ),
          new RaisedButton(
            onPressed: () {
              Future<String> future =
                  flutterWebviewPlugin.evalJavascript(_codeCtrl.text);
              future.then((String result) {
                setState(() {
                  _history.add("eval: $result");
                });
              });
            },
            child: new Text("Eval some javascript"),
          ),
          new RaisedButton(
            onPressed: () {
              setState(() {
                _history.clear();
              });
              flutterWebviewPlugin.close();
            },
            child: new Text("Close"),
          ),
          new RaisedButton(
            onPressed: () {
              flutterWebviewPlugin.getCookies().then((m) {
                setState(() {
                  _history.add("cookies: $m");
                });
              });
            },
            child: new Text("Cookies"),
          ),
          new Text(_history.join("\n"))
        ],
      ),
    );
  }
}

1. Depend on it

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


dependencies:
  flutter_webview_plugin: "^0.1.5"

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

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

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
        
Version Uploaded Documentation Archive
0.1.5 Apr 1, 2018 Go to the documentation of flutter_webview_plugin 0.1.5 Download flutter_webview_plugin 0.1.5 archive
0.1.4 Mar 25, 2018 Go to the documentation of flutter_webview_plugin 0.1.4 Download flutter_webview_plugin 0.1.4 archive
0.1.3 Mar 11, 2018 Go to the documentation of flutter_webview_plugin 0.1.3 Download flutter_webview_plugin 0.1.3 archive
0.1.2 Mar 3, 2018 Go to the documentation of flutter_webview_plugin 0.1.2 Download flutter_webview_plugin 0.1.2 archive
0.1.1 Feb 24, 2018 Go to the documentation of flutter_webview_plugin 0.1.1 Download flutter_webview_plugin 0.1.1 archive
0.1.0+1 Jan 28, 2018 Go to the documentation of flutter_webview_plugin 0.1.0+1 Download flutter_webview_plugin 0.1.0+1 archive
0.1.0 Jan 28, 2018 Go to the documentation of flutter_webview_plugin 0.1.0 Download flutter_webview_plugin 0.1.0 archive
0.0.9+1 Dec 7, 2017 Go to the documentation of flutter_webview_plugin 0.0.9+1 Download flutter_webview_plugin 0.0.9+1 archive
0.0.9 Nov 7, 2017 Go to the documentation of flutter_webview_plugin 0.0.9 Download flutter_webview_plugin 0.0.9 archive
0.0.8 Oct 24, 2017 Go to the documentation of flutter_webview_plugin 0.0.8 Download flutter_webview_plugin 0.0.8 archive

All 16 versions...

Analysis

We analyzed this package on Apr 23, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.49.0
  • pana: 0.10.6
  • Flutter: 0.3.2

Scores

Popularity:
Describes how popular the package is relative to other packages. [more]
97 / 100
Health:
Code health derived from static analysis. [more]
99 / 100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100 / 100
Overall score:
Weighted score of the above. [more]
98
Learn more about scoring.

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Suggestions

  • Package is pre-v1 release.

    While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction API.

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 1 hint.

    Run flutter format to format lib/flutter_webview_plugin.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.8.0 <2.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.6 1.14.9
meta 1.1.2
sky_engine 0.0.99
typed_data 1.1.5
vector_math 2.0.6