Flutter跨端适配问题：移动端无需注释Web端IFrame代码即可运行

你遇到的核心问题是dart:html中的API仅在Web平台可用，移动端编译时会包含这些代码导致运行报错。通过Flutter的平台条件编译，可以让Web专属代码只在Web环境执行，无需手动注释代码。

1. 条件导入Web专属库 #

首先要确保dart:html仅在Web平台被导入，避免移动端编译阶段就报错：

// 条件导入：Web平台导入dart:html，其他平台导入空存根文件（创建一个空的stub_html.dart即可）
import 'dart:html' as html if (dart.library.io) 'stub_html.dart';
import 'package:flutter/foundation.dart';
import 'dart:ui' as ui;

注：空的stub_html.dart仅用于满足非Web平台的导入语法要求，无需写任何代码。

2. 用kIsWeb包裹Web专属初始化代码 #

修改ProjectPageWeb的initState方法，将Web专属逻辑放在kIsWeb条件判断内，移动端编译时会自动跳过这段代码：

@override
void initState() {
  super.initState();
  print("id projet : " + widget.project.projectId.toString());
  url = 'myurl.com';

  // 仅在Web平台执行iframe初始化逻辑
  if (kIsWeb) {
    final html.IFrameElement _iframeElement = html.IFrameElement();
    _iframeElement.height = '750';
    _iframeElement.width = '1920';
    _iframeElement.src = url;
    _iframeElement.style.border = 'none';
    
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
      url,
      (int viewId) => _iframeElement,
    );
  }
}

3. 用kIsWeb控制Widget切换 #

直接用Flutter官方提供的kIsWeb常量判断使用哪个Widget，替代自定义布尔值，逻辑更可靠：

// 在父Widget中实现切换逻辑
Widget build(BuildContext context) {
  return kIsWeb 
      ? ProjectPageWeb(project: yourProject) 
      : ProjectPage(project: yourProject);
}

原理说明 #

kIsWeb是foundation.dart中提供的编译时常量，会根据当前编译平台自动赋值为true（Web）或false（移动端/桌面端）。条件判断内的代码只会在对应平台被编译和执行，移动端不会加载dart:html相关代码，自然不会触发报错。

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