Flutter实战：手把手教你开发一个跨平台待办事项App
一、为什么选择Flutter？
作为Google推出的跨平台UI框架，Flutter凭借以下优势成为2023年最受欢迎的移动开发技术之一：
- 🚀高性能：直接编译为ARM代码，无JS桥接
- 🎨丰富组件库：自带100+精美Material/Cupertino组件
- 🔥热重载：代码修改秒级生效
- 🌐全平台覆盖：一套代码编译iOS/Android/Web/Desktop
根据2023 StackOverflow开发者调查，Flutter已成为最受欢迎的跨平台框架，超过React Native 12个百分点！
二、环境准备（5分钟快速搭建）
# 1. 安装Flutter SDK（Windows示例） git clone https://github.com/flutter/flutter.git -b stable # 2. 添加环境变量 PATH="$PATH:`pwd`/flutter/bin" # 3. 检查依赖 flutter doctorhttps://img-blog.csdnimg.cn/direct/9a8b7c6d5e4f3a2b1c0d9e8f7a6b5c4d.png
✅ 绿色对勾表示环境配置成功！Android Studio需安装Flutter插件
三、实战：开发Todo应用核心功能
1. 创建项目骨架
flutter create flutter_todo cd flutter_todo2. 核心功能实现（main.dart）
(1) 数据模型定义
// lib/models/task.dart class Task { String title; bool isDone; Task({required this.title, this.isDone = false}); // 切换任务状态 void toggleDone() { isDone = !isDone; } }(2) 任务列表UI实现
// lib/widgets/task_list.dart import 'package:flutter/material.dart'; import '../models/task.dart'; class TaskList extends StatefulWidget { @override _TaskListState createState() => _TaskListState(); } class _TaskListState extends State<TaskList> { List<Task> tasks = [ Task(title: "学习Flutter基础", isDone: true), Task(title: "完成Todo App", isDone: false), ]; void _addTask(String newTaskTitle) { setState(() { tasks.add(Task(title: newTaskTitle)); }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Flutter Todo')), body: ListView.builder( itemCount: tasks.length, itemBuilder: (context, index) { return CheckboxListTile( value: tasks[index].isDone, onChanged: (bool? value) { setState(() { tasks[index].toggleDone(); }); }, title: Text( tasks[index].title, style: TextStyle( decoration: tasks[index].isDone ? TextDecoration.lineThrough : TextDecoration.none, ), ), ); }, ), floatingActionButton: FloatingActionButton( onPressed: () => _showAddTaskDialog(context), child: Icon(Icons.add), ), ); } void _showAddTaskDialog(BuildContext context) { String newTaskTitle = ''; showDialog( context: context, builder: (context) => AlertDialog( title: Text('添加新任务'), content: TextField( onChanged: (value) => newTaskTitle = value, decoration: InputDecoration(hintText: '输入任务内容'), ), actions: [ TextButton( onPressed: () => Navigator.pop(context), child: Text('取消'), ), TextButton( onPressed: () { if (newTaskTitle.isNotEmpty) { _addTask(newTaskTitle); Navigator.pop(context); } }, child: Text('添加'), ), ], ), ); } }(3) 主入口文件
// lib/main.dart import 'package:flutter/material.dart'; import 'widgets/task_list.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Todo', theme: ThemeData( primarySwatch: Colors.blue, useMaterial3: true, // 启用Material 3设计语言 ), home: TaskList(), debugShowCheckedModeBanner: false, // 隐藏右上角debug标签 ); } }四、关键代码解析
1. 状态管理核心逻辑
void _addTask(String newTaskTitle) { setState(() { // ⚠️ 关键：触发UI重建 tasks.add(Task(title: newTaskTitle)); }); }setState()是StatefulWidget的核心方法- 任何状态变更必须包裹在此方法内
- Flutter会自动重建依赖该状态的Widget
2. 动态列表构建技巧
ListView.builder( itemCount: tasks.length, itemBuilder: (context, index) { return CheckboxListTile(...); }, )ListView.builder实现懒加载，性能优化关键- 仅渲染可视区域内的列表项
- 比普通ListView节省70%+内存
3. 对话框交互设计
showDialog( context: context, builder: (context) => AlertDialog(...) )- 使用Material Design标准对话框
- 通过
Navigator.pop控制对话框关闭 - 支持异步数据传递（通过Future）
五、运行效果展示
https://img-blog.csdnimg.cn/direct/3a2b1c0d9e8f7a6b5c4d3e2f1a0b9c8d.png
- 基础功能：任务添加/状态切换
- 交互体验：Material Design标准动效
- 平台适配：Android/iOS风格自动适配
💡小技巧：在iOS模拟器运行时会自动切换为Cupertino风格组件
六、性能优化建议（进阶）
列表性能：大数据量时使用
const构造函数CheckboxListTile( key: ValueKey(task.title), // 添加唯一key ... )状态管理升级：复杂应用建议使用：
- Provider（官方推荐）
- Riverpod（Provider升级版）
- Bloc模式
构建Release包：
flutter build apk --release flutter build ios --release
七、完整源码获取
👉GitHub仓库地址：https://github.com/yourname/flutter-todo
包含以下增强功能：
- 本地存储（使用shared_preferences）
- 暗黑模式支持
- 滑动删除动画
- 任务分类标签
https://img-blog.csdnimg.cn/direct/5e4f3a2b1c0d9e8f7a6b5c4d3e2f1a0b.png
八、总结与思考
通过这个Todo应用，我们实践了：
- ✅ Flutter基础组件使用
- ✅ 状态管理核心机制
- ✅ 跨平台UI适配技巧
- ✅ 基础性能优化方法