Skip to content

szhdev/Flutter-Basic-Widgets

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Flutter 菜鸟教程 Demo

基于 菜鸟教程 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        # 动画基础

License

MIT

About

Flutter 菜鸟教程 基础组件学习和使用

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages