Flutter开发一个GitHub客户端OpenGit及学习总结

Flutter开发一个GitHub客户端OpenGit及学习总结

本项目为我的Flutter的学习练习项目。

学习Flutter也有一阵子了。闲着没事，用Github开放出来的API进行练手，编写出来了一款Github客户端。 固然本身也是边查边写，也借鉴了许多Github上优秀的Flutter项目，例如UI上主要是参考gitme。如今开源出来，供你们交流学习。但愿多多Star、Fork支持，有问题能够Issue。

项目地址-OpenGit客户端

编译代码

因为涉及到子工程，clone代码以下所示

//clone
git clone --recursive https://github.com/Yuzopro/opengit_flutter.git 
git checkout -b master origin/master 
cd flutter_common_lib 
git checkout -b master origin/master
//运行
cd ../
flutter build apk
flutter install
复制代码

预览

部分页面效果以下：

1.0.0支持功能列表

1. 登陆：支持github帐号登陆和注销；
2. 主页：登陆后用户能够查看掘金flutter列表、本身github项目、动态、issue等信息；
3. 搜索：支持项目、用户、issue的搜索；
4. 项目：支持对项目进行star/unstar、watch/unwatch，能够查看项目更新动态、分支源码、所属语言趋势等信息；
5. 用户：支持查看用户详情；
6. issue：支持issue列表的查看，以及编辑、评论issue；
7. 国际化：支持简体中文与美国英语；
8. 个性化：支持多套主题的切换；
9. 功能介绍：支持每一个版本迭代的详情介绍；
10. 版本更新：支持app的升级；
复制代码

1.1.0版本

1. 修改项目架构，采用BloC和Redux混合开发；
2. 优化趋势项目列表不能展现的问题；
3. 细节优化以及bug修复；
复制代码

1.2.0版本

1. 增长闪屏广告逻辑；
2. 增长新手引导页面；
3. 优化趋势列表，支持项目和用户的展现；
4. 优化网络层代码，增长缓存；
5. 公共代码提取，并以子工程的形式关联；
6. 增长升级红点提示；
7. 其余细节优化;
复制代码

学习历程

初识Flutter

最初学习flutter的方式是经过学习Flutter中文网，在了解基本的flutter语法操做后，在经过学习wendux的《Flutter实践》。因为dart好多语法和java比较相似，就没进行系统的学习，遇到dart上的问题，都是上网查阅资料解决。后续会对dart进行系统的学习。

学习一个月的感受

学习flutter基本上都是空闲时间学习，最初天天花2-3个小时，学习flutter的最经常使用的基础组件;当基础组件掌握的差很少后，开始深刻学flutter中的Widget，主要是参考flutter官方gallery demo, 而且跟着这个项目敲代码。在敲了几天以后，发现这个学习过程很是枯燥，而且常常性学了下个widget，就忘了上个widget，没坚持多久，就考虑拿一个项目练手。学习这整个过程大概就花了一个月，整体感受只要静下心来学习仍是很容易上手的。

OpenGit项目的诞生

OpenGit主要是一个Github客户端。选择以Github客户端做为练手项目的主要缘由有，第一由于最开始接触的flutter开发的第一个app就是gitme，而这个项目也是一个Github客户端，有现成的ui能够做为参考；第二能够参考恋猫de小郭开源了一个更强大的Github客户端GSYGithubAppFlutte

实战

UI

项目的UI部分前面提到过，主要是参考gitme，widget的实现主要是参考gallery demo。

数据源

请求数据的相关API，主要是参GSYGithubAppFlutte和Github Developer。

这里很是感受下恋猫de小郭，GSYGithubAppFlutte 确实在我实践过程当中提供了很大的帮助，在查阅相关api封装时，节省了很多的时间。

架构

OpenGit最初设计模式主要采用mvp模式，由于自身是android开发，采用mvp上手比较快。不过在开发过程当中发现mvp模式不太合适。例如在实现下拉刷新时，onRefresh方法必需要收到Future的返回类型，这种场景用mvp就不太合适。后面可能会进程重构，采用redux或者bloc。在1.1.0版本已经修改成bloc+redux架构，详情可查看MVC、MVP、BloC、Redux四种架构在Flutter上的尝试。

数据层

关于数据请求的配置、逻辑等不要在UI层去控制，而由数据层本身完成。这里主要对http层进行了下封装，缓存已在1.2.0版本加入，能够在设置->缓存更改缓存时间。

UI渲染层

UI层咱们主要使用的是material组件库，对Scaffold 、 AppBar 进行了统一的封装。

路由

路由框架采用的是fluro。

开源库

为了尽量最少的造轮子，主要使用了如下第三方开源库

库	功能
dio	网络框架
shared_preferences	本地数据缓存
connectivity	网络链接
json_annotation	json模版
flutter_markdown	markdown解析
cached_network_image	图片加载
flutter_webview_plugin	全屏的webview
photo_view	图片预览
flutter_spinkit	加载框样式
flutter_redux	redux
fluro	路由
package_info	版本信息
qr_flutter	二维码生成
permission_handler	权限申请
rxdart	rxdart
pull_to_refresh	下拉列表
fluttertoast	toast提示
sqflite	数据库
path_provider	文件管理

Android版安装包：

点击下载

扫码下载

IOS须要自行下载代码运行。（效果是一致的）

项目环境

1. Flutter version 1.8.2

2. Dart version 2.5.0 (build 2.5.0-dev.0.0 b5aeaa6796)

3. Android SDK version 28.0.3

4. Android Studio version 3.4
复制代码

TODO

已知问题：

1. 切换语言时，代码中的中文暂未所有替换；
2. 路由还未所有替换；
3. markdown支持还不是很完善；
复制代码

Thanks For

• flutter-go

• GSYGithubAppFlutter

• Flutter中文网

• Flutter 实战

• Github Developer

• Github-trending-api

关于做者

• 我的博客

• Github

• 掘金

• 简书

• CSDN

默认条款

此项目仅供你们交流沟通使用，不得用于任何商业以及利益活动。