Flutter development a GitHub client OpenGit and learning summary

This project is a personal study and practice of Flutter.

I have been learning Flutter for a while. Idle, with Github open API for practice, write a Github client. Of course, I also wrote and checked on my own, and borrowed from many excellent Flutter projects on Github. For example, I mainly refer to Gitme on the UI. Now open source, for everyone to exchange learning. Hope more Star and Fork support, you can Issue any problem.

Project address -OpenGit client

Compile the code

As subprojects are involved, the Clone code is shown below

//clone git clone --recursive https://github.com/Yuzopro/opengit_flutter.git git checkout -b master origin/master cd Git checkout -b master origin/master // / flutter build apk flutter installCopy the code

preview

Some pages look like this:

1.0.0 Support function list

1. Login: The github account can be used for login and logout. 2. Home page: After login, users can view the list of gold-digging Flutter, their Github projects, dynamic and issue information, etc. 3. Search: support project, user, issue search; 4. Projects: Support star/unstar, watch/unwatch for projects, which can view project update dynamics, branch source code, language trend and other information; 5. Users: Supports viewing user details. 6. Issue: Support the view of issue list, and edit and comment on issue; 7. Internationalization: support simplified Chinese and American English; 8. Personalized: support switching of multiple sets of themes; 9. Function description: Details of each iteration supported; 10. Version update: Support app upgrade;Copy the code

1.1.0 version

1. Modified the project structure, adopted BloC and Redux mixed development; 2. The problem that the list of optimization trend items cannot be displayed; 3. Detail optimization and bug repair;Copy the code

1.2.0 version

1. Add the logic of splash screen advertising; 2. Add a new boot page; 3. Optimized the trend list to support the display of projects and users; 4. Optimize network layer code and increase cache; 5. Extract common codes and associate them in the form of sub-projects; 6. Add red dot prompt for upgrade. 7. Optimization of other details;Copy the code

Learning process

First Flutter

The first way to learn about flutter is through learning Flutter Chinese. After understanding the basic flutter grammar operation, WE learned Wendux’s Flutter Practice. Dart has a lot of similar syntax to Java, so I didn’t study it systematically. When I encountered problems in DART, I looked up information online to solve them. A systematic study of DART will follow.

What it feels like to study for a month

Learning to flutter is basically free time learning, initially 2-3 hours a day, learning the basic components of flutter that are most commonly used; Once you have a good understanding of the basic components, learn more about the widgets in Flutter, mainly by referring to the official Flutter gallery demo and coding along with the project. After a few days of typing, I found that the learning process was very boring. I often learned the next widget and forgot the last one. After a short period of time, I thought about taking a project to practice. The whole process of learning took about a month, and I felt it was easy to learn as long as I calmed down.

OpenGit project was born

OpenGit is primarily a Github client. The main reasons why I choose Github client as my practice project are as follows: Firstly, the first app developed by FLUTTER at the beginning is Gitme, and this project is also a Github client, which has a ready-made UI for reference. Second can refer to love cat de Guo open source a more powerful Github client GSYGithubAppFlutte

In actual combat

UI

As mentioned earlier in the UI section of the project, I will refer to Gitme and the implementation of the widgets will refer to the Gallery demo.

The data source

Request data related API, mainly reference GSYGithubAppFlutte and Github Developer.

GSYGithubAppFlutte really helped me a lot in my practice and saved a lot of time when I looked up relevant API packages.

architecture

The initial design mode of OpenGit mainly adopts MVP mode, because it is android development, using MVP to get started faster. However, during the development process, IT was found that the MVP mode was not suitable. For example, when implementing a pull-down refresh, the onRefresh method must receive the return type of the Future, in which case MVP is not appropriate. There may be subsequent reconfiguration, redux or Bloc. Bloc + Redux architecture has been modified to bloc+ Redux architecture in version 1.1.0. For details, see the attempts of MVC, MVP, Bloc and Redux architecture on Flutter.

The data layer

Configuration, logic, etc. of data requests should not be controlled at the UI layer, but at the data layer itself. The HTTP layer is encapsulated here. The cache has been added in version 1.2.0. You can change the cache time by going to Settings -> Cache.

The UI rendering layer

For the UI layer, we mainly use the Material component library, which encapsulates the Scaffold and AppBar uniformly.

routing

The routing framework uses Fluro.

Open source library

In order to build as few wheels as possible, the following third-party open source libraries were used

library function
dio Network framework
shared_preferences Local data cache
connectivity The network connection
json_annotation Json template
flutter_markdown Markdown parsing
cached_network_image Image to load
flutter_webview_plugin Full screen of the webview
photo_view Preview picture
flutter_spinkit Load box style
flutter_redux redux
fluro routing
package_info Version information
qr_flutter Two-dimensional code generation
permission_handler Permission to apply for
rxdart rxdart
pull_to_refresh The drop-down list
fluttertoast A bigger tip
sqflite The database
path_provider File management

Android installation package:

Click on the download

Scan code to download

IOS needs to download the code itself to run. (The effect is consistent.)

Project environment

Dart version 2.5.0 (build 2.5.0-dev.0.0b5AEAA6796) 3. Android SDK version 28.0.3 4. Android Studio version 3.4Copy the code

TODO

Known issues:

1. During language switching, Chinese characters in the code are not replaced completely; 2. Routes are not replaced. 3. Markdown support is not perfect;Copy the code

Thanks For

  • flutter-go

  • GSYGithubAppFlutter

  • Because Chinese website

  • Flutter of actual combat

  • Github Developer

  • Github-trending-api

About the author

  • Personal blog

  • Github

  • The Denver nuggets

  • Jane’s book

  • CSDN

The default clause

This project is only for communication, shall not be used for any commercial or profit activities.