ByteNoteByteNote
字

字节笔记本

2026年2月22日

flutter-examples：Flutter 初学者必备的 37+ 示例应用集合

#Flutter 专栏

本文介绍 flutter-examples，一个专为 Flutter 初学者设计的开源示例项目集合。该项目由 Nishant Srivastava 开发维护，在 GitHub 上已获得 7.2k+ stars 和 1.7k+ forks，是 Flutter 开发者入门学习的优质资源。

项目简介

flutter-examples 是一个包含 37+ 个独立示例应用的仓库，每个示例都专注于展示 Flutter 的特定功能或特性。这些示例应用彼此隔离，开发者可以单独检出和运行，非常适合循序渐进地学习 Flutter 开发。

该项目已被收录于：

核心特性

  • 独立示例应用：每个示例都是完整的可运行项目，互不依赖
  • 覆盖全面：从基础组件到高级功能，涵盖 Flutter 开发的各个方面
  • 即开即用：克隆仓库后即可运行，无需复杂配置
  • 持续更新：定期跟进 Flutter 最新版本和最佳实践
  • 社区驱动：接受 PR 贡献，鼓励开发者参与

技术栈

语言占比说明
Dart80.1%主要开发语言
C++4.9%平台特定实现
CMake3.7%构建配置
Objective-C3.2%iOS 平台支持
Swift2.8%iOS 平台支持
Ruby2.3%工具脚本

示例应用分类

基础组件

  • Stateful Widget - 有状态组件示例
  • Stateless Widgets - 无状态组件示例
  • Simple Material App - Material Design 基础应用

导航与路由

  • Custom Home Drawer - 自定义抽屉导航
  • Navigation Drawer - 标准导航抽屉
  • Bottom Navigation Bar - 底部导航栏
  • Handling Routes - 路由处理

UI 组件

  • DropDown Button - 下拉按钮
  • Bottom Sheet - 底部弹窗
  • ListView - 列表视图
  • Stepper - 步骤指示器
  • Alert Dialog - 警告对话框
  • SnackBar - 底部提示条
  • ExpansionPanel - 可展开面板
  • Sliver App Bar - 弹性应用栏
  • InteractiveViewer - 交互式查看器
  • ListWheelScrollView - 滚轮列表

样式与主题

  • Using Theme - 主题使用
  • Using Gradient - 渐变效果
  • Using Custom Fonts - 自定义字体

数据与存储

  • Load Local JSON - 加载本地 JSON
  • Persist Key Value - 键值对持久化
  • Save Data Locally with SQLite - SQLite 本地存储
  • Infinite List - 无限滚动列表

网络与媒体

  • Using HTTP GET - HTTP 请求
  • Load Local Image - 加载本地图片
  • Image from Network - 网络图片加载
  • Image Editor - 图片编辑
  • View PDF File - PDF 文件查看

Firebase 集成

  • Firebase Analytics - 数据分析
  • Firebase Crashlytics - 崩溃报告
  • Firebase DB - 实时数据库
  • Push Notifications - 推送通知

认证与安全

  • Google Signin - Google 登录
  • Firebase Google Authentication - Firebase 认证
  • Biometrics - 生物识别

状态管理

  • Todo list using Provider - Provider 状态管理
  • GetX Counter App - GetX 状态管理

完整应用示例

  • Covid-19 Mobile App - 疫情追踪应用
  • BMI Calculator - BMI 计算器
  • Expense Planner - 支出规划器
  • Notes App - 笔记应用
  • Tip Calculator - 小费计算器
  • News Memes App - 新闻梗图应用
  • Lunch App - 午餐选择应用
  • Tic Tac Toe - 井字棋游戏

快速开始

环境要求

  • Flutter SDK 已安装
  • Dart SDK
  • Android Studio / Xcode（用于模拟器）

安装步骤

bash
# 克隆仓库
git clone https://github.com/nisrulz/flutter-examples.git
cd flutter-examples

# 获取所有依赖
./get_packages.sh

# 或者进入特定示例目录
cd stateless_widgets
flutter pub get
flutter run

单独检出示例

如果只需要某个特定示例，可以使用 svn 单独检出：

bash
# 示例：只检出 stateless_widgets
svn export https://github.com/nisrulz/flutter-examples/trunk/stateless_widgets

使用示例

运行 Stateless Widget 示例

bash
cd stateless_widgets
flutter pub get
flutter run

运行 Provider 状态管理示例

bash
cd todo_list_using_provider
flutter pub get
flutter run

运行完整应用 - BMI 计算器

bash
cd bmi_calculator
flutter pub get
flutter run

项目结构

text
flutter-examples/
├── analytics_integration/      # Firebase 分析
├── animation_example/          # 动画示例
├── biometrics/                 # 生物识别
├── bmi_calculator/             # BMI 计算器
├── bottom_sheet/               # 底部弹窗
├── covid19_mobile_app/         # 疫情应用
├── custom_home_drawer/         # 自定义抽屉
├── dropdown_button/            # 下拉按钮
├── enabling_splash_screen/     # 启动屏
├── expense_planner/            # 支出规划
├── firebase_crash_reporting/   # 崩溃报告
├── firebase_google_authentication/  # Firebase 认证
├── getx_counter_app/           # GetX 示例
├── google_signin/              # Google 登录
├── grid_layout/                # 网格布局
├── handling_routes/            # 路由处理
├── image_editor/               # 图片编辑
├── image_from_network/         # 网络图片
├── infinite_list/              # 无限列表
├── load_local_image/           # 本地图片
├── load_local_json/            # 本地 JSON
├── lunch_app/                  # 午餐应用
├── navigation_drawer/          # 导航抽屉
├── news_memes_app/             # 新闻梗图
├── persist_key_value/          # 键值存储
├── push_notifications/         # 推送通知
├── save_data_locally_with_sqlite/  # SQLite
├── scan_qr_code/               # 二维码扫描
├── simple_material_app/        # Material 应用
├── sliver_app_bar_example/     # Sliver 应用栏
├── stateful_widget/            # 有状态组件
├── stateless_widgets/          # 无状态组件
├── statless_counter_app/       # 计数器应用
├── tic_tac_toe/                # 井字棋
├── tip_calculator/             # 小费计算
└── todo_list_using_provider/   # Provider 示例

贡献指南

  1. Fork 本仓库
  2. 创建特性分支 (git checkout -b feature/amazing-example)
  3. 提交更改 (git commit -m 'Add some amazing example')
  4. 推送到分支 (git push origin feature/amazing-example)
  5. 创建 Pull Request（请针对 develop 分支）

PR 规范

  • 包名格式：github.nisrulz.<app_name>
  • 确保代码通过 Flutter 分析器检查
  • 提供清晰的示例说明

相关资源

项目链接

提示：该项目非常适合 Flutter 初学者作为入门学习资源，也适合有经验的开发者快速查找特定功能的实现参考。

Flutter 专栏
上一篇

LiveWhisper：基于 OpenAI Whisper 的实时语音转录工具

下一篇

flutter-examples：Flutter 初学者必备的 37+ 示例应用集合

分享: