Flutter Web中如何避免platformViewRegistry报错？

我之前在做Flutter Web的PDF预览时也踩过这个坑，你的代码功能正常但报这个错，本质是没有正确导入对应的Web专用库，而且现在Flutter官方对Web平台的视图注册写法有更新了，给你几个靠谱的解决办法：

解决办法1：正确导入Web专用库并添加平台判断 #

首先，你需要导入Web平台专属的dart:ui_web库，同时加上平台判断避免其他平台编译报错：

// 导入基础ui库
import 'dart:ui' as ui;
// 条件导入Web专用的ui库
import 'dart:ui_web' as ui_web;
// 导入kIsWeb用于平台判断
import 'package:flutter/foundation.dart';
import 'dart:html' as html;

void main() {
  // 仅在Web环境下执行视图注册逻辑
  if (kIsWeb) {
    ui_web.platformViewRegistry.registerViewFactory(
      'hello-world-html',
      (int viewId) => html.IFrameElement()
        ..width = '700'
        ..height = '4000'
        ..src = 'http:xxx.pdf'
        ..style.border = 'none',
    );
  }
}

注意：dart:ui_web是Web平台专用库，在非Web平台编译会报错，所以一定要用kIsWeb做环境判断，把注册逻辑限制在Web环境中。

解决办法2：使用更规范的HtmlElementView组件封装 #

现在Flutter Web更推荐结合HtmlElementView来实现原生Web视图的嵌入，这样代码结构更清晰，也更符合Flutter的组件化思想：

import 'dart:html' as html;
import 'dart:ui_web' as ui_web;
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class PdfViewer extends StatelessWidget {
  final String pdfUrl;

  const PdfViewer({super.key, required this.pdfUrl});

  @override
  Widget build(BuildContext context) {
    // 非Web平台提示不支持
    if (!kIsWeb) {
      return const Center(child: Text('该功能仅支持Web平台'));
    }

    // 注册唯一的视图工厂（用pdfUrl的hashCode避免重复注册）
    final viewType = 'pdf-viewer-${pdfUrl.hashCode}';
    ui_web.platformViewRegistry.registerViewFactory(
      viewType,
      (int viewId) => html.IFrameElement()
        ..width = '100%'
        ..height = '100%'
        ..src = pdfUrl
        ..style.border = 'none',
    );

    // 返回HtmlElementView加载注册的视图
    return HtmlElementView(viewType: viewType);
  }
}

// 使用示例
// PdfViewer(pdfUrl: 'http:xxx.pdf')

报错原因说明 #

你遇到的报错是因为Flutter的版本更新后，platformViewRegistry已经从通用的dart:ui库迁移到了Web专用的dart:ui_web库中，所以直接通过ui前缀引用这个对象时，编译器找不到对应的定义，就会抛出这个错误啦。

内容的提问来源于stack exchange，提问作者wahyu