基于 菜鸟教程 Flutter 教程 的交互式演示项目,包含代码示例 + 实时预览。
- Flutter >= 3.8.0 (Dart >= 3.10)
- 推荐使用 Flutter 3.38+ 以获得完整的 Material 3 支持
# 安装依赖
flutter pub get
# 运行 (Chrome)
flutter run -d chrome
# 或运行在其他设备
flutter devices # 列出可用设备
flutter run -d <device_id>| 包名 | 版本 | 用途 |
|---|---|---|
| http | ^1.1.0 | 网络请求 |
| shared_preferences | ^2.5.2 | 本地持久化存储 |
| 页面 | 难度 | 内容 |
|---|---|---|
| 基础组件 | 入门 | Text、Container、Row、Column、Icon、Button |
| 布局组件 | 入门 | ListView、GridView、Stack、Card、Wrap、SafeArea |
| 图片与资源 | 入门 | 网络图片、Asset、BoxFit、渐变、图标 |
| 表单处理 | 入门 | TextField、验证、Radio、Checkbox |
| 状态管理 | 进阶 | StatefulWidget、setState、状态提升、TabController |
| 主题与样式 | 进阶 | Theme、ColorScheme、TextTheme、Material 3 |
| 本地存储 | 进阶 | SharedPreferences 读写 |
| 路由导航 | 进阶 | Navigator 跳转、传参、返回数据 |
| 网络请求 | 高级 | http 包 GET/POST/PUT/DELETE |
| 动画基础 | 高级 | AnimatedContainer、过渡动画、Hero 动画 |
lib/
├── main.dart # 入口,MaterialApp 配置
└── pages/
├── home_page.dart # 首页导航列表
├── basic_widgets_demo.dart # 基础组件
├── layout_demo.dart # 布局组件
├── image_resource_demo.dart # 图片与资源
├── form_demo.dart # 表单处理
├── state_management_demo.dart # 状态管理
├── theme_style_demo.dart # 主题与样式
├── local_storage_demo.dart # 本地存储
├── navigation_demo.dart # 路由导航
├── network_demo.dart # 网络请求
└── animation_demo.dart # 动画基础
MIT