Written by Krzysztof Len
JS Fullstack Gdańsk
Published April 15, 2021

Code with us #02 – Kudos list

Welcome to the second episode of the “Code with us” Flutter series. In this episode, we will build together a list of kudos in which every single item is presented as a separated tile with the names of the giver, recipient, and a description. At the very top of the list, we will create a horizontal slider with a list of available rewards which can be exchanged for your kudos. Let’s get it started!

1. Preparation

The same as previously we have to create a new project using the flutter command line, which requires Flutter SDK installed on your machine. If you don’t remember how to do that you can follow the reference instruction under this link.

You can watch the video instead of reading the article, or use them both:

You can name your project however you want. But in this episode we use kudos_wall a name that will be created by the following:

Next, create an assets folder and inside it create an images folder, and copy all attachments images from the zip file.
Inside of /lib folder create a new stateless widget kudos_wall.dart and, import it in the main.dart file and place it in the home property of the MaterialApp. In that moment your main file should look quite like this:

And the kudos_wall.dart:

2. Models

The first step we have to take is to create a model folder in which we create a Reward class in the reward.dart file with the following structure:

This model will get a name and an imageUrl as a parameter.
The next models are the Kudos one, Recipient, and Sender which we will create inside kudos.dart file after creating it.
Your file should look like this:

 

3. Mocks

Because we are not using any API to display data in our list we will have to mock our kudos. To do that create a mocks.dart file in the root of the lib folder. Inside of it, we’ll create a Mocks class which will hold a list of the rewarded and recent kudos using previously created models. The rewards variable should look like this:

Feel free to copy both data to your project.

4. Theme

The next step we will take is to create reusable color variables. To do that we need to create a theme_colors.dart file in the root of the lib folder.

This leads us to use the same color variable in the whole application and to the possibility to change them only in one place. This is how it should look like the ThemeColors class:

Also, the main.dart we will add a theme property to MaterialApp widget in which we will have a possibility to declare basic typography which will be used by default in the app.

Inside the theme property add the card theme like the following:

 

5. Kudos wall

With all that preparation now we are ready to implement the kudos wall list. Inside kudos_wall.dart file replaces a child of the container with the CustomScrollView widget class.
Next, we will start by creating a private method to display subtitles in a list.

And the method itself:

Next, we add another SliverToBoxAdapter class to show a list of available rewards. We use a
ListView.builder for better performance and create another private method _buildRewardListTile to create a single reward:

And the method:

We will make simple if conditioning to add a proper margin in our slider.

Next, let’s add the second subtitle which will be the header of the kudos list:

And below add the SliverList, where we’ll build our list:

The _buildKudosListTile will build a single kudos tile with all needed data.

6. Animated app bar

And the very last thing in this episode is to create the header which will hide during scrolling the kudos list. For that purpose, we use the SliverAppBar the class provided by Flutter:

 

Finally, you have built a fully functional kudos list! Well done.

To learn more about classes used in this article, follow the official documentation:

Link to the final version of the app with implemented kudos wall:
https://github.com/adrkakol/kudify-list

To learn more about uses techniques follow the below links:

Thank you for following this episode of our Flutter tutorial and stay tuned for the next one.

Coding – Adrian Kąkol

Design – Karolina Zawadzka

Video – Robert Fijałkowski

Written by Krzysztof Len
JS Fullstack Gdańsk
Published April 15, 2021