用途:本技能讲解如何在同一个 Flutter 工程中同时使用 dart:html 与 dart:io,从而编写在移动端与 Web 上都能工作的跨平台插件。资料指出 Flutter Web 合并后不再需要把 import 'package:flutter/material.dart' 改成 flutter_web 版本,可直接使用插件、调试器,并可在新建项目时带上 web 目录。
主要能力:通过条件导入按平台选择实现文件,避免在编译期因导入不适用于当前平台的插件而报错。示例中在 plugins 目录下创建 url_launcher.dart、mobile.dart、web.dart、unsupported.dart,其中 url_launcher.dart 使用 export 'unsupported.dart' if (dart.library.html) 'web.dart' if (dart.library.io) 'mobile.dart'; 在运行时选择正确文件并提供回退。三个实现文件中的类名与公开方法必须一致,建议先写 unsupported.dart 再复制到 mobile.dart 与 web.dart。
使用方式:需使用最新版 Flutter。新建名为 flutter_x 的项目,先在 iOS/Android 运行计数器示例,再在 Chrome 运行(命令行 flutter run -d chrome),注意 Web 暂不支持热重载。在 pubspec.yaml 的 dependencies 中加入 universal_html 与 url_launcher。mobile.dart 中导入 package:url_launcher/url_launcher.dart,用 canLaunch 与 launch 打开链接;web.dart 中导入 package:universal_html/prefer_universal/html.dart as html,用 html.window.open(url, name) 打开新窗口;unsupported.dart 中抛出 'Platform Not Supported'。UI 中只导入 package:flutter_x/plugins/url_launcher/url_launcher.dart,在按钮 onPressed 里调用 UrlUtils.open 并捕获异常。
适用场景与限制:适合需要按平台分别实现同一功能的跨平台插件开发。资料未提供收费、价格、性能数据或更多平台支持细节;Web 端热重载暂不可用。