gsy_github_app_flutter README

The project's README from github.com/CarGuo/gsy_github_app_flutter. As one markdown file: README.md.

Github Actions GitHub stars GitHub forks GitHub issues GitHub license star

English Readme

一款跨平台的开源Github客户端App,提供更丰富的功能,更好体验,旨在更好的日常管理和维护个人Github,提供更好更方便的驾车体验~~Σ( ̄。 ̄ノ)ノ。项目涉及各种常用控件、网络、数据库、设计模式、主题切换、多语言、状态管理(Redux、Riverpod、Provider)等。在开发学习过程中,提供丰富的同款对比:

相关文章

公众号 掘金 知乎 CSDN 简书
GSYTech 点我 点我 点我 点我


须知

因为是偏学习展示项目,所以项目里会有各式各样的模式、库、UI等,请不要介意

0、 全局状态管理目前有多种模式,包括 Provider、Redux、Riverpod 等

1、 TrendPage : 目前采用纯 riverpod 状态管理,演示

2、 Provider:目前在 RepositoryDetailPage 出使用

3、 Redux:目前展示了全局登陆和用户信息等上面使用。

4、 riverpod:目前用于管理全局灰度,多语言。

5、 Repos 等请求展示了 graphQL

6、 Redux:目前展示了全局登陆和用户信息等上面使用。

7、 Signals:目前用于 NotifyPage、RepositoryDetailFileListPage 页面内状态管理

列表显示有多个,其中:

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.47.2,仓库已在 .fvmrc 里锁定该版本,推荐使用 FVM 一键切换:fvm install 3.47.2 && fvm use 3.47.2),可参阅 【搭建环境】。

2、clone代码,执行Packages get安装第三方包。(因为某些不可抗力原因,国内可能需要设置代理: 代理环境变量)

3、重点:你需要自己在lib/common/config/目录下 创建一个ignoreConfig.dart文件,然后输入你申请的Github client_id 和 client_secret。

 class NetConfig {
   static const CLIENT_ID = "xxxx";
 
   static const CLIENT_SECRET = "xxxxxxxxxxx";
 }

  注册 Github APP 传送门,当然,前提是你现有一个github账号(~ ̄▽ ̄)~ 。

4、如果使用安全登录(授权登录),那么在上述注册 Github App 的 Authorization callback URL 一栏必须填入 gsygithubapp://authed

5、运行之前请注意下

1、本地 Flutter SDK 版本 3.47.2(.fvmrc 已锁定,可用 fvm use 切换); 2、是否执行过 flutter pub get;3、 网络等问题参考: 如果出现登陆失败或者请求失败

下载

Apk下载链接: Apk下载链接1

Apk下载链接: Apk下载链接2

openapk

类型 二维码
Apk二维码
iOS暂无下载

项目结构图

常见问题

示例图片

示例图片

框架

当前 Flutter SDK 版本 3.47.2

用户交互 → 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 │  │                │                 │
│  └─────────┘│  └─────────┘  │                │                 │
│             │               │                │                 │
│             │  ┌─────────┐  │                │                 │
│             │  │ Signals │  │                │                 │
│             │  └─────────┘  │                │                 │
│             │               │                │                 │
└─────────────┴───────────────┴────────────────┴─────────────────┘
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 页面内状态管理:

┌───────────────────────────────────────────────────────────────────────────┐
│                         Page Architecture Overview                         │
└───────────────────────────────────────────────────────────────────────────┘
                                      │
                                      ▼
┌───────────────────────────────────────────────────────────────────────────┐
│                              Global State                                  │
│  ┌───────────────────┐   ┌────────────────────┐   ┌────────────────────┐  │
│  │ appThemeProvider  │   │ appLocalProvider   │   │ appGrepProvider    │  │
│  │ (Theme Data)      │   │ (Localization)     │   │ (Grayscale Mode)   │  │
│  └───────────────────┘   └────────────────────┘   └────────────────────┘  │
└───────────────────────────────────────────────────────────────────────────┘
                                      │
                     ┌────────────────┴────────────────┐
                     ▼                                 ▼
┌─────────────────────────────────┐  ┌─────────────────────────────────────┐
│     TrendPage (Riverpod)        │  │       NotifyPage (Signals)          │
├─────────────────────────────────┤  ├─────────────────────────────────────┤
│                                 │  │                                     │
│┌─────────────────────────────┐  │  │┌───────────────────────────────────┐│
││      Riverpod Providers     │  │  ││         Signals State             ││
││┌───────────────────────────┐│  │  ││┌─────────────────────────────────┐││
│││    trendFirstProvider     ││  │  │││   notifySignal (List)           │││
│││    trendSecondProvider    ││  │  │││   notifyIndexSignal (int)       │││
││└───────────────────────────┘│  │  │││   signalPage (int)              │││
│└─────────────────────────────┘  │  ││└─────────────────────────────────┘││
│                                 │  │└───────────────────────────────────┘│
│┌─────────────────────────────┐  │  │┌───────────────────────────────────┐│
││  Local State (StatefulWidget)│  │  ││     SignalsMixin Processing      ││
││  - UI Controls              │  │  ││  - createEffect() for reactions   ││
││  - Filter Parameters        │  │  ││  - Manages data loading           ││
│└─────────────────────────────┘  │  ││  - Updates UI based on signals    ││
│                                 │  │└───────────────────────────────────┘│
└─────────────────────────────────┘  └─────────────────────────────────────┘
                     │                                 │
                     └────────────────┬────────────────┘
                                      ▼
┌───────────────────────────────────────────────────────────────────────────┐
│                            Data Layer                                      │
│  ┌───────────────────────────────────────────────────────────────────────┐ │
│  │                  ReposRepository / UserRepository                     │ │
│  │  ┌────────────────────────┐       ┌─────────────────────────────────┐ │ │
│  │  │ Network Request        │───┬──▶│ Database Providers              │ │ │
│  │  │ - API calls            │   │   │ - Data caching                  │ │ │
│  │  └────────────────────────┘   │   └─────────────────────────────────┘ │ │
│  │                               │                                       │ │
│  │                               │   ┌─────────────────────────────────┐ │ │
│  │                               └──▶│ Data Models                     │ │ │
│  │                                   │ - Structure definitions         │ │ │
│  │                                   └─────────────────────────────────┘ │ │
│  └───────────────────────────────────────────────────────────────────────┘ │
└───────────────────────────────────────────────────────────────────────────┘
                                      │
                                      ▼
┌───────────────────────────────────────────────────────────────────────────┐
│                              UI Components                                 │
│  ┌────────────────────┐  ┌────────────────────┐  ┌────────────────────┐   │
│  │ View Models        │  │ List Items         │  │ Interactive UI     │   │
│  │ - Data Formatting  │  │ - Item Rendering   │  │ - User Actions     │   │
│  └────────────────────┘  └────────────────────┘  └────────────────────┘   │
└───────────────────────────────────────────────────────────────────────────┘

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) |
+-----------------------------------------------------+

更多可见:https://codewiki.google/github.com/carguo/gsy_github_app_flutter

Star History Chart

Star History Chart

LICENSE

CarGuo/gsy_github_app_flutter 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.

gsy_github_app_flutter (CarGuo/gsy_github_app_flutter)

Searching Database…

这是什么?GSYGithubApp Flutter 是一个开源的 Flutter 应用,功能完整的 GitHub 客户端,让你可以在手机上浏览仓库、趋势项目和通知,并管理自己的 GitHub 账户。
这是独立的应用,还是某个更大系列的一部分?它是 GSYGithubApp 系列中的一个版本:同一个 GitHub 客户端的理念,分别用七种不同的技术栈重新实现(Flutter、Weex、React Native、Kotlin View、Kotlin Jetpack Compose、Compose Multiplatform、HarmonyOS ArkUI),方便学习者对比不同的实现方式。
我该怎么把它跑起来?安装 Flutter SDK 3.47.2(仓库在 .fvmrc 中固定了这个版本,因此推荐使用 'fvm install 3.47.2 && fvm use 3.47.2'),克隆仓库,然后运行 flutter pub get 获取依赖包。
运行它需要先注册 GitHub OAuth 应用吗?需要。你必须注册自己的 GitHub OAuth 应用,并创建 lib/common/config/ignoreConfig.dart,填入你的 CLIENTID 和 CLIENTSECRET;该 OAuth 应用的 Authorization callback URL 必须设置为 gsygithubapp://authed。
有现成的 iOS 版本可以下载吗?没有。下载页面只提供 Android APK,未列出 iOS 安装包,因此 iOS 用户需要自行构建和运行项目。
这个应用为什么混用 Redux、Provider、Riverpod 和 Signals,而不是只选一种?这是一个有意为之的学习/演示项目,因此不同页面刻意展示不同的模式:Riverpod 驱动 TrendPage,Provider 用于 RepositoryDetailPage,Redux 负责全局登录和用户信息,Signals 则管理 NotifyPage 和文件列表页面的状态。
这个应用用 GraphQL 做什么?仓库列表和仓库详情的请求通过 GitHub 的 GraphQL API 完成,应用中与仓库相关的页面对此做了演示。
同一个应用还有哪些其他技术栈的版本?同一个 GitHub 客户端还有 Weex、React Native、Kotlin View、Kotlin Jetpack Compose、Compose Multiplatform 和 HarmonyOS ArkUI 等兄弟版本,你可以对比同一个应用在七种不同技术栈下的呈现方式。
除了代码,还有其他资料能帮我学习这个项目吗?有的,作者还出版了配套书籍《Flutter开发实战详解》(有纸质版和电子版),并在掘金、知乎、CSDN等平台发布了一系列相关文章。
Creator
CarGuo
Size
43.5 MB
Stars
15.5K
Age
8y
Commits · 90 Days