web_node 0.2.1

A cross-platform widget for displaying DOM nodes (iframes, etc.) in Flutter applications. Uses real DOM nodes in browsers and webview_flutter in Android/iOS.

Overview

A cross-platform package for displaying DOM trees in Flutter applications.

If you are looking for a web browser widget (with navigation buttons), try our sibling package web_browser.

Licensed under the Apache License 2.0.

Links

• Github project
• Issue tracker
• API Reference

Behavior

In browsers

• Uses real DOM nodes.
• For details, you can study the source code:
  • web_node_impl_browser.dart

In Android and iOS

• Serializes the DOM tree to HTML source code. Passes some of the surrounding style (background color, font family, etc.) DOM tree.
• Uses webview_flutter, a package maintained by Google, for showing the serialized DOM tree.
• For details, you can study the source code:
  • dom_tree_serializer.dart
  • web_node_impl_not_browser.dart

Known issues

• Flutter for Web suffers from flickering in browsers (Flutter issue #51865)

Getting started

1.Setup

Your pubspec.yaml should look something like:

environment:
  sdk: ">=2.12.0 <3.0.0"
  flutter: ">=2.0.0"

dependencies:
  universal_html: ^2.0.4
  web_node: ^0.2.1

2.Display DOM nodes

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

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: SafeArea(
        child: WebNode(node: exampleDomTree()),
      ),
    ),
  ));
}


// Constructs:
//     <div>
//       <h1>Dart website</h1>
//       <iframe src="https://dart.dev">
//     </div>
html.Node exampleDomTree() {
  final h1 = html.HeadingElement.h1();
  h1.appendText('Dart website');

  final iframe = html.IFrameElement();
  iframe.src = 'https://dart.dev/';

  final div = html.DivElement()
  ..append(h1);
  ..append(iframe);

  return div;
}