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

javascript html web flutter paytabs

7,826

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

7,826

Author by

anass naoushi

Updated on December 02, 2022

Comments

anass naoushi over 1 year

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="[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.

anass naoushi over 4 years

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

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 4 years

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 almost 4 years

Take a look here: stackoverflow.com/questions/60276170/…
Golden Lion over 3 years

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