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 java script 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="john.deo@paytabs.com"
      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.

Shahzad Akram · Answer 1 · 2020-06-19T07:13:52.410

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

score 0 · Answer 2 · answered Jun 21 '21 at 06:19

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.

score -1 · Answer 3 · answered Jan 05 '20 at 14:09

-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 05 '20 at 14:09

jamesblasco

1,744
1
9
25

I have no previous knowledge in using javascript. How to transform the above html code into a callable javascript function?? – anass naoushi Jan 05 '20 at 14:43
1

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 `
` with a custom id and add this id in the param [`data-ui-element-id`](https://dev.paytabs.com/docs/express-checkout-v4/)
– jamesblasco Jan 05 '20 at 15:28
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 – anass naoushi Jan 05 '20 at 15:50
Take a look here: https://stackoverflow.com/questions/60276170/use-js-library-in-flutter-web/61317985#comment110482261_61317985 – nbloqs Jun 25 '20 at 17:38
flutter puts the div with id in a shadow dom so getElementById on the window will not find it. – Golden Lion Aug 18 '20 at 14:40

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

3 Answers3

Linked