web_browser 0.2.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 72

Pub Package Github Actions CI

Overview #

Web browser and HTML rendering widgets for Flutter application. Licensed under the Apache License 2.0.

In Android and iOS, this package uses webview_flutter, which is maintained by Google. However, webview_flutter works only in Android and iOS. This package works in browsers too by using <iframe> and other HTML elements. The iframe relies on a dart:ui API that is currently undocumented.

For easy cross-platform DOM manipulation, the package also exports package:web_browser/html.dart, which is a cross-platform dart:html taken from universal_html, a sibling project of this package.

The main widgets in this package are:

  • WebBrowser
    • Shows any web page.
    • By default, the widget gives you:
      • Address bar
      • "Share link" button
      • "Back" button
      • "Forward" button
  • WebNode
    • Shows any DOM node. DOM nodes work in Android and iOS too, thanks to universal_html.

Pull request are welcome! Please test your changes manually with the example application.

Known issues #

Setting up #

1.Setup #

In pubspec.yaml:

dependencies:
  web_browser: ^0.2.0

For iOS support, you should follow the usual webview_flutter instructions, which means adding the following snippet in ios/Runner/Info.plist:

<key>io.flutter.embedded_views_preview</key>
<true />

2. Try it #

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

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: SafeArea(
        child: WebBrowser(
          initialUrl: 'https://flutter.dev/',
          javascriptEnabled: true,
        ),
      ),
    ),
  ));
}

0.2.2 #

  • Fixes a bug in DOM handling.

0.2.1 #

  • Fixes documentation and dependencies.

0.2.0 #

  • Added support for more features supported by the underlying webview_flutter.
  • Added support for address bar and navigation buttons bar.
  • Removed WebText.
  • Improved documentation.

0.1.0 #

  • Initial release

example/lib/main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:web_browser/html.dart' as html;
import 'package:web_browser/web_browser.dart';

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

class MyApp extends StatefulWidget {
  const MyApp();

  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  Widget _body;

  @override
  Widget build(BuildContext context) {
    _body ??= _buildBody(0);
    return MaterialApp(
      title: 'Example',
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
      ],
      home: Scaffold(
        body: SafeArea(child: _body),
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.web),
              title: Text('WebBrowser'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.slideshow),
              title: Text('WebNode'),
            ),
            BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.settings),
              title: Text('Settings'),
            ),
          ],
          onTap: (i) {
            setState(() {
              _body = _buildBody(i);
            });
          },
        ),
      ),
    );
  }

  Widget _buildBody(int i) {
    return IndexedStack(
      index: i,
      children: [
        WebBrowser(
          key: ValueKey('browser'),
          initialUrl: 'https://dart.dev/',
        ),
        WebNode(
          key: ValueKey('node'),
          node: html.DivElement()
            ..style.textAlign = 'center'
            ..append(
              html.HeadingElement.h1()..appendText('Hello world!'),
            )
            ..append(html.AnchorElement()
              ..href = 'https://dart.dev/'
              ..appendText('A link to dart.dev')),
        ),
        Column(
          children: [
            // TODO: Settings for manual testing
          ],
        ),
      ],
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  web_browser: ^0.2.2

2. Install it

You can install packages from the command line:

with pub:


$ pub get

with Flutter:


$ flutter pub get

Alternatively, your editor might support pub get or 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:web_browser/web_browser.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
67
Health:
Code health derived from static analysis. [more]
75
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
80
Overall:
Weighted score of the above. [more]
72
Learn more about scoring.

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

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Health issues and suggestions

Fix lib/src/web_node_impl_browser.dart. (-25 points)

Analysis of lib/src/web_node_impl_browser.dart failed with 1 error:

line 35 col 10: The name 'platformViewRegistry' is being referenced through the prefix 'ui', but it isn't defined in any of the libraries imported using that prefix.

Fix lib/src/web_browser_buttons.dart. (-0.50 points)

Analysis of lib/src/web_browser_buttons.dart reported 1 hint:

line 80 col 9: 'await' applied to 'void', which is not a 'Future'.

Maintenance issues and suggestions

No valid SDK. (-20 points)

The analysis could not detect a valid SDK that can use this package.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.8.0 <3.0.0
cupertino_icons ^0.1.3 0.1.3
flutter 0.0.0
meta ^1.1.0 1.1.8 1.2.1
share ^0.6.0 0.6.4+3
universal_html ^1.2.3 1.2.3
webview_flutter ^0.3.22 0.3.22+1
Transitive dependencies
async 2.4.2
charcode 1.1.3
collection 1.14.12 1.14.13
csslib 0.16.1
html 0.14.0+3
path 1.7.0
sky_engine 0.0.99
source_span 1.7.0
term_glyph 1.1.0
typed_data 1.1.6 1.2.0
universal_io 1.0.1
vector_math 2.0.8 2.1.0-nullsafety
zone_local 0.1.2
Dev dependencies
flutter_driver
flutter_test
pedantic ^1.9.0