Using html code with a javascript code as a widget in flutter web

You can go something like this. You should put your html releated code in index.html file and in src you need to put a path for your index.html e.g. 'assets/index.html'

import 'dart:html' as html;import 'dart:js' as js;import 'dart:ui' as ui;String viewID = "your-view-id";  @override  Widget build(BuildContext context) {    // ignore: undefined_prefixed_name    ui.platformViewRegistry.registerViewFactory(        viewID,            (int id) => html.IFrameElement()          ..width = MediaQuery.of(context).size.width.toString()          ..height = MediaQuery.of(context).size.height.toString()          ..src = 'path/to/your/index.html'          ..style.border = 'none');    return SizedBox(      height: 500,      child: HtmlElementView(        viewType: viewID,      ),    );  }

You can use HtmlElementView for adding html elements inside a flutter web app https://api.flutter.dev/flutter/widgets/HtmlElementView-class.html

Beware that would only work in flutter web and

Embedding HTML is an expensive operation and should be avoided when a Flutter equivalent is possible

You should add this html content inside the file web/main.html.

I suggest you to build the button with Flutter and call javascript code with dart like this example calling javascript from Dart

If I understand correctly, your intention is to be able to render your html/javascript as a native widget in flutter.

Unfortunately, I don't think this is technically possible due to the fact that flutter is rendering everything in its own light-weight rendering engine, rather than creating native code that your native runtime executes. The artifact(s) created (even in flutter web) after compilation is a combination of flutter runtime + your compiled code that executes on flutter runtime. Therefore this is not possible to add html/javascript to your flutter code as a widget and run it everywhere.

The solution is to implement your widget in pure Dart code.