用Flutter's Web 快速入门

配置flutter支持Web开发的工具

环境要求

• Flutter SDK
• Chrome 用于调试
• 支持Flutter项目的IDE工具，比如 Ideal、visual code等

Web支持配置

# 切换到稳定版
flutter channel stable
flutter upgrade

创建支持Web应用的Flutter项目

• 1、通过命令行

cd D:\flutter_study
c
cd myapp

• 2、lib/目录推荐结构(可引入Getx)

- lib/main.dart
- lib/page
- lib/controller
- lib/model
- lib/bean
- lib/asserts/...
-  

• 3. 运行app

flutter run -d chrome

自动发起浏览器

• 4. 编译构建

flutter build web

# 构建后文件将放在build/web目录下
# 发布模式的命令```flatter run --release```
# 在命令后增加--web-rendererhtml或--web-renderer canvaskit两种不同的发布方式，这影响到编译包的大小，进行影响运行性能

原理：编译构建时用dark2.js，而不是 [development compiler] 生成一个单独的 main.dart.js文件。

在已存在Flutter上增加Web的支持

flutter create .

上一章：Flutter for Windows-环境配置
下一章:Flutter's Web 介绍

参考

• https://flutter.dev/docs/get-started/web
• https://flutter.dev/docs/development/platform-integration/web
• Build and release a web app
• Flutter’s production quality support for the web.