WebView 支持 FlutterWeb 进行插件开发答案

【问题标题】：WebView support for FlutterWeb for plugin developmentWebView 支持 FlutterWeb 进行插件开发
【发布时间】：2020-05-21 08:25:39
【问题描述】：

您好，我开发了一个 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.

【问题讨论】：

标签： flutter flutter-web dart-html dart-webui

【解决方案1】：

您可以在main.dart、mobileui.dart和webui.dart下面复制粘贴运行3个文件
您可以将mobile 和web 代码放在不同的文件中并使用条件导入
这使您可以在移动设备和网络上拥有不同的实施方式

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

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

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

【讨论】：

这是一个很大的恩惠。
@chunhunghan 我收到了这个错误The name 'platformViewRegistry' is being referenced through the prefix 'ui', but it isn't defined in any of the libraries imported using that prefix. 这是我的颤振医生Flutter (Channel beta, 1.22.0, on Microsoft Windows [Version 10.0.19041.508], locale en-US)
@Reign，请参考github.com/flutter/flutter/issues/41563