# 邂逅

很多情景需要使用 package:flutter_web_ui/ui.dart 或者 dart:ui ，比如显示一个网页：

import 'package:flutter_web_ui/ui.dart' as ui;
// 或者 import 'dart:ui' as ui;

ui.platformViewRegistry.registerViewFactory(
        'maphtml',
            (int viewId) => IFrameElement()
          ..allowFullscreen=true
          ..height = '360'
          ..src = 'https://hornhuang.github.io'+_params
          ..style.border = 'none');

运行一下，很不幸收到一朵大红花：

# 战胜

原因是 'dart:ui' 这个库是 web-only 的，也就是说我们只能在 flutter_web 上用它 ？但是如果在 iOS/android 上也想用怎么办？挑战一下：

• 这里我们先新建一个 dart 文件：FakeUi.dart

// ignore: camel_case_types
class platformViewRegistry {
  static registerViewFactory(String viewId, dynamic cb) {}
}

• 然后再新建一个 dart 文件：RealUi.dart

import 'dart:ui' as ui;

// ignore: camel_case_types
class platformViewRegistry {
  static registerViewFactory(String viewId, dynamic cb) {
    // ignore:undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(viewId, cb);
  }
}

• 以后当我们想使用 'dart:ui' 里的内容时，直接通过 FakeUi.dart 就可以啦

import 'FakeUi.dart' if (dart.library.html) 'RealUi.dart' as ui;

# 享受

• 运行以下看看效果：个人官网 hornhuang.github.io
• flutter_web 的坑太多了，踩坑不易，总结更难，求个三连，求求啦