目标先跑起来再改代码再故意犯错最后看答案。一、先跑起来最小 Flutter 程序创建项目flutter create my_first_appcdmy_first_app flutter run-dchrome把 lib/main.dart 改成importpackage:flutter/material.dart;voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});overrideWidgetbuild(BuildContextcontext){returnMaterialApp(home:Scaffold(body:Center(child:Text(Hello Flutter),),),);}}在终端按 r 触发热重载把文字改成 你好Flutter界面会立刻变化。核心概念一句话· Widget界面元素。· Widget 树Widget 层层嵌套。· StatelessWidget不可变不能自己改自己。· StatefulWidget有状态可通过 setState() 刷新界面。· 热重载改代码后按 r不重启应用就能看到变化。二、多元化习题练习0环境自检题目要求运行 flutter doctor记录所有带 [✗] 的项目逐个解决。再次运行直到全部变成 [✓]。答案常用命令flutter doctor flutter doctor --android-licenses常见问题· Android SDK 没装安装 Android Studio。· Chrome 没装安装 Chrome。· PATH 没配把 Flutter 的 bin 目录加入环境变量。· 许可证没接受运行 flutter doctor --android-licenses。答案解读flutter doctor 是环境体检工具。它不自动修环境但会告诉你缺什么。环境问题解决一次后面开发会顺畅很多。练习1选择题题目要求在 Flutter 中哪个 Widget 用于垂直排列子元素A. RowB. ColumnC. StackD. Center答案B。答案解读Row 是水平排列Column 是垂直排列Stack 是层叠布局Center 是居中。做名片、列表、计数器时最常用的就是 Column。练习2判断题题目要求判断对错并说明理由Flutter 中“一切皆 Widget”。StatelessWidget 可以通过 setState() 更新界面。答案对。错。答案解读Flutter 的界面由 Widget 组成文字、按钮、布局、间距都是 Widget。StatelessWidget 不可变没有 setState()只有 StatefulWidget 的 State 中才能调用 setState() 触发重建。练习3连线题题目要求将左侧 Widget 与右侧作用连线左侧 右侧Center 垂直排列Column 显示文字Text 居中SizedBox 页面骨架Scaffold 占位/间距答案· Center — 居中· Column — 垂直排列· Text — 显示文字· SizedBox — 占位/间距· Scaffold — 页面骨架答案解读这些是入门最常用的 Widget。先记住作用再通过组合搭界面。Flutter 开发就是不断把小组件拼成大组件。练习4排序题题目要求将以下 Widget 按“从外到内”的嵌套顺序排列Text、Scaffold、MaterialApp、Center答案MaterialApp → Scaffold → Center → Text答案解读MaterialApp 是应用外壳Scaffold 是页面骨架Center 让内容居中Text 是最里面显示的文字。理解嵌套顺序就理解了 Widget 树。练习5填空题题目要求补全代码使文字居中显示“你好Flutter”body:______(child:______(你好Flutter),),答案body:Center(child:Text(你好Flutter),),答案解读Center 负责居中Text 负责显示文字。body 是 Scaffold 的主体区域。如果直接写 body: Text(…)文字会顶到左上角。练习6代码预测题题目要求阅读代码预测点击按钮 3 次后屏幕显示什么classDemoextendsStatefulWidget{constDemo({super.key});overrideStateDemocreateState()_DemoState();}class_DemoStateextendsStateDemo{int count0;overrideWidgetbuild(BuildContextcontext){returnScaffold(body:Center(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[Text($count),ElevatedButton(onPressed:()setState(()count),child:constText(1),),],),),);}}答案显示 3。答案解读初始 count 0。每次点击执行 setState(() count)count 加 1并通知 Flutter 重新构建界面。点 3 次后count 变成 3所以 Text(‘$count’) 显示 3。练习7改错题题目要求下面代码有错误找出来并修正voidmain(){runApp(MyApp);}classMyAppextendsStatelessWidget{overrideWidgetbuild(BuildContextcontext){returnMaterialApp(home:Scaffold(body:Text(练习7),),);}}答案修正后voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});overrideWidgetbuild(BuildContextcontext){returnMaterialApp(home:Scaffold(body:constCenter(child:Text(练习7),),),);}}答案解读runApp(MyApp) 传入的是类名不是 Widget 实例应该写成 runApp(MyApp()) 或 runApp(const MyApp())。使用 const MyApp() 时需要给 MyApp 添加 const MyApp({super.key}); 构造函数。另外Text 直接放 body 会顶到左上角通常包一层 Center。练习8补全代码题题目要求补全下面代码实现计数器点击按钮数字加 1。classCounterextendsStatefulWidget{constCounter({super.key});overrideStateCountercreateState()______;}class_CounterStateextendsStateCounter{int count0;overrideWidgetbuild(BuildContextcontext){returnScaffold(body:Center(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[Text($count,style:constTextStyle(fontSize:48)),ElevatedButton(onPressed:(){______((){______;});},child:constText(1),),],),),);}}答案classCounterextendsStatefulWidget{constCounter({super.key});overrideStateCountercreateState()_CounterState();}class_CounterStateextendsStateCounter{int count0;overrideWidgetbuild(BuildContextcontext){returnScaffold(body:Center(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[Text($count,style:constTextStyle(fontSize:48)),ElevatedButton(onPressed:(){setState((){count;});},child:constText(1),),],),),);}}答案解读createState() 返回 _CounterState()。按钮点击时用 setState() 包裹状态修改count 让数字加 1。setState() 会触发 build 重新执行界面更新。练习9动手编码题个人名片题目要求用 Column、Text、SizedBox 做一个个人名片显示三行信息姓名、职业、城市。要求垂直排列每行之间有间距。答案body:Center(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:const[Text(张三,style:TextStyle(fontSize:24,fontWeight:FontWeight.bold),),SizedBox(height:8),Text(Flutter 开发者),SizedBox(height:8),Text(青岛),],),),答案解读Column 垂直排列Center 整体居中SizedBox(height: 8) 制造间距。TextStyle 让姓名更突出。这个练习训练的是 Widget 组合能力。练习10动手编码题点赞计数器题目要求做一个“收到 N 个赞”的页面点击按钮 N 加 1。答案classLikeAppextendsStatefulWidget{constLikeApp({super.key});overrideStateLikeAppcreateState()_LikeAppState();}class_LikeAppStateextendsStateLikeApp{int likes0;overrideWidgetbuild(BuildContextcontext){returnScaffold(body:Center(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[Text(收到$likes个赞,style:constTextStyle(fontSize:24)),constSizedBox(height:16),ElevatedButton.icon(onPressed:(){setState((){likes;});},icon:constIcon(Icons.thumb_up),label:constText(点赞),),],),),);}}答案解读likes 是可变状态放在 State 中。点击按钮时 setState() 让 likes 加 1界面中的 $likes 自动刷新。这个练习把“展示数据”和“修改数据”结合了起来。练习11综合挑战名片 点赞题目要求把练习9和练习10合并上面显示个人名片下面显示“收到 N 个赞”点击按钮 N 加 1。答案classProfileCardextendsStatefulWidget{constProfileCard({super.key});overrideStateProfileCardcreateState()_ProfileCardState();}class_ProfileCardStateextendsStateProfileCard{int likes0;overrideWidgetbuild(BuildContextcontext){returnScaffold(body:Center(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[constText(张三,style:TextStyle(fontSize:24,fontWeight:FontWeight.bold),),constSizedBox(height:8),constText(Flutter 开发者 · 青岛),constSizedBox(height:24),Text(收到$likes个赞,style:constTextStyle(fontSize:18)),constSizedBox(height:12),ElevatedButton.icon(onPressed:(){setState((){likes;});},icon:constIcon(Icons.thumb_up),label:constText(点赞),),],),),);}}答案解读静态信息直接写死动态点赞数用 likes 保存。整个页面是 StatefulWidget因为有点赞交互。setState() 只修改 likesFlutter 自动重建相关部分。练习12开放式挑战今日待办题目要求用 Text、Column、Center、SizedBox 设计一个“今日待办”页面。至少包含 5 个 Widget 嵌套至少一处使用 TextStyle 做样式区分。答案示例body:Center(child:Padding(padding:constEdgeInsets.all(24),child:Column(mainAxisAlignment:MainAxisAlignment.center,crossAxisAlignment:CrossAxisAlignment.start,children:const[Text(今日待办,style:TextStyle(fontSize:28,fontWeight:FontWeight.bold,color:Colors.blue,),),SizedBox(height:20),Text(1. 学习 Flutter 基础,style:TextStyle(fontSize:18)),SizedBox(height:10),Text(2. 完成第1课习题,style:TextStyle(fontSize:18,color:Colors.green),),SizedBox(height:10),Text(3. 复习 Widget 树,style:TextStyle(fontSize:18,decoration:TextDecoration.lineThrough,),),SizedBox(height:30),Text(加油今天也要练中学,style:TextStyle(fontSize:16,fontStyle:FontStyle.italic,color:Colors.grey,),),],),),),答案解读这个页面包含 Center、Padding、Column、Text、SizedBox 多层嵌套满足 Widget 树练习。TextStyle 分别做了标题加粗变蓝、完成项绿色、已完成项删除线、底部文字斜体灰色。开放题没有唯一答案重点是能组合、能运行、能改样式。练习13错误观察挑战题目要求在任意一个能运行的例子中故意删掉一个右括号或把 Column 改成不存在的 Colum运行后观察控制台错误。记录你看到的关键错误词。答案常见错误示例Error: Expected ) before this.或The method Colum isnt defined for the type _MyAppState.答案解读Flutter 报错通常会给出文件名、行号和原因。新手最重要的能力之一就是学会看错误关键词Expected 表示缺少符号isn’t defined 表示名字写错The named parameter … isn’t defined 表示参数名不对。故意改坏代码再修好是练中学非常有效的方法。三、本课小结这一课你完成了跑通第一个 Flutter 应用认识 Widget、Widget 树、StatelessWidget、StatefulWidget、setState、热重载做了 14 个练习覆盖环境、选择、判断、连线、排序、填空、代码预测、改错、补全、动手编码、综合挑战、开放设计和错误观察。下一课会进入布局系统Row、Column、Container、Expanded、Padding、MainAxisAlignment继续用“练中学”的方式搭出更复杂的界面。