flutter - 用于插件开发的 FlutterWeb 的 WebView 支持-6ren

flutter - 用于插件开发的 FlutterWeb 的 WebView 支持

转载作者：行者123 更新时间：2023-12-03 21:16:42

嗨，我开发了一个 Flutter 插件 flutter_tex .它基于 WebView。我如何为此添加 Flutter Web 支持？

我试过这个例子来显示我的 HTML 内容。

import 'dart:ui' as ui;

  void forWeb() {
    if(kIsWeb){
      // ignore: undefined_prefixed_name
      ui.platformViewRegistry.registerViewFactory(
          'hello-world-html',
              (int viewId) => uni_html.IFrameElement()
            ..width = '640'
            ..height = '360'
            ..src = 'https://www.youtube.com/embed/IyFZznAk69U'
            ..style.border = 'none');

      Directionality(
        textDirection: TextDirection.ltr,
        child: Center(
          child: SizedBox(
            width: 200,
            height: 200,
            child: HtmlElementView(viewType: 'hello-world-html'),
          ),
        ),
      );
    }
  }

但是这段代码在为 web 构建时很好，但是在 android 上编译时，即使我没有调用上面的代码，我也会收到这个错误。

Compiler message:
../lib/flutter_tex.dart:139:10: Error: Getter not found: 'platformViewRegistry'.
      ui.platformViewRegistry.registerViewFactory(
         ^^^^^^^^^^^^^^^^^^^^
Target kernel_snapshot failed: Exception: Errors during snapshot creation: null
build failed.

FAILURE: Build failed with an exception.

最佳答案

您可以复制粘贴运行以下 3 个文件 main.dart , mobileui.dart和 webui.dart你可以把mobile和 web不同文件中的代码并使用条件导入
这允许您在移动和网络上有不同的实现

import 'mobileui.dart' if (dart.library.html) 'webui.dart' as multiPlatform;
...
home:  multiPlatform.TestPlugin(),

工作演示
当使用 Chrome 运行时或 Android Emulator在 Android Studio

main.dart

import 'package:flutter/material.dart';
import 'mobileui.dart' if (dart.library.html) 'webui.dart' as multiPlatform;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget { 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(        
        primarySwatch: Colors.blue,
      ),
      home:  multiPlatform.TestPlugin(),
    );
  }
}

mobileui.dart

import 'package:flutter/material.dart';

class TestPlugin extends StatefulWidget {
  @override
  _TestPluginState createState() => _TestPluginState();
}

class _TestPluginState extends State<TestPlugin> {
  @override
  Widget build(BuildContext context) {
    return Text("Mobile");
  }
}

webui.dart

import 'package:flutter/material.dart';
import 'dart:html' as html;
import 'dart:js' as js;
import 'dart:ui' as ui;


class TestPlugin extends StatefulWidget {
  TestPlugin();

  _TestPluginState createState() => _TestPluginState();
}

class _TestPluginState extends State<TestPlugin> {
  String createdViewId = 'map_element';

  @override
  void initState() {
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
        createdViewId,
            (int viewId) => html.IFrameElement()
          ..width = MediaQuery.of(context).size.width.toString() //'800'
          ..height = MediaQuery.of(context).size.height.toString() //'400'
          ..srcdoc = """<!DOCTYPE html><html>
          <head><title>Page Title</title></head><body><h1>This is a Heading</h1><p>This is a paragraph.</p></body></html>"""            
          ..style.border = 'none');

    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.symmetric(horizontal: 10),
        decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(color: Colors.grey[300], width: 1),
            borderRadius: BorderRadius.all(Radius.circular(5))),
        width: 200,
        height: 200,
        child: Directionality(
            textDirection: TextDirection.ltr,
            child: HtmlElementView(
              viewType: createdViewId,
            )));
  }
}

关于flutter - 用于插件开发的 FlutterWeb 的 WebView 支持，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60075516/

文章推荐： pytorch - 如何在张量中复制输入 channel ？

文章推荐： r - 使用 rlm 计算稳健回归的 r 平方是否合适

文章推荐： python - 使用动态 key 创建 Pydantic 模型架构

文章推荐： swift - 具有通用属性的结构符合 Swift 中的 Encodable

flutter - FlutterWeb TextFormFields不接受输入
我尝试通过运行pub run build_runner clean清除状态但TextFormField中的所有Form仍不接受输入(仅空白)。我正在使用 Flutter 1.9 。 TextFie
flutter - 用于插件开发的 FlutterWeb 的 WebView 支持
嗨，我开发了一个 Flutter 插件 flutter_tex .它基于 WebView。我如何为此添加 Flutter Web 支持？我试过这个例子来显示我的 HTML 内容。 import 'd

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

flutter - 用于插件开发的 FlutterWeb 的 WebView 支持