Pub Package Github Actions CI

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.

Behavior

In browsers

In Android and iOS

Known issues

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.cn">
//     </div>
html.Node exampleDomTree() {
  final h1 = html.HeadingElement.h1();
  h1.appendText('Dart website');

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

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

  return div;
}

Libraries

web_node
Provides a widget for displaying any dart:html Node in Flutter applications.