只需浏览器！在线完成 Flutter 从编程到打包全过程

最新推荐文章于 2025-07-10 10:48:30 发布

00后程序员张

最新推荐文章于 2025-07-10 10:48:30 发布

阅读量867

点赞数 27

CC 4.0 BY-SA版权

文章标签： http udp https websocket 网络安全网络协议 tcp/ip

本文链接：https://blog.youkuaiyun.com/2501_91373349/article/details/147142870

云端IDE开发Flutter应用全流程指南

动图封面

引言

云端IDE是基于云的集成开发环境，开发人员可以远程编写运行和调试代码，无需本地安装，仅通过浏览器即可开发软件。

与传统本地开发相比，云端开发环境主要有以下的优势：

快速启动项目进入开发状态，无需进行繁琐的环境配置；
可根据项目需求灵活调节硬件成本；
提供在线预览与协同编程，更好的共享和协作；
可方便地集成更多devops能力。

产品简介

Cloud Studio 是腾讯云下的一款基于浏览器的集成式开发环境（IDE），开发者根据其提供的编码模版和预设好的开发环境可以很方便地进行项目开发和页面预览
CODING提供一站式研发管理平台及云原生开发工具，包括代码仓库、CI/CD、制品库、自动化测试等

本文将介绍一个完整流程：用Cloud Studio实现Flutter项目的云端编程，再利用CODING的代码仓库托管代码、CI流水线实现自动打包APK文件并存储在制品库。

流程图

项目准备

我们以Flutter团队提供的一个教程项目为例子，演示仅通过浏览器实现一个Flutter项目开发的全过程。

创建项目

首先，在CODING中新建一个项目，命名并填写项目相关信息。如没有CODING团队，需要先进行免费注册。

创建项目

代码拉取

创建完项目之后，即可在左边栏中进入代码仓库创建仓库拉取项目代码，这里我们选择点击导入。

代码仓库

填写仓库地址并进行命名，点击完成创建，等待仓库导入成功后，即可看到项目代码，第一步项目准备完成。

导入成功

在线编码

在上一步中，我们完成了项目准备，现在，我们可以在Cloud Studio中导入这个项目，进行代码编写、调试和预览。

创建工作空间

由于CODING和Cloud Studio实现了账号互通，我们可以用CODING账号登录，完成账号授权。

登录完成后，在左下角点击创建工作空间，导入CODING内的代码仓库，并且选择预设好Flutter环境的开发环境，点击创建，等待几秒，一个崭新的工作空间即创建完成。

创建工作空间

安装插件与依赖

Cloud Studio与VS Code一样，集成了许多开发插件。我们可以通过在线安装插件来增强使用体验。

在左边栏选择扩展，安装Flutter和Dart插件，下载完成中点击重新加载即可完成插件安装。

安装插件

打开终端，我们还需要初始化项目的依赖：

# 加载项目依赖
flutter pub get

提示Dart版本太低，我们需要先更新Flutter。

# 更新flutter版本，先后执行以下命令
flutter upgrade
flutter pub get

再次执行flutter pub get完成依赖加载。

项目启动/调试

执行完上一步的前置步骤后，现在，我们可以启动项目。

Cloud Studio可以快速生成预览链接，方便分享他人展示项目或在线调试。

首先执行run命令，将项目以web方式启动到9000端口。

# 启动
flutter run -d web-server --web-port 9000

点击内置浏览器，即可看到预览效果，我们可以将这个链接分享给他人，他们可以远程打开该链接。

项目预览

接下来，我们将演示如何修改代码，并通过项目热加载快速看到修改结果。

我们将会添加左边导航栏的图标，以便用户快速浏览前置图标以找到所需标签页。找到lib/src/shared/router.dart，替换icon代码，为每个导航目的地（首页、播放列表和用户）添加不同的前置图标。

const List<NavigationDestination> destinations = [
  NavigationDestination(
    icon: Icon(Icons.home_outlined),
    selectedIcon: Icon(Icons.home),
    label: 'Home',
  ),
  NavigationDestination(
    icon: Icon(Icons.queue_music_outlined),
    selectedIcon: Icon(Icons.queue_music),
    label: 'Playlists',
  ),
  NavigationDestination(
    icon: Icon(Icons.person_outlined),
    selectedIcon: Icon(Icons.person),
    label: 'Profile',
  ),
];

修改完成后，在终端中输入q进行热加载。等待片刻，刷新页面即可看到最新的效果。

修改效果

提交代码

Cloud Studio也提供了图形化的源代码管理界面，左侧点击源代码管理，暂存我们刚刚修改了的文件，填写commit message，点击提交和同步更改，即可提交代码到CODING。

提交代码

至此，我们已经在Cloud Studio完成了编写、调试和预览，通过重复迭代，我们开发了一个满意的代码版本。

接下来，我们一起看看如何通过CODING持续集成流水线实现自动化打包。

CODING打包apk制品

首先，介绍一下什么是持续集成：

什么是持续集成？
当提交了一部分修改完成的代码后，我们总是希望可以快速得到直观且有效的反馈，及早暴露问题。在开发过程中总有一部分工作是相对机械化，易出错的（例如打包、部署）。为何不将这部分工作交给机器来做呢？仅需要轻点鼠标，起身泡杯咖啡，将部署与发布的事宜交由持续集成，把时间花在更有价值的事物上。
CODING持续集成便是专门为此工作流而设计的得力功能。通过对每次提交的代码进行自动化的代码检查、单元测试、编译构建、甚至自动部署与发布，能够大大降低开发人员的工作负担，减少许多不必要的重复劳动，持续提升代码质量与开发效率。毫无疑问，持续集成是开发者与研发团队的福音。

因此，像代码打包这种重复性的工作，我们可以交给持续集成来完成，以下是使用步骤。

首先我们在项目的制品管理中新建一个制品，用于存放生存的apk文件。

制品管理