bb0017ffa2b69c4e728e8a74a7d1717d.png

前言

今年的Google I/O大会上发布了Flutter for the web第一个技术预览版,Flutter 1.5开始支持web开发，我也尝试了一下，确实是全新的体验，一套代码多端跑，确实爽！

但是我也感觉到几个明显的缺点

1.编译时间太长

2.只支持官方的几个库

开始

现在就开始进行flutter_web的初尝试吧，全程参考 flutter_web

升级flutter

因为flutter从1.5版本才开始支持web开发，所以首先要把flutter升级到1.5版本及以上，第一种方法是在命令行输入

flutter upgrade

第二中方法是在AndroidStudio中进入pubspec.yaml文件，然后再右上角会出现flutter upgrade的选项，同样可以进行升级，在命令行中输入

flutter --version

看一下当前flutter的版本是否在1.5以上，至此就完成了flutter的升级

迁移代码

接下来我们就要把flutter变成flutter_web。

首先就是对pubspec.yaml进行改变，先将dependencies中之前的flutter sdk换为flutter_web，dev_dependencies也与上面相同 并且在里面加入Dart web构建系统的依赖,然后下面是因为flutter_web包没发布到pub.dartlang.org，所以用这种方式告诉下载地址，修改完之后就点右上角的get dependencies，此时就修改完毕

dependencies:
  flutter_web: any
dev_dependencies:
  flutter_web_test: any
  build_runner: ^1.2.2
  build_web_compilers: ^1.1.0
  test: ^1.3.4

dependency_overrides:
  flutter_web:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web
  flutter_web_ui:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_ui
  flutter_web_test:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_test

修改lib/中的import

将flutter变为flutter_web,比如我们之前导入的是'package:flutter/material.dart'，我们修改为'package:flutter_web/material.dart'，之前导入的是'package:flutter_test/flutter_test.dart'，我们修改为'package:flutter_web_test/flutter_web_test.dart'，等等类似的修改

创建web文件夹

创建web文件夹，再在里面分别创建index.html和main.dart，提供入口点，直接复制官方文档的代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>
</body>
</html>

main.dart（first_flutter为自己的文件名）

import 'package:flutter_web_ui/ui.dart' as ui;
import 'package:first_flutter/main.dart' as app;

main() async {
  await ui.webOnlyInitializePlatform();
  app.main();
}

就此web程序入口就写好了

安装flutter_web构建工具

在命令行中输入

flutter pub global activate webdev

再进入flutter中的.pub-cache/bin文件夹，看是否已经下载好构建工具webdev.bat,下载之后我们在将.pub-cache/bin的地址配置到Path环境变量中，再在命令行中输入

webdev

看是否配置成功，如果环境变量已经配置但是输入命令还是显示没有配置成功，后面就要用flutter pub global run webdev ...，配置成功就直接webdev ...

构建flutter_web

先进入自己flutter项目的文件夹,比如我进入我的项目

D:>cd D:androidfirst_flutter

然后在调用构建工具webdev

webdev serve

他会去找你的pubspec.yaml文件，然后再看你项目中使用的库flutter_web是否支持，再进行flutter_web的构建,他会显示是否构建成功，构建成功后我们就在浏览器中输入http://localhost:8080进行查看，到此一个简单的尝试就结束了。我这次迁移的项目的是上次博客写的那个实例项目，因为他全部都是用的官方库，贴上flutter_web的效果

61f5d2f155089b27dc563947cd906cff.png

flutter确实在一步步往他的目标前进，值得在空余时间的时候去了解一下

Logo
魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

cover

全家桶集齐！Qwen3.5四款小模型上线魔乐社区，附昇腾全套实践教程

avatar 魔乐社区

Pont - 搭建前后端之桥：高效、灵活的接口管理工具

Pont 是一款强大的数据服务层解决方案，它能够帮助开发者快速搭建前后端之间的桥梁，实现接口的高效管理和代码自动生成。无论是新手还是有经验的开发者，都能通过 Pont 轻松处理接口文档、生成类型安全的 API 代码，从而显著提升开发效率。[![Pont 工具标志](https://raw.gitcode.com/gh_mirrors/po/pont/raw/3f1b7d4bbba3fd2dda

avatar 魔乐社区

如何快速上手 hvac：HashiCorp Vault Python 客户端零基础入门指南

**hvac** 是 HashiCorp Vault 的 Python 3.X 客户端库，专为开发者提供简单高效的 Vault 交互方式。无论你是需要管理密钥、配置身份验证，还是实现安全的秘密数据存储，hvac 都能帮助你轻松搞定 Vault 的各项操作。本文将带你零基础快速入门，从安装到基础操作，让你在几分钟内即可上手使用这个强大的工具。[![hvac 客户端 Logo](https://r

avatar 魔乐社区