flutter_web 初体验

最新推荐文章于 2023-05-12 14:59:42 发布

weixin_30402085

最新推荐文章于 2023-05-12 14:59:42 发布

阅读量194

点赞数

文章标签：开发工具 ui json

原文链接：https://juejin.im/post/5d5a9cd3518825237b5bee21

版权

Google I/O 大会宣布了 flutter 支持 web 开发，其设计目的是为了构建 高度互动，富含图形的网页。

Flutter 目前的目的就是全平台开发。目前已经支持了 Android， iOS， Windows， macOS， Linux 以及 Web。

安装 webdev 工具

需要官方提供的 webdev 工具来为我们编译。打开 flutter_web 在 Getting Started 中找到 Install the flutter_web build tools，详细说明了如何安装 webdev 工具。

配置 webdev

flutter packages pub global activate webdev
复制代码

建议：配置 dart， pub， ~/.pub-cache/bin 到环境变量

VSCode 创建 Flutter Web 项目

Dart 官方文档 & Flutter Web 项目创建教程

在 VSCode 打开命令面板，输入命令：

>Flutter:New Web Project
复制代码

然后稍等就可以看到下面的界面：

输入项目名后就可以看到 VSCode 出现一个窗口让你选择项目保存在哪个目录下面。选择完目录后，VSCode 会新建一个窗口来运行你的项目。

然后直接运行，VSCode 只需要按 F5 快捷键就行了。

选 “ Dart & Flutter ”

最后，默认的浏览器会弹出一个新的窗口来运行这个项目。

lib 是我们主要要写的项目代码和原有的 Flutter 基本一致
web 包含一个 html 文件和一个 main.dart
.dart_tool 是项目打包运行编译生成的文件

index.html 引用了 web/main.dart 编译生成的 js 文件

<head>
  <meta charset="UTF-8">
  <title>hello flutter</title>
  <script defer src="main.dart.js" type="application/javascript"></script>
</head>
复制代码

而 web/main.dart 调用了 lib/main.dart，写代码基本修改 lib 目录下的代码就好了。

main() async {
  await ui.webOnlyInitializePlatform();
  app.main();
}
复制代码

添加图片

与 flutter 项目有点区别，添加的图片只能是放在 web/assets/ 下。

.
├──pubspec.lock
├── pubspec.yaml
└── web
    ├── assets
    │   ├── FontManifest.json
    │   └── images
    │       └── swift_logo.png
    ├── index.html
    └── main.dart
复制代码

把 swift_logo.png 放在了 images 目录下。

使用的代码：

Image.assets('images/swift_logo.png')
复制代码

Flutter web 相关比较完整项目

flutter/flutter_web，里面有 5 个 demo。
samples/gallery 一些组件在 web 上的展示效果
Flutter for web samples，这里有很多 flutter 项目列表
kalismeras61/flutter_web_dashboard，Bootstrap 风格的后台 UI

Flutter_web 现在的一些限制

出于性能以及可移植性考虑，Flutter Web 应用目前不支持直接使用 CSS，即跟原生 Flutter 一样，全部使用组件代码来实现样式；
并非所有Flutter API都在Flutter for web上实现；
目前只支持 Chrome 浏览器上调试页面，其他浏览器调试可能会有问题；
Flutter_web 的插件还不完善，暂时只提供了最基础的 dart:html、dart:js、dart:svg、dart:indexed_db，可以通过他们访问绝大多数浏览器的 API;
Flutter_web 编译还很慢, 然后编译出来的包比较大;
在桌面浏览器上运行，还有一些不足，大部分是基于移动应用的操作特性，而没有对桌面系统的操作习惯进行特殊的优化。