10

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.

4

3 回答 3

9

你可以去这样的事情。你应该把你的 html 相关代码放在 index.html 文件中，并且src你需要为你的index.htmleg放置一个路径'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,
      ),
    );
  }
于 2020-05-23T19:13:17.230 回答
0

您可以使用HtmlElementView在 Flutter Web 应用程序中添加 html 元素 https://api.flutter.dev/flutter/widgets/HtmlElementView-class.html

请注意，这只适用于颤振网络和

嵌入 HTML 是一项昂贵的操作，当 Flutter 等效时应避免

您应该在文件 web/main.html 中添加此 html 内容。

我建议您使用 Flutter 构建按钮并使用 dart 调用 javascript 代码，例如从 Dart 调用 javascript 的示例

于 2020-01-05T14:09:20.450 回答
0

如果我理解正确，您的意图是能够将您的 html/javascript 呈现为 Flutter 中的本机小部件。

不幸的是，我认为这在技术上是不可能的，因为 Flutter 是在其自己的轻量级渲染引擎中渲染所有内容，而不是创建您的本机运行时执行的本机代码。编译后创建的工件（即使在 Flutter Web 中）是Flutter 运行时+在 Flutter 运行时执行的编译代码的组合。因此，不可能将 html/javascript 作为小部件添加到您的颤动代码中并在任何地方运行它。

解决方案是在纯Dart代码中实现您的小部件。

于 2021-06-21T06:19:32.223 回答