Flutter开发流程：一篇文章讲明白

Flutter 开发流程：一篇文章讲明白

一句话总纲：Flutter 是谷歌推出的跨平台 UI 框架，基于 Dart 语言，依靠 Skia/Impeller 自绘引擎，一套代码可以编译运行在 Android、iOS、Web、Windows、macOS、Linux。完整开发流程：环境搭建 → 创建项目 → 需求与 UI 拆解 → 编码开发 → 调试 → 测试 → 打包 → 发布 → 迭代维护。

一、开发环境准备

核心组件

Flutter SDK：包含 Dart SDK、编译工具、渲染引擎

平台工具链 Android：Android SDK、Android Studio，模拟器或者安卓真机 iOS：只能在 macOS 上开发，需要 Xcode、CocoaPods

代码编辑器：VS Code(主流轻量)、Android Studio(适合混合原生开发)

辅助工具 FVM：Flutter 版本管理，解决多项目 SDK 版本冲突 Flutter、Dart 插件：代码提示、热重载、设备选择

环境校验

终端执行命令，自动检测缺失依赖，根据提示补齐

flutter doctor

重要限制：Windows 电脑无法打包 iOS 安装包;iOS 打包、真机调试必须 macOS。

二、新建项目与基础配置

命令创建项目

flutter create demo_app

cd demo_app

核心目录说明

lib：业务代码主目录，main.dart 是程序入口 android：Android 原生工程 ios：iOS 原生工程 web、windows、macos、linux：各端工程目录 pubspec.yaml：项目配置文件，管理依赖、图片、字体、应用版本、图标

依赖管理

所有第三方包在 pubspec.yaml 的 dependencies 中声明，执行下面命令拉取包：

flutter pub get

公共包仓库：pub.dev。常用：dio 网络请求、shared_preferences 本地缓存、isar/hive 数据库、go_router 路由、riverpod/bloc 状态管理。

资源(图片、字体)同样需要在 pubspec.yaml 注册，之后才能在代码中引用。

三、理解 Flutter 核心思想(开发前置)

万物皆 Widget 页面、文字、图片、按钮、间距、容器全部是 Widget。分两类： StatelessWidget：无状态组件，数据不变 StatefulWidget：有状态组件，数据变化会刷新 UI

渲染机制不调用系统原生控件，引擎直接绘制 UI，多端视觉一致性高。Android/Web 使用 Skia，iOS 使用 Impeller。

热重载 Hot Reload 保存代码后快速刷新界面，保留页面状态，不用重启 App，是 Flutter 开发效率的核心。终端 r = 热重载;大写 R = 热重启(清空状态)

状态管理简单页面直接用 setState;中大型项目推荐 Riverpod、Bloc，把 UI 和业务逻辑分离，避免频繁重建。

四、编码开发(标准分层开发顺序)

推荐分层架构：UI 层 → 业务层 → 数据层 → 模型层

UI 层：封装通用组件，页面布局，使用 Row、Column、Stack、Scaffold 等基础布局组件

业务层：业务逻辑、表单校验、页面跳转、交互处理

数据层：网络请求、本地存储、数据库读写

模型层：实体类，JSON 序列化(json_serializable)

开发顺序

根据 UI 设计稿，先完成静态页面布局

定义接口、实体模型，对接后端接口

接入状态管理，绑定数据和页面

编写交互逻辑：点击、弹窗、路由跳转、表单

引入图片、字体等静态资源

适配：屏幕适配、深色模式、横竖屏兼容

路由：简单页面用原生 Navigator;正式项目推荐 go_router，统一路由表、参数传递、路由拦截。

五、调试

选择运行设备：模拟器，或者开启 USB 调试的真机启动项目命令

flutter run

调试手段 DevTools：性能查看、内存监控、网络日志、Widget 检查，专门排查布局溢出、内存泄漏、卡顿问题 debugPrint：打印日志，上线前清理调试日志 debugPaintSizeEnabled：开启组件边界辅助线，排查布局问题

重点问题：布局溢出(黄红报错)、适配错乱、异步异常、图片加载、内存持续上涨

六、测试

单元测试：测试工具类、纯函数逻辑

flutter test

Widget 测试：验证组件渲染结果

集成测试：模拟用户点击、页面跳转，自动化流程测试

多机型测试：不同分辨率、系统版本、深色模式、横竖屏

七、打包构建

Android

# 测试包apk

flutter build apk

# 谷歌商店标准aab包(正式发布)

flutter build appbundle

打包前配置签名文件 jks，在 android 目录配置签名信息。

iOS(macOS 环境)

flutter build ios

执行完成后打开 Xcode，配置开发者证书、描述文件，导出 ipa 包。

Web 静态页面

flutter build web

产物是静态 html、js，直接部署 Nginx。

桌面端

flutter build windows

flutter build macos

flutter build linux

八、上线发布

Android：aab 提交 Google Play，apk 用于国内渠道分发、直接安装 iOS：ipa 上传 App Store Connect，等待苹果审核 Web：将 build/web 目录静态资源部署服务器桌面端：exe、dmg 文件直接提供下载

九、迭代、运维与 CI

版本号在 pubspec.yaml 中配置 version: 主版本。次版本。补丁 + 构建号

SDK 升级：使用 FVM 管理版本，大版本升级重点处理破坏性变更

线上监控：接入崩溃收集 SDK，捕获线上报错

CI 自动构建：GitHub Actions / GitLab CI，自动执行测试、打包

十、高频避坑点

不要滥用 setState，会造成不必要的组件重建

图片设置宽高，避免布局抖动，影响 Core Web Vitals

异步请求增加 try-catch 捕获异常，防止页面崩溃

第三方包版本需要和当前 Flutter SDK 兼容，不要盲目升级

Web 端开发注意跨域问题

打包前删除调试代码、关闭 debug 标记