电商类 App 是 Flutter 练习里最难糊弄过去的一类：它同时压着列表性能、状态管理、路由跳转、网络请求和本地缓存，随便哪一环没想清楚，页面就会在真机上现原形。这门课拿女装商城当主线，适合的人群很明确——已经看得懂 Dart 基础语法、能照抄文档搭出几个静态页面，但一碰到"商品列表滚动卡顿""加入购物车后角标不刷新""详情页返回列表数据不同步"这类问题就卡住的人。如果你还分不清 StatelessWidget 和 StatefulWidget 该用哪个，先补基础再来，硬啃只会把挫败感攒起来。

它填的是哪几个能力缺口

女装商城这个题材看着窄，实际上暴露的问题很通用。第一个缺口是列表与图片：商品瀑布流、多图轮播、长列表滚动，背后是懒加载、图片缓存、ListView 与 GridView 的取舍，不是把 item 写出来就完事。第二个缺口是状态流转：购物车数量、收藏状态、规格选择，这些东西散落在多个页面，靠 setState 一路往上提会写得非常难看，课程会带你把状态该放哪儿这件事想明白。第三个缺口是数据层：商品接口请求、JSON 解析、加载 / 空 / 错误三态处理、下拉刷新与上拉加载，这些在真实项目里占了大量代码量，却常被入门教程跳过。

跟着敲的时候留意这几处

源码是带了的，但建议别一上来就打开对照。比较稳的做法是：先按讲解把页面结构和交互自己写一遍，跑不通再去看源码里那一块是怎么组织的，差异点在哪儿。重点盯三样东西——目录怎么分层（页面、组件、数据、状态各归哪里）、可复用组件怎么抽（商品卡片、价格栏、数量步进器这类东西反复出现，抽得好不好直接决定后期改动成本）、以及页面之间的数据回传是怎么处理的（详情页选完规格回到购物车，这一步最容易写乱）。版本更新到 V3.0，说明中途经历过结构调整，源码里的写法未必和你手头教程里最早的版本一致，以最新代码为准。

看完应该能回答的问题

商品列表滚动时图片频繁重建，你会从哪几个方向排查和优化？
购物车角标要在多个页面保持同步，你选哪种状态方案，为什么不用另一种？
接口返回慢、返回空、返回报错，这三种情况你的页面分别长什么样？
详情页操作后回到列表，列表数据要怎么更新才不闪烁、不重新请求整页？
如果让你把这个商城的订单模块加出来，你会新建哪几个目录、复用哪些已有组件？

这几个问题答不上来，说明你只是把代码跑通了，没把结构吃进去。答得上来，这门课的实战价值才算落到你身上。

配套练习怎么用

把商城做完不等于练到位。建议每学完一个模块，自己动手改一处需求：把商品卡片换成另一种布局、给购物车加上本地持久化、把规格选择从单选改成多规格联动。改动会逼着你回看数据是怎么在这几个层级之间流动的，这比重复敲一遍原代码有用得多。源码适合当参照系，不适合当抄写本。

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

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

它填的是哪几个能力缺口

跟着敲的时候留意这几处

看完应该能回答的问题

配套练习怎么用

同方向的更多课程

同方向的更多课程