Vis.JS interop with Flutter Web (Dart) see https://visjs.org/ for Vis usage

analysis_options.yaml

analyzer:
  errors:
    undefined_prefixed_name: ignore

index.html

<!-- VisNetwork -->
<script type="text/javascript" src="/js/visnetwork.min.js"></script>

<!-- this is needed as Dart looks for these JS objects in the window namespace -->
<script>
  window.Network = vis.Network;
  window.DataSet = vis.DataSet;
</script>

vis_page.dart

import 'dart:html';
import 'dart:js_util';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';

import '../wrappers/visjs.dart';

class VisPage extends StatefulWidget {
  const VisPage({Key key}) : super(key: key);

  @override
  _VisPageState createState() => _VisPageState();
}

class _VisPageState extends State<VisPage> {
  DivElement networkContainer;
  Network network;
  bool _dataLoaded = false;
  List _nodes;
  List _edges;
  Map _options;

  @override
  void initState() {
    // call remote function to return network data
    MyCloudFunctions.callCloudFunction('get_network_data').then(
      (result) {
        setState(() {
          _dataLoaded = true;

          _nodes = result.data['nodes'];
          _edges = result.data['edges'];
          _options = result.data['options'];

          print(_nodes.toString());
          print(_edges.toString());
          print(_options.toString());
        });
      },
    );

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          SizedBox(
            height: 800,
            width: 100, // this is ignored
            child: _dataLoaded ? _renderNetwork() : Center(child: Container(child: Text("Loading data..."))),
          ),
        ],
      ),
    );
  }

  Widget _renderNetwork() {
    if (networkContainer == null) {
      _registerContainer();
      _createNetwork();
    }
    return HtmlElementView(viewType: 'network');
  }

  void _registerContainer() {
    networkContainer = DivElement()..id = "network";
    ui.platformViewRegistry.registerViewFactory('network', (int viewId) => networkContainer);
  }

  void _createNetwork() {
    DataSet nodes = DataSet(
      jsify(_nodes),
    );

    DataSet edges = DataSet(
      jsify(_edges),
    );

    Map data = {'nodes': nodes, 'edges': edges};
    if (_options == null) _options = {};
    network = Network(networkContainer, jsify(data), jsify(_options));
  }
}

visjs.dart

@JS('vis')
library vis;

import 'package:js/js.dart';

@JS()
class Network {
  external Network(dynamic container, dynamic data, dynamic options);
}

@JS()
class DataSet {
  external DataSet(dynamic data);
}

// If you use other classes and methods from Vis you import them in the same way