Flutter系列-女装商城实战(含源码-更新至V3.0)

先弄清楚这门课到底在做什么

这是一门用 Flutter 做一个女装商城的实战课，更新到 V3.0，带源码。它的重心不是把 Flutter 语法从头讲一遍，而是拿一个具体的电商场景——女装类目——把页面、数据、状态、接口这些东西串起来跑通。如果你已经看过一些 Flutter 的基础内容，能看懂 Widget 大概怎么写、setState 是怎么回事，那这门课的门槛就刚刚好。如果你连 Dart 的基本语法都还没碰过，直接进来会比较吃力，建议先把语言基础补一补，不然跟着敲也会一头雾水。

建议的观看顺序，别一上来就从头到尾刷

很多人拿到这类课的习惯是从第一讲顺着点下去，结果看到一半就卡住，然后放着不动了。更省时间的做法是：

• 先把环境跑起来那几讲看完，确保项目能在你自己的机器上编译通过，这一步不通过后面全是空谈；
• 然后跳到商城首页的搭建部分，先看清楚一个真实页面的结构长什么样；
• 再回头按顺序补商品列表、详情、购物车这类模块，它们之间是有依赖关系的，顺序乱了会反复回看；
• 最后再看状态管理和数据请求的收尾部分，这时候你已经有具体页面做参照，理解会快很多。

V3.0 相比早期版本有增补，新增的内容一般会在原有模块之后，看的时候留意一下版本说明，别把新旧两种写法混着用。

哪些部分可以快进，哪些不能跳

环境配置和项目结构的介绍，如果你已经能独立建 Flutter 工程，完全可以快进，只看它这套目录是怎么分的就够了。真正不能跳的是和状态流转、数据请求相关的段落，女装商城这种带列表、筛选、加购的界面，逻辑一旦没跟上，后面抄代码也跑不出效果。

另外，UI 细节的调试部分可以挑着看。女装类目的视觉偏细腻，配色、间距、图片比例这些调整很花时间，但它属于熟能生巧的东西，看一遍知道思路即可，不必逐帧模仿。真正要花时间的是那些涉及数据流的地方。

源码怎么用，比看视频更关键

这门课带源码，但不要把源码当成标准答案直接复制。比较稳的用法是：自己先按讲解写一遍，跑不通了再去对照源码找差异，看看是哪个 Widget 用错了、哪里的状态没刷新。如果一开始就打开源码对着抄，你会产生“我懂了”的错觉，关掉编辑器就什么都不剩。

源码还有一个用处是做复盘。学完一个模块，隔两三天把源码打开，只看关键文件，试着在心里讲一遍“这个页面从请求到渲染经过了哪几步”。讲不出来的地方，就是你需要回去重看的那一讲。

给自己留出学不完的余地

女装商城这个项目体量不算小，不用指望一口气跟完。比较现实的节奏是一周啃两三个模块，卡住了就停一停，把当前页面彻底弄明白再往下。学不会的部分先记下来，等你把后面的内容看了一部分，回头常常会突然明白前面卡在哪。

这门课的价值在于给你一个完整的项目参照，而不是让你背下每一行代码。跟着做完一遍之后，试着换个品类，比如做个男装或者童装的壳子，自己独立把主要页面搭出来，那才算真正把里面的东西变成了自己的。

90d21d450b98a85444464cb1368e1fd6_04a1379e8186025849d8fde7adad82ca.webp 下载附件   保存到相册 2025-8-26 16:44 上传

课程推荐

《Flutter系列-女装商城实战(含源码-更新至V3.0) 价值399元》90d21d450b98a85444464cb1368e1fd6_04a1379e8186025849d8fde7adad82ca.webp 下载附件   保存到相册 2025-8-26 16:44 上传【技能收获】学完可掌握：核心实战技能、项目驱动学习。课程以实战为导向，覆盖从基础概念到完整项目落地的关键步骤，配套章节笔记便于课后复盘与面试前快速回顾。【学习建议】建议按目录顺序学习，先打基础再进入综合实战章节；每完成 2～3 节可结合笔记整理一份学习小结，最终尝试独立复现一套完整 Demo 写入个人作品集。【就业发展】可面向岗位：Linux 运维工程师、SRE、云计算工程师、DevOps 工程师。云原生与自动化运维仍是企业 IT 刚需方向，认证 + 实战项目组合能显著提升面试通过率，适合向中高级运维或架构岗进阶。 若你已有一定编程或运维基础，本课程可帮助你在现有技能栈上快速叠加热门方向能力，提升求职时的项目说服力与薪资谈判空间。

视频目录（122 节）

*   1.Flutter基础与提升-说明.mp4

*   2.Flutter商城-项目概述.mp4

*   3.Flutter商城-创建项目.mp4

*   4.Flutter商城-目录结构.mp4

*   5.Flutter商城-入口程序编写.mp4

*   6.Flutter商城-状态管理基础.mp4

*   7.Flutter商城-当前索引状态处理.mp4

*   8.Flutter商城-导航栏-导航项添加.mp4

*   9.Flutter商城-导航栏-空页面添加.mp4

*   10.Flutter商城-导航栏-状态处理.mp4

*   11.Flutter商城-导航栏-页面渲染.mp4

*   12.Flutter商城-后台接口-Node安装.mp4

*   13.Flutter商城-后台接口-创建工程.mp4

*   14.Flutter商城-后台接口-启动Http服务.mp4

*   15.Flutter商城-后台接口-添加资源.mp4

*   16.Flutter商城-后台接口-获取测试数据.mp4

*   17.Flutter商城-首页-设计分析.mp4

*   18.Flutter商城-首页-数据准备.mp4

*   19.Flutter商城-首页-Dio请求处理.mp4

*   20.Flutter商城-首页-接口配置.mp4

*   21.Flutter商城-首页-请求首页数据.mp4

*   22.Flutter商城-首页-数据解析.mp4

*   23.Flutter商城-首页-保持状态处理.mp4

*   24.Flutter商城-首页-EasyRefresh刷新处理.mp4

*   25.Flutter商城-首页-添加轮播图.mp4

*   26.Flutter商城-首页-分类导航一.mp4

*   27.Flutter商城-首页-分类导航二.mp4

*   28.Flutter商城-首页-商品推荐一.mp4

*   29.Flutter商城-首页-商品推荐二.mp4

*   30.Flutter商城-首页-商品推荐三.mp4

*   31.Flutter商城-首页-广告位处理.mp4

*   32.Flutter商城-首页-底部商品布局设计.mp4

*   33.Flutter商城-首页-底部商品布局实现.mp4

*   34.Flutter商城-首页-火爆专区数据准备.mp4

*   35.Flutter商城-首页-火爆专区数据获取.mp4

*   36.Flutter商城-首页-火爆专区Wrap布局.mp4

*   37.Flutter商城-首页-火爆专区布局组合.mp4

*   38.Flutter商城-首页-总结.mp4

*   39.Flutter商城-分类-设计分析.mp4

*   40.Flutter商城-分类-数据准备.mp4

*   41.Flutter商城-分类-数据获取.mp4

*   42.Flutter商城-分类-分类数据模型一.mp4

*   43.Flutter商城-分类-分类数据模型二.mp4

*   44.Flutter商城-分类-分类数据模型三.mp4

*   45.Flutter商城-分类-分类Model测试.mp4

*   46.Flutter商城-分类-创建分类Provide.mp4

*   47.Flutter商城-分类-改变分类索引Provide处理.mp4

*   48.Flutter商城-分类-获取二级分类Provide处理.mp4

*   49.Flutter商城-分类-编写一级分类界面一.mp4

*   50.Flutter商城-分类-编写一级分类界面二.mp4

*   51.Flutter商城-分类-点击一级分类处理.mp4

*   52.Flutter商城-分类-首页分类导航处理.mp4

*   53.Flutter商城-分类-编写二级分类界面一.mp4

*   54.Flutter商城-分类-编写二级分类界面二.mp4

*   55.Flutter商城-分类-分类商品数据准备.mp4

*   56.Flutter商城-分类-分类商品数据获取.mp4

*   57.Flutter商城-分类-分类商品数据模型.mp4

*   58.Flutter商城-分类-分类商品Provide处理.mp4

*   59.Flutter商城-分类-分类商品界面实现一.mp4

*   60.Flutter商城-分类-分类商品界面实现二.mp4

*   61.Flutter商城-分类-分类商品界面实现三.mp4

*   62.Flutter商城-分类-分类商品界面实现四.mp4

*   63.Flutter商城-分类-加载更多商品方法实现.mp4

*   64.Flutter商城-分类-加载更多商品界面实现.mp4

*   65.Flutter商城-分类-总结.mp4

*   66.Flutter商城-路由-Fluro配置.mp4

*   67.Flutter商城-路由-参数传递.mp4

*   68.Flutter商城-详情-设计分析.mp4

*   69.Flutter商城-详情-数据准备.mp4

*   70.Flutter商城-详情-POST参数处理.mp4

*   71.Flutter商城-详情-商品详情数据模型.mp4

*   72.Flutter商城-详情-商品详情Provide处理.mp4

*   73.Flutter商城-详情-首屏区域实现一.mp4

*   74.Flutter商城-详情-首屏区域实现二.mp4

*   75.Flutter商城-详情-首屏区域实现三.mp4

*   76.Flutter商城-详情-说明界面实现.mp4

*   77.Flutter商城-详情-详细评论选项卡实现一.mp4

*   78.Flutter商城-详情-详细评论选项卡实现二.mp4

*   79.Flutter商城-详情-详细页面Html展示.mp4

*   80.Flutter商城-详情-加入购物车初始化.mp4

*   81.Flutter商城-详情-添加购物车图标.mp4

*   82.Flutter商城-详情-添加购物车Badge图标.mp4

*   83.Flutter商城-详情-底部操作按钮实现.mp4

*   84.Flutter商城-详情-总结.mp4

*   85.Flutter商城-购物车-初始化.mp4

*   86.Flutter商城-购物车-添加数据模型.mp4

*   87.Flutter商城-购物车-商品保存Provide处理一.mp4

*   88.Flutter商城-购物车-商品保存Provide处理二.mp4

*   89.Flutter商城-购物车-商品获取Provide处理.mp4

*   90.Flutter商城-购物车-Provide存储测试.mp4

*   91.Flutter商城-购物车-获取购物车数据.mp4

*   92.Flutter商城-购物车-总体布局.mp4

*   93.Flutter商城-购物车-列表项初始化.mp4

*   94.Flutter商城-购物车-多选按钮展示.mp4

*   95.Flutter商城-购物车-修改选中状态实现.mp4

*   96.Flutter商城-购物车-图片及名称展示.mp4

*   97.Flutter商城-购物车-价格及删除展示.mp4

*   98.Flutter商城-购物车-删除商品逻辑处理.mp4

*   99.Flutter商城-购物车-商品计数组件初始化.mp4

*   100.Flutter商城-购物车-增加减少组件展示.mp4

*   101.Flutter商城-购物车-增加减少逻辑处理.mp4

*   102.Flutter商城-购物车-底部组件初始化.mp4

*   103.Flutter商城-购物车-全选界面实现.mp4

*   104.Flutter商城-购物车-全选逻辑实现.mp4

*   105.Flutter商城-购物车-合计区域展示.mp4

*   106.Flutter商城-购物车-结算实现.mp4

*   107.Flutter商城-购物车-总结.mp4

*   108.Flutter商城-会员中心-初始化.mp4

*   109.Flutter商城-会员中心-头像处理.mp4

*   110.Flutter商城-会员中心-我的订单处理.mp4

*   111.Flutter商城-会员中心-更多操作处理.mp4

*   112 Flutter商城-Provider-升级库.mp4

*   113 Flutter商城-Provider-重命名类名.mp4

*   114 Flutter商城-Provider-修改索引页.mp4

*   115 Flutter商城-Provider-修改首页.mp4

*   116 Flutter商城-Provider-修改购物车.mp4

*   117 Flutter商城-Provider-修改分类.mp4

*   118 Flutter商城-Provider-商品详情一.mp4

*   119 Flutter商城-Provider-商品详情二.mp4

*   120 Flutter商城-Provider-测试.mp4

*   121 Flutter商城-库升级.mp4

*   122 Flutter商城-包名修改.mp4