Building GitHub Flutter App — Part 1: Trending Repositories List
You can also read this article in my Xcoding With Alfian blog website using the link below.
Introduction
In this part of building Github Flutter App series, we will build a Github application with features such as listing currently trending repositories and searching repositories by their name using Flutter SDK. In part 1, we will focus on creating the main home screen that lists all trending repositories.
What we will build:
- Home Widget is stateful widget that provides the ListView for the repositories
- GithubItem Widget is stateless widget that provides the list view item that represents a repo.
- API Class is a Dart object used as a networking layer for requesting repositories using the GitHub API
- Repo Class is a Dart object used as a model object for a repo.
Home Widget
We are using Flutter MaterialApp Widget as our main Widget and Home Widget will be the home widget for our application. It is a stateful widget that has a set of states such as:
- _repos: Array of Repo object that represents the repositories from the GitHub API
- _isFetching: boolean value that represents the loading state for the request from GitHub API. We will return an Icon Widget for the view when _isFetching is true
- error: String value that represents the state for error when fetching the request for the GitHub API. We will return an Text Widget containing the error message if error message exists.
When the initState is invoked, we call loadTrendingRepositories method to set the _isFetching state to true and fetch the data from the API Class using await. After the results is received, we check if the results is not null and update the state by assigning the results to the _repos property and if the results is null we update the state for the error, _isFetching state is also set to false for both conditions.
Home Widget build method will render the Widget depending on state of _isFetching and _error. When _isFetching is true, a Container Widget with child of Icon Widget with the icon of timelapse will be rendered. Then, if _error is not null then a Container Widget with child of Text Widget containing the error message will be rendered. If none of these conditions are meet, then ListView.builder will be used to build the ListView dynamically based on the _repos list length, the itemBuilder function will return the GithubItem Widget and Repo data will be passed to create the class so the data can be displayed.
GithubItem Widget
GithubItem Widget is a stateless widget that represents an Item for the ListView, the widget accepts the Repo object for the constructor to display the repository data.
The container of the widget is a Card Widget that renders a card view like container with elevation and box shadow. InkWell widget is providing the ripple and highlight splash effect when user taps on the card. For the data we use Column Widget to stack the Text Widget containing repo name, Text Widget containing repo description, and Row Widget container containing repo owner name, stargazer count, and repo language vertically along its main axis. Row Widget is used to stack the the child widgets horizontally.
API Class
API class is a networking layer class that provides the interface for getting latest trending repositories data from GitHub API. To build the query we will current datetime and subtract it by 7 days.
To format the date string, we use date_format from Dart Package as a dependency in pubspec. The library allow us to pass the format we want to use to format the date required by the GitHub API. We pass created:> date string as our query, then sort by stars descending, and set maximum repos of 25 per page.
After the response has been received, we decode the response json string to Map and then construct the list of Repo object from the Map using the Repo Class static factory method, after that we return the results.
Repo Class
Repo Class is just a plain Dart object that represent the repo from GitHub Api, here we have a static factory method that parse the json Map and map it to the list of Repos.
Congrats!
We have finished building the home screen for the App that lists all the GitHub trending repositories by using Flutter SDK. To see all the code you can visit the GitHub Repository for this project. Stay tune for the part 2 of the series where we will build the search screen so the user can type to search the repositories, Happy Fluttering!.
