一款跨平台的开源Github客户端App,提供更丰富的功能,更好体验,旨在更好的日常管理和维护个人Github,提供更好更方便的驾车体验~~Σ( ̄。 ̄ノ)ノ。项目涉及各种常用控件、网络、数据库、设计模式、主题切换、多语言、状态管理(Redux、Riverpod、Provider)等。在开发学习过程中,提供丰富的同款对比:
-
简单 Flutter 独立学习项目 ( /~https://github.com/CarGuo/gsy_flutter_demo )
-
同款Weex版 ( /~https://github.com/CarGuo/GSYGithubAppWeex )
-
同款ReactNative版 ( /~https://github.com/CarGuo/GSYGithubApp )
-
同款Android Kotlin版本( /~https://github.com/CarGuo/GSYGithubAppKotlin )
公众号 | 掘金 | 知乎 | CSDN | 简书 |
---|---|---|---|---|
GSYTech | 点我 | 点我 | 点我 | 点我 |
-
GSY老书:《Flutter开发实战详解》上架啦:京东 / 当当 / 电子版京东读书和Kindle
因为是偏学习展示项目,所以项目里会有各式各样的模式、库、UI等,请不要介意
0、 全局状态管理目前有多种模式,包括 Provider、Redux、Riverpod 等
1、 TrendPage : 目前采用纯 riverpod 状态管理,演示
2、 Scoped Model:目前在 RepositoryDetailPage 出使用
3、 Redux:目前展示了全局登陆和用户信息等上面使用。
4、 ReposDetailPage:目前使用了 Provider 状态管理展示组合使用。
5、 LoginPage:另类的 BLoC 模式。
6、 Repos 等请求展示了 graphQL
列表显示有多个,其中:
1、gsy_pull_load_widget.dart.dart
common_list_page.dart 等使用,搭配 gsy_list_state.dart 使用
2、gsy_pull_new_load_widget.dart.dart
dynamic_page.dart 等使用,搭配 gsy_bloc_list_state.dart 使用
有 iOS 和 Android 两种风格下拉风格支持
3、gsy_nested_pull_load_widget.dart
trend_page.dart 等使用,配置sliver 效果
1、配置好Flutter开发环境(目前Flutter SDK 版本 3.29),可参阅 【搭建环境】。
2、clone代码,执行Packages get
安装第三方包。(因为某些不可抗力原因,国内可能需要设置代理: 代理环境变量)
class NetConfig {
static const CLIENT_ID = "xxxx";
static const CLIENT_SECRET = "xxxxxxxxxxx";
}
注册 Github APP 传送门,当然,前提是你现有一个github账号(~ ̄▽ ̄)~ 。
1、本地 Flutter SDK 版本 3.29 ; 2、是否执行过
flutter pub get
;3、 网络等问题参考: 如果出现登陆失败或者请求失败
Apk下载链接: Apk下载链接1
Apk下载链接: Apk下载链接2
类型 | 二维码 |
---|---|
Apk二维码 | ![]() |
iOS暂无下载 |
-
如果包同步失败,一般都是因为没设置包代理,可以参考:环境变量问题
当前 Flutter SDK 版本 3.29
用户交互 → UI层(Widget/Page) → 状态层(Redux/Provider/Riverpod) → 服务层(Repositories)
→ 网络层(Net) → GitHub API → 数据模型(Model) → 本地存储(DB) → UI更新
┌─────────────────────────────────────────────────────────────────┐
│ GSY GitHub App │
├─────────────┬───────────────┬────────────────┬─────────────────┤
│ UI Layer │ State Layer │ Service Layer │ Data Layer │
├─────────────┼───────────────┼────────────────┼─────────────────┤
│ │ │ │ │
│ ┌─────────┐│ ┌─────────┐ │ ┌─────────┐ │ ┌─────────┐ │
│ │ Pages ││ │ Redux │ │ │Repositories│ │ │ Models │ │
│ └─────────┘│ └─────────┘ │ └─────────┘ │ └─────────┘ │
│ │ │ │ │
│ ┌─────────┐│ ┌─────────┐ │ ┌─────────┐ │ ┌─────────┐ │
│ │ Widgets ││ │ Provider│ │ │Network API│ │ │Database │ │
│ └─────────┘│ └─────────┘ │ └─────────┘ │ └─────────┘ │
│ │ │ │ │
│ ┌─────────┐│ ┌─────────┐ │ │ │
│ │Common UI││ │Riverpod │ │ │ │
│ └─────────┘│ └─────────┘ │ │ │
│ │ │ │ │
└─────────────┴───────────────┴────────────────┴─────────────────┘
lib/
├── main.dart # 应用入口点
├── main_prod.dart # 生产环境入口点
├── app.dart # 应用配置与路由
├── common/ # 公共功能模块
│ ├── config/ # 应用配置
│ ├── event/ # 事件总线
│ ├── local/ # 本地化
│ ├── localization/ # 多语言支持
│ ├── net/ # 网络请求
│ ├── repositories/ # 数据仓库
│ ├── router/ # 路由配置
│ ├── style/ # 样式配置
│ └── utils/ # 工具类
├── db/ # 数据库相关
│ ├── provider/ # 数据库提供者
│ ├── sql_manager.dart # SQL管理器
│ └── sql_provider.dart # SQL提供者
├── env/ # 环境配置
├── model/ # 数据模型
├── page/ # 页面
│ ├── debug/ # 调试页面
│ ├── dynamic/ # 动态页面
│ ├── home/ # 主页
│ ├── issue/ # Issue相关页面
│ ├── login/ # 登录页面
│ ├── push/ # 推送相关页面
│ ├── release/ # 发布相关页面
│ ├── repos/ # 仓库相关页面
│ ├── search/ # 搜索页面
│ ├── trend/ # 趋势页面
│ └── user/ # 用户相关页面
├── provider/ # Provider状态管理
├── redux/ # Redux状态管理
│ ├── middleware/ # Redux中间件
│ ├── gsy_state.dart # Redux状态定义
│ ├── login_redux.dart # 登录状态管理
│ └── user_redux.dart # 用户状态管理
├── test/ # 测试相关
└── widget/ # 自定义组件
├── anima/ # 动画组件
├── markdown/ # Markdown渲染组件
├── menu/ # 菜单组件
├── particle/ # 粒子效果组件
├── pull/ # 下拉刷新组件
└── state/ # 状态相关组件
riverpod 页面内状态管理:
┌───────────────────────────────────────────────────────────────────────────┐
│ TrendPage Architecture │
└───────────────────────────────────────────────────────────────────────────┘
│
▼
┌───────────────────────────────────────────────────────────────────────────┐
│ Global State │
│ ┌───────────────────┐ ┌────────────────────┐ ┌────────────────────┐ │
│ │ appThemeProvider │ │ appLocalProvider │ │ appGrepProvider │ │
│ │ (Theme Data) │ │ (Localization) │ │ (Grayscale Mode) │ │
│ └───────────────────┘ └────────────────────┘ └────────────────────┘ │
└───────────────────────────────────────────────────────────────────────────┘
│
▼
┌───────────────────────────────────────────────────────────────────────────┐
│ TrendPage Specific State │
├───────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ Riverpod Providers │ │
│ │ ┌───────────────────────────────┐ ┌─────────────────────────────┐ │ │
│ │ │ trendFirstProvider │ │ trendSecondProvider │ │ │
│ │ │ (Primary Data Source) │ │ (Secondary Data Source) │ │ │
│ │ │ - Takes time & language params│ │ - Depends on firstProvider │ │ │
│ │ │ - Fetches trending repos │ │ - Processes additional data │ │ │
│ │ └───────────────────────────────┘ └─────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ Local State (StatefulWidget) │ │
│ │ ┌───────────────────────────┐ ┌───────────────────────────────┐ │ │
│ │ │ User Interface Controls │ │ Filter Parameters │ │ │
│ │ │ - scrollController │ │ - selectTime (daily/weekly) │ │ │
│ │ │ - _isOpen │ │ - selectType (language) │ │ │
│ │ │ - refreshIndicatorKey │ │ - selectTimeIndex │ │ │
│ │ └───────────────────────────┘ │ - selectTypeIndex │ │ │
│ │ └───────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ Global State Flags │ │
│ │ ┌───────────────────────────────┐ ┌─────────────────────────────┐ │ │
│ │ │ trendLoadingState (boolean) │ │ trendRequestedState (bool) │ │ │
│ │ │ - Tracks loading status │ │ - Tracks if data requested │ │ │
│ │ └───────────────────────────────┘ └─────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
└───────────────────────────────────────────────────────────────────────────┘
│
▼
┌───────────────────────────────────────────────────────────────────────────┐
│ Data Layer │
│ ┌───────────────────────────────────────────────────────────────────────┐ │
│ │ ReposRepository │ │
│ │ ┌────────────────────────┐ ┌─────────────────────────────────┐ │ │
│ │ │ Network Request │───┬──▶│ TrendRepositoryDbProvider │ │ │
│ │ │ - API calls │ │ │ - Database caching │ │ │
│ │ └────────────────────────┘ │ │ - Offline data retrieval │ │ │
│ │ │ └─────────────────────────────────┘ │ │
│ │ │ │ │
│ │ │ ┌─────────────────────────────────┐ │ │
│ │ └──▶│ TrendingRepoModel │ │ │
│ │ │ - Data model for trending repos │ │ │
│ │ └─────────────────────────────────┘ │ │
│ └───────────────────────────────────────────────────────────────────────┘ │
└───────────────────────────────────────────────────────────────────────────┘
│
▼
┌───────────────────────────────────────────────────────────────────────────┐
│ UI Components │
│ ┌────────────────────────────┐ ┌─────────────────────────┐ ┌───────────┐ │
│ │ TrendTypeModel │ │ ReposViewModel │ │ ReposItem │ │
│ │ - Filter options │ │ - UI data wrapper │ │ - UI │ │
│ └────────────────────────────┘ └─────────────────────────┘ └───────────┘ │
└───────────────────────────────────────────────────────────────────────────┘
provider 页面内状态管理:
+-----------------------------------------------------+
| App User Interface |
+-----------------------------------------------------+
|
v
+-----------------------------------------------------+
| RepositoryDetailPage (StatefulWidget) |
| with SingleTickerProviderStateMixin |
+-----------------------------------------------------+
|
v
+-----------------------------------------------------+
| MultiProvider |
+-----------------------------------------------------+
| |
v v
+------------------+ +-----------------------+
| ReposNetWork |<----------| ReposDetailProvider |
| Provider | | |
+---------+--------+ +-----------------------+
| |
| |
v v
+-----------------------------------------------------+
| Repository Data Services |
| (ReposRepository, IssueRepository) |
+-----------------------------------------------------+
|
v
+-----------------------------------------------------+
| Four Tab Pages (Consumers) |
+-----------------------------------------------------+
| | | |
v v v v
+----------+ +----------+ +----------+ +----------+
| Info | | Readme | | Issues | | Files |
| Page | | Page | | Page | | Page |
+----------+ +----------+ +----------+ +----------+
| | | |
| | | |
v v v v
+-----------------------------------------------------+
| GlobalKeys for Tab Access |
| (infoListKey, readmeKey, issueListKey, fileListKey) |
+-----------------------------------------------------+
CarGuo/GSYGithubAppFlutter is licensed under the
Apache License 2.0
A permissive license whose main conditions require preservation of copyright and license notices.
Contributors provide an express grant of patent rights.
Licensed works, modifications, and larger works may be distributed under different terms and without source code.