背景与目标
部分用户希望 Cloud Studio 也能提供 App 开发的能力，使得没有苹果电脑的开发者也能开发 ios 应用，同时也能避免本地主机 App 开发中繁琐、复杂的环境配置。 flutlab.io 是一款现代Flutter 在线 IDE，可以创建、调试和构建跨平台 APP 。故调研此网站以探索和实现在 Cloud Studio 开发 App 。
flutlab.io 上的功能及 Cloud Studio 上实现
1. dart 语法高亮、自动补全
在 Cloud Studio 镜像预制安装 flutter 、dart 插件
2. 多平台构建和安装包下载，支持： web，ios-debug， android-x86， android-x64， android-arm， android-arm64
目前 linux 平台上 flutter 默认支持打出不同的架构的包，包括 android-x86， android-x64， android-arm， android-arm64 和 web， ios 平台的支持需要 mac 的云主机，目前腾讯云并无提供 mac 的云主机，但其他云平台有提供， 如：AWS。
3. flutter 多版本， 快速版本切换
第一种方法：可以尝试使用 flutter dider <version> 命令来降低它的等级，但是无法从 2.x 切换到 1.x 。
第二种方法：Flutter SDK 使用 GIT 来管理版本，可以有一个单一的目录来切换。
cd ~/flutter# Checkout needed versiongit checkout 1.22.6# Download Dart SDK, tools, etc.flutter doctor# Check Flutter and Dart versionflutter --version
4. web 平台支持热更新，web 模拟器
Flutter 2.0版本已经支持 web 平台，Flutter web 渲染器支持HTML 和 CanvasKit 两种渲染方式。故做 web 模拟器不难实现。
对于安卓模拟器在 CS 上显示有较成熟的方案 docker-android, 该方案基于 VNC，web 客户端基于 noVNC。理论上对于 ios 的模拟器的支持， VNC 服务端也是支持 mac 的，但具体还需要进一步测试。另外一种模拟器的方案是基于 xpra 方案，服务端xpra 和 web 客户端 xpra-html5。
5. Figma 导入自动生成 Flutter 代码
目前Github 上有实现 FigmaToCode ,可实现大部分功能。
风险点
- 无论模拟器 基于 VNC 还是 xpra方案，可能对于容器带宽和 CPU 的要求较高
- IOS 工程强依赖 XCode， 较难 docker 化。可以尝试用 Facebook 出品的 xcbuild 替代，这是一款兼容 xcodebuild 的编译工具，但是兼容性无法评估以及xcode 升级后，xcbuild 跟进升级兼容的一段时间内，只能回退到原来的开发方案，来回切换开发环境，体验差。
- 腾讯云并无提供 mac 的云主机，Docker-OSX 方案可能会有法律问题。
参考
若有收获，就点个赞吧
0 人点赞
