Flutter 系统化全天学习排课计划（总周期：42天，网页HTML转行适配版）【一】
整体分五大阶段： 阶段1：Dart语言基础（7天）｜阶段2：Flutter基础组件+布局（12天）｜阶段3：交互、路由、状态管理（10天）｜阶段4：网络请求、本地缓存、真机调试（7天）｜阶段5：综合实战项目+打包+代码规范（6天） 每日结构统一：今日知识点 + 理论讲解 + 手写练习代码 + 课后作业 + 易错提醒 你有HTML基础，我会频繁对照HTML/CSS做类比，降低理解门槛。
前置统一规则（全程遵守）
所有项目路径、项目名不能中文、不能空格； 每天学习时长：3～4小时，先看知识点→手抄代码练习→独立完成作业； 禁止整段复制代码，复杂代码先拆解看懂，再手动敲一遍； 每天结束前，用 flutter doctor简单检查环境是否异常。
第一阶段：Dart 编程语言 【共7天，必须学完再进Flutter】
Flutter全部代码基于Dart，语法和JS相近，但为面向对象，HTML只有标签，缺少编程逻辑，这7天决定后续会不会频繁看不懂代码。
Day1：Dart基础环境、变量、数据类型
学习内容
新建纯Dart项目：Android Studio → New Project → Dart Empty Project 程序入口 main(){}固定结构变量声明： var、final、const三者区别基础数据类型： String 字符串（文字） int 整数、double 小数 bool 布尔： true / false字符串拼接、多行字符串写法
随堂练习代码（手动抄写运行）
void main() {
// var自动识别类型
var name = "小明";
// final 赋值后不可修改
final int age = 22;
// const 编译期常量
const String appName = "Flutter学习";
String info = "姓名：$name，年龄：$age";
print(info);
}课后作业
定义5个不同类型变量，使用 print()打印输出；练习字符串 ${变量}插值写法，写一段个人信息介绍。
易错点
Dart严格区分大小写；字符串单引号、双引号都可以，不能混用。
Day2：运算符、if判断、三目表达式
知识点
算术运算符： + - * / %关系运算符： > < >= <= == !=逻辑运算符： && 并且、|| 或者、! 取反if / else if / else条件判断三目运算符 条件 ? 成立执行 : 不成立执行（和JS一致）
练习：成绩判断
void main() {
int score = 78;
if (score >= 90) {
print("优秀");
} else if (score >= 60) {
print("及格");
} else {
print("不及格");
}
}作业
输入分数，用if判断等级；再改用三目运算符简写一次。
Day3：循环 for、while、switch
知识点
for循环（遍历数字，和JS用法接近） while循环、do while循环 switch 多条件匹配
练习：for循环打印1～10
void main() {
for (int i = 1; i <= 10; i++) {
print(i);
}
}作业
循环输出1～20所有偶数； switch判断星期数字，输出对应星期几。
Day4：List数组（对标JS数组）
知识点
List 数组定义、增删改查： add()、remove()、下标取值遍历数组：普通for循环、 for in遍历固定长度数组、可变数组区别
练习示例
void main() {
List<String> list = ["苹果", "香蕉", "橙子"];
// 取值
print(list[0]);
// 添加元素
list.add("葡萄");
// 循环遍历
for (var item in list) {
print(item);
}
}作业
创建一个商品数组，循环打印所有商品名称。
Day5：Map字典（对标JS对象）
知识点
Map键值对结构 {key:value}根据key取值、新增键值、遍历Map List嵌套Map（APP列表最常用数据格式）
练习代码
void main() {
Map user = {"name": "小红", "age": 20, "sex": "女"};
print(user["name"]);
}作业
创建3条用户信息，用 List<Map> 组合，循环遍历全部信息。
Day6：函数、传参、返回值、匿名函数
知识点
自定义函数结构 必传参数、可选参数 函数return返回数据 匿名箭头函数 ()=>{}
练习
// 求和函数
int sum(int a, int b) {
return a + b;
}
void main() {
print(sum(10, 20));
}作业
封装一个函数，传入长宽，计算长方形面积。
Day7：面向对象class类、async/await异步（Dart重中之重）
知识点
class类、构造函数属性、方法 异步 Future、async await（后续网络请求必备，类比JS Promise）
当日任务
手写简单类； 看懂异步延时执行； 复盘前6天所有Dart语法，整理笔记； ✅ 阶段验收：随便给一段简单Dart代码，可以独立读懂、仿写，即可进入Flutter学习。
第二阶段：Flutter基础组件与布局 【共12天，核心衔接HTML布局】
Day8：Flutter项目结构、入口、Scaffold页面骨架
新建Flutter项目，认识lib、android、pubspec.yaml作用； main()、MaterialApp、Scaffold完整页面结构；AppBar顶部导航栏配置（标题、图标）； 练习：自定义页面顶部导航文字与颜色。 作业：搭建一个空白页面框架，修改导航栏主题色。
Day9：基础组件 Text、Container（对标div）、样式TextStyle
Text文字：大小、颜色、加粗、居中、行间距； Container容器：宽高、背景色、圆角、边框、阴影； 类比：Container = HTML <div>，Text =<span>/<p>作业：写一个带圆角白色卡片，内部放置一段文字。
Day10：布局核心 Row横向、Column纵向（对标Flex弹性布局）
Column：垂直上下排列； Row：水平左右排列； 对齐属性：主轴、交叉轴居中、居左、居右； 练习：一行放两个盒子，上下放三组文字。 作业：仿页面个人信息行，左侧文字、右侧文字并排展示。
Day11：Padding边距、SizedBox间距、Expanded自适应占宽
Padding：内边距，对应CSS padding； SizedBox：盒子间距，用来隔开两个组件； Expanded：均分剩余宽度，Flex:1均分效果； 作业：实现一行两个卡片，宽度各占一半。
Day12：Stack层叠布局、Positioned绝对定位（对标position:absolute）
Stack堆叠容器，组件可以上下叠加； Positioned控制上下左右位置； 练习：卡片右上角叠加标签文字。 作业：做一张图片上方叠加文字标题的样式。
Day13：Image图片加载、Icon系统图标
Image.asset本地图片引入（pubspec.yaml配置图片路径）； Icon内置图标使用、大小颜色修改； 作业：页面顶部放一个图标+文字组合的标题栏。
Day14：ListView纵向滚动列表（APP最常用长列表）
ListView基础滚动； ListView.builder高效渲染长列表； 类比：HTML ul滚动列表； 练习：循环渲染5条新闻列表。 作业：手写10条数据列表，实现上下滚动。
Day15：GridView网格布局（商品九宫格）
GridView.count 固定列数网格； 行列间距设置； 作业：完成首页九宫格功能菜单（6个图标格子）。
Day16：SingleChildScrollView整页滚动
适用场景：页面内容超出手机屏幕高度，整体滚动； 易错：Column内容过长会溢出报错，外层包裹滚动组件； 作业：做一个长表单页面，整体可上下滑动。
Day17：常用基础按钮：ElevatedButton、TextButton、IconButton
普通按钮、文字按钮、图标按钮； onPressed点击事件写法； 练习：点击按钮弹出文字打印内容。 作业：页面放置登录、取消两个并排按钮。
Day18：TextField输入框（账号、密码表单）
单行输入框、提示文字hint； 密码隐藏显示、输入内容获取； 作业：完成简易账号密码输入表单页面。
Day19：第二阶段复盘整合
综合练习：完整仿写静态首页（顶部导航+九宫格菜单+新闻列表）； 梳理所有布局组件使用场景，整理思维导图； 验收：能独立根据简单效果图，完成页面布局排版。
第三阶段：交互、路由跳转、状态管理 【共10天】
Day20：弹窗、SnackBar轻提示、Dialog弹窗
底部弹出提示； 确认弹窗、提示弹窗； 练习：点击按钮弹出确认框。
Day21：页面路由跳转（不同页面互相打开、返回）
Navigator.push打开新页面； Navigator.pop返回上一页； 作业：首页点击按钮，跳转到登录页。
Day22：路由跳转传参、接收参数
页面A携带数据，跳转到页面B并读取数据； 类比：网页URL传参； 作业：列表点击条目，把标题传到详情页展示。
Day23：底部Tab导航栏（首页、消息、我的切换）
用Scaffold+BottomNavigationBar搭建底部多页面切换结构； 作业：搭建包含3个tab的底部导航项目框架。
Day24：StatefulWidget有状态组件、setState局部刷新
区分：Stateless无状态页面 / Stateful有状态页面； setState修改数据，页面自动刷新（类比JS修改DOM）； 练习：点击按钮数字累加刷新页面。
Day25：实战：登录页完整静态+点击逻辑
整合输入框、按钮、弹窗、跳转； 需求：账号密码非空判断，空值弹出提示，正确则跳转到首页。
Day26：数据列表点击切换状态
列表点击选中变色，练习状态局部变更。
Day27：简易全局数据共享（新手入门全局状态）
理解不同页面共用一份数据的场景。
Day28：第三方库引入方式（pubspec.yaml安装依赖）
会复制库名称、执行pub get，简单使用第三方插件。
Day29：第三阶段综合作业
完成一套带底部导航、登录跳转、列表点击的小结构项目。
第四阶段：网络请求、本地存储、安卓真机调试 【共7天】
Day30：Dio库网络请求（GET接口拿数据，对标Axios）
Dio安装配置； get请求获取网络JSON数据； JSON数据转List数组渲染到列表。
Day31：POST提交请求（登录提交账号密码）
请求头、请求体参数传递。
Day32：SharedPreferences本地持久化存储
保存简单数据：记住登录状态、用户名；关闭APP再打开数据不消失，对标浏览器LocalStorage。
Day33：安卓模拟器完整使用、常用操作
模拟器截图、安装卸载APP、切换横竖屏、查看打印日志。
Day34：Windows连接安卓手机真机调试
开启手机开发者模式、USB调试，真机运行项目，查看手机真实显示效果。
Day35：安卓状态栏适配、沉浸式状态栏、刘海屏兼容
修改顶部状态栏颜色、透明沉浸样式，解决手机刘海遮挡内容问题。
Day36：安卓权限基础配置（相册、存储权限）
认识 AndroidManifest.xml，学会添加权限声明，避免高安卓版本闪退。
第五阶段：综合实战、打包APK、代码规范收尾 【共6天】
Day37：实战项目一：简易资讯APP
需求：底部导航、首页新闻接口加载、下拉刷新、点击进入详情；完整从头到尾独立开发。
Day38：实战项目二：带登录的个人中心APP
登录保存状态、个人信息展示、退出登录清除缓存。
Day39：APK打包流程
命令打包测试包：flutter build apk；认识打包后的安装包存放目录。
Day40：正式签名打包release包，用于发给别人安装。
Day41：代码规范化学习
项目目录分层：pages页面、api接口、utils工具； 重复组件封装抽取；统一代码缩进、命名规范； 避免所有代码堆在main.dart。
Day42：整体复盘 + 后续进阶方向梳理
整理所有报错笔记； 了解进阶内容：GetX、Bloc状态管理、iOS打包、上架流程； 完成全流程入门，具备独立开发小型APP的能力。
配套使用建议
我可以每天早上给你发当日详细知识点+可直接练习的代码模板； 你当天写完练习、作业，遇到报错可以粘贴代码+报错截图，我帮你订正、讲解问题； 等Dart7天过完，我会给你一份常用Flutter组件速查表，方便写代码时查阅。
我现在先把 Day1完整详细版（带实操步骤、练习、作业） 发给你，你今天直接照着执行，可以吗？
<input id="copy-input" style="box-sizing: border-box; margin: 0px; font-size: inherit; font-family: inherit; line-height: inherit; overflow: visible; touch-action: manipulation; white-space: normal; position: absolute; left: -1000px; z-index: -1000;"/>
-
用微信 “扫一扫”
将文章分享到朋友圈。
关注公众号:xue-jiqiao
本文版权归原作者所有，转载请注明原文来源出处，学技巧网站制作感谢您的支持！
- 1 Flutter新手入门·第一天完整实操手册Windows+Android Studio
- 2 Flutter系统化学习 — Day3 完整详细教程
- 3 Flutter 多端开发新手入门指南（极简路线，从零到可上手）
- 4 Flutter 系统化学习 — Day1 完整详细教程
- 5 Flutter系统化学习 — Day2 完整详细教程
- 6 2 个可直接复制运行的入门示例，基于最新 Flutter + Dart 空安全，包含注释，跟着练就能上手
- 7 AI 能否辅助 Flutter 安卓/ios开发
- 8 零基础（仅会 HTML）Flutter + Android Studio 完整入门路线（Windows 环境，循序渐进详细方案）
- 9 Flutter 系统化全天学习排课计划（总周期：42天，网页HTML转行适配版）【一】
