重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
how-to-build-a-native-cross-platform-project-with-flutter by rodydavis/skills
npx skills add https://github.com/rodydavis/skills --skill how-to-build-a-native-cross-platform-project-with-flutter在同一个项目中导入 dart:html 和 dart:io!
TLDR 最终源代码位于此处。
到目前为止,您已经能够使用 Flutter 创建运行在 iOS/Android、Web 和桌面平台上的项目,但仅限于共享纯 Dart 插件。
Flutter 在 Google I/O 大会上推出了 Flutter for web,它是一个临时的分支,需要您将导入从 import 'package:flutter/material.dart'; 更改为 import 'package:flutter_web/material.dart';。
正如您可以想象的,这对于代码库来说非常困难,因为您必须创建一个分支并更改导入。这也意味着您无法导入任何需要路径或依赖于 flutter 的包。时机已到,合并已完成。现在您不再需要更改导入!
![]()
您现在可以使用任何插件,拥有调试器,创建包含 web 文件夹的新 Flutter 项目,使用 web 插件等等。
您需要使用最新的 Flutter 版本才能使此方法生效。
![]()
如果您是 Flutter 新手,可以查看这份实用指南,了解如何逐步创建一个新项目。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
![]()
创建一个名为 flutter_x 的新项目,它应该看起来像这样:
![]()
您也可以在此处下载起始项目这里。
您的代码应该如下所示:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
// This call to setState tells the Flutter framework that something has
// changed in this State, which causes it to rerun the build method below
// so that the display can reflect the updated values. If we changed
// _counter without calling setState(), then the build method would not be
// called again, and so nothing would appear to happen.
_counter++;
});
}
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
// Column is also a layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Invoke "debug painting" (press "p" in the console, choose the
// "Toggle Debug Paint" action from the Flutter Inspector in Android
// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
// to see the wireframe for each widget.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
为了确保一切正常,请继续在 iOS/Android 上运行该项目。
![]()
您应该看到计数器应用程序正在运行并且工作正常。现在退出并在 Chrome 上运行。它应该被列为设备之一。您也可以从命令行运行 flutter run -d chrome。
![]()
请注意,目前在 Web 上还没有热重载功能。
![]()
您的项目现在应该看起来像这样。
打开您的 pubspec.yaml 并导入以下包。
dependencies:
universal_html:
url_launcher:
您也可以删除 pubspec.yaml 中生成的注释。
您的 pubspec.yaml 现在应该如下所示:
name: flutter_x
description: A new Flutter project.
version: 1.0.0+1
environment:
sdk: ">=2.1.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
universal_html: ^1.1.0
url_launcher: ^5.1.2
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
默认情况下,如果您尝试检查设备是移动设备还是 Web 设备,在尝试导入不适合该平台的插件时,会在编译时出错。为了解决这个问题,我们将使用动态导入。
![]()
在 plugins 文件夹内创建一个 url_launcher 文件夹和文件 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 中添加以下内容:
class UrlUtils {
UrlUtils._();
static void open(String url, {String name}) {
throw 'Platform Not Supported';
}
}
类 UrlUtils 和公共方法必须与所有三个文件匹配才能正常工作。始终先设置 unsupported,然后将文件复制到 mobile.dart 和 web.dart 中,以确保没有拼写错误。
您现在应该有 3 个文件,每个类中都包含上述代码。
在 mobile.dart 中添加以下内容:
import 'package:url_launcher/url_launcher.dart';
class UrlUtils {
UrlUtils._();
static void open(String url, {String name}) async {
if (await canLaunch(url)) {
await launch(url);
}
}
}
这将分别在 safari 视图控制器或 Android 的默认浏览器中打开链接。
在 web.dart 中添加以下内容:
import 'package:universal_html/prefer_universal/html.dart' as html;
class UrlUtils {
UrlUtils._();
static void open(String url, {String name}) {
html.window.open(url, name);
}
}
这将在浏览器中打开一个带有指定链接的新窗口。
在屏幕中央添加一个按钮。ui/home/screen.dart 应如下所示:
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@Override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: RaisedButton(
child: Text('Open Flutter.dev'),
onPressed: () {},
)),
);
}
}
将 onPressed 更新为以下内容:
onPressed: () {
try {
UrlUtils.open('[https://flutter.dev'](https://flutter.dev'));
} catch (e) {
print('Error -> $e');
}
},
现在,当您导入 UrlUtils 时,导入正确的 URI 非常重要。
![]()
确保仅导入 import 'package:flutter_x/plugins/url_launcher/url_launcher.dart';。
如果您愿意,可以使用相对导入。
您的 UI 代码现在将如下所示:
import 'package:flutter/material.dart';
import '../../plugins/url_launcher/url_launcher.dart';
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@Override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: RaisedButton(
child: Text('Open Flutter.dev'),
onPressed: () {
try {
UrlUtils.open('[https://flutter.dev'](https://flutter.dev'));
} catch (e) {
print('Error -> $e');
}
},
)),
);
}
}
您的应用在 Web 上应该看起来像这样:
![]()
当您点击按钮时...
![]()
当您在 iOS /Android 上运行它时,它应该看起来像这样:
![]()
当您点击按钮时...
![]()
恭喜!您成功了 🎉
![]()
最终项目位于此处。
如果您有任何问题,请随时联系!
每周安装量
50
代码仓库
GitHub 星标数
32
首次出现
2026年2月4日
安全审计
安装于
opencode48
codex47
gemini-cli45
github-copilot45
kimi-cli43
amp43
Import dart:html and dart:io in the same project!
TLDR The final source here.
Up to now you have been able to create projects with Flutter that run on iOS/Android, Web and Desktop but only sharing pure dart plugins.
Flutter launched Flutter for web at Google I/O and was a temporary fork that required you to change imports from import 'package:flutter/material.dart'; to import 'package:flutter_web/material.dart';.
As you can image this was really difficult for a code base as you had to create a fork and change the imports. This also meant that you could not import any package that needed on a path or depended on flutter. The time as come and the merge is complete. Now you no longer need to change the imports!
![]()
You can use any plugin now, have a debugger, create new flutter projects with the web folder added, web plugins, and so much more..
You will need to be on the latest flutter for this to work.
![]()
If you are pretty new to Flutter you can check out this useful guide on how to create a new project step by step.
![]()
Create a new project named flutter_x and it should look like this:
![]()
You can also down the starter project here.
Your code should look like this:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
// This call to setState tells the Flutter framework that something has
// changed in this State, which causes it to rerun the build method below
// so that the display can reflect the updated values. If we changed
// _counter without calling setState(), then the build method would not be
// called again, and so nothing would appear to happen.
_counter++;
});
}
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
// Column is also a layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Invoke "debug painting" (press "p" in the console, choose the
// "Toggle Debug Paint" action from the Flutter Inspector in Android
// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
// to see the wireframe for each widget.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
Just to make sure everything is working go ahead and run the project on iOS/Android.
![]()
You should have the counter application running and working correctly. Now quit and run on Chrome. It should be listed as a device. You can also run from the command line flutter run -d chrome.
![]()
You do not get hot reload yet on web so be aware of that.
![]()
Your project should now look like this.
Open your pubspec.yaml and import the following packages.
dependencies:
universal_html:
url_launcher:
You can also remove the comments generated in the pubspec.yaml
Your pubspec.yaml will now read like this:
name: flutter_x
description: A new Flutter project.
version: 1.0.0+1
environment:
sdk: ">=2.1.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
universal_html: ^1.1.0
url_launcher: ^5.1.2
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
By default if you were to check if the device was mobile or web you will get an error at compile time when trying to import a plugin that is not meant for the platform. To get around this we will use dynamic imports.
![]()
Create a url_launcher folder and file url_launcher.dart, mobile.dart, web.dart, unsupported.dart inside the plugins folder.
In the file url_launcher.dart add the following:
export 'unsupported.dart'
if (dart.library.html) 'web.dart'
if (dart.library.io) 'mobile.dart';
This will pick the correct file at runtime and give a fallback if it is not supported.
To protect against edge cases you will need to set up a fallback for the import. In unsupported.dart add the following:
class UrlUtils {
UrlUtils._();
static void open(String url, {String name}) {
throw 'Platform Not Supported';
}
}
The class UrlUtils and the public methods have to match all three files for this to work correctly. Always set up the unsupported first then copy the file into mobile.dart and web.dart to ensure no typos.
You should now have 3 files with the above code in each class.
In mobile.dart add the following:
import 'package:url_launcher/url_launcher.dart';
class UrlUtils {
UrlUtils._();
static void open(String url, {String name}) async {
if (await canLaunch(url)) {
await launch(url);
}
}
}
This will open the link in safari view controller or android’s default browser respectively.
In web.dart add the following:
import 'package:universal_html/prefer_universal/html.dart' as html;
class UrlUtils {
UrlUtils._();
static void open(String url, {String name}) {
html.window.open(url, name);
}
}
This will open up a new window in the browser with the specified link.
Add a button to the center of the screen. The ui/home/screen.dart should read the following:
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: RaisedButton(
child: Text('Open Flutter.dev'),
onPressed: () {},
)),
);
}
}
Update the onPressed to the following:
onPressed: () {
try {
UrlUtils.open('[https://flutter.dev'](https://flutter.dev'));
} catch (e) {
print('Error -> $e');
}
},
Now when you go to import the UrlUtils it is important to import the correct URI.
![]()
Make sure to import import 'package:flutter_x/plugins/url_launcher/url_launcher.dart'; only.
You can use the relative import if you wish.
You UI code will now read the following:
import 'package:flutter/material.dart';
import '../../plugins/url_launcher/url_launcher.dart';
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: RaisedButton(
child: Text('Open Flutter.dev'),
onPressed: () {
try {
UrlUtils.open('[https://flutter.dev'](https://flutter.dev'));
} catch (e) {
print('Error -> $e');
}
},
)),
);
}
}
Your app on the web should look like this:
![]()
And when you tap the button..
![]()
And when you run it on iOS /Android it should look like this:
![]()
And when you tap the button..
![]()
Congratulations! You made it 🎉
![]()
Here is the final project located here.
Please reach out if you have any questions!
Weekly Installs
50
Repository
GitHub Stars
32
First Seen
Feb 4, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode48
codex47
gemini-cli45
github-copilot45
kimi-cli43
amp43
Flutter 主屏幕小组件开发指南:iOS/Android 原生小组件集成与数据通信
4,500 周安装