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.

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.

Links #

• Github project
• Issue tracker
• API Reference

Known issues #

• Flickering in browsers (Flutter issue #51865)

Setting up #

1.Setup #

In pubspec.yaml:

dependencies:
  universal_html: ^1.2.3
  web_browser: ^0.3.1

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.Display DOM nodes #

import 'package:flutter/material.dart';
import 'package:universal_html/html.dart' show html;
import 'package:web_browser/web_browser.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: SafeArea(
        child: WebNode(
          node: html.HeadingElement.h1()..appendText('Hello'),
        ),
      ),
    ),
  ));
}

3.Display web browser #

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.cn/',
          javascriptEnabled: true,
        ),
      ),
    ),
  ));
}