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

Question

I am currently using flutter web and I already have an html button that I want to add inside my flutter app. This html contains a JavaScript as its body. How to add the html with JavaScript as a widget inside my app? This is the html snippet:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Paytabs Express Checkout V4</title>
  </head>
  <body>
    <script
      src="https://paytabs.com/express/v4/paytabs-express-checkout.js"
      id="paytabs-express-checkout"
      data-secret-key="key"
      data-ui-type="button"
      data-merchant-id="mid"
      data-url-redirect="https://my09713z28.codesandbox.io/"
      data-amount="3.3"
      data-currency="SAR"
      data-title="John Doe"
      data-product-names="click"
      data-order-id="25"
      data-ui-show-header="true"
      data-customer-phone-number="5486253"
      data-customer-email-address="[email protected]"
      data-customer-country-code="973"
      data-ui-show-billing-address="false"
      data-billing-full-address="test test test"
      data-billing-city="test"
      data-billing-state="test"
      data-billing-country="BHR"
      data-billing-postal-code="123"
    ></script>
    <script>
      
    </script>
  </body>
</html>

Hope you provide me with some help.

Munsif Ali · Accepted Answer · 2025-05-12 10:40:07Z

14

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));
}

edited May 12 at 10:40

Munsif Ali

7,9277 gold badges34 silver badges66 bronze badges

answered May 23, 2020 at 19:13

Shahzad Akram

5,5447 gold badges42 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Conscript · Accepted Answer · 2021-06-21 06:19:32Z

0

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.

answered Jun 21, 2021 at 6:19

Conscript

6268 silver badges23 bronze badges

Comments

jamesblasco · Accepted Answer · 2020-01-05 14:09:20Z

-1

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

answered Jan 5, 2020 at 14:09

jamesblasco

1,8921 gold badge11 silver badges29 bronze badges

5 Comments

anass naoushi Over a year ago

I have no previous knowledge in using javascript. How to transform the above html code into a callable javascript function??

jamesblasco Over a year ago

I look more in deep what that js does and it generates the ui, so why I would try is to create a HtmlElementView with an <div> with a custom id and add this id in the param data-ui-element-id

anass naoushi Over a year ago

Still I cant figure out how to implement this html in my app. Can you please provide some dart sample code with html/javascript implementation

nbloqs Over a year ago

Take a look here: stackoverflow.com/questions/60276170/…

ListenSoftware Louise Ai Agent Over a year ago

flutter puts the div with id in a shadow dom so getElementById on the window will not find it.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related