Flutter Thursday 04: Beautiful List UI and Detail page (part 2)

4 min readDec 6, 2018

This is the second part of the Beautiful List UI and Detail Page article. It will focus on dynamic content, navigation, the detail page, fixing the fonts, icons, and text. If this gets too long, I will break it into a third. Please do review the first part one of this write-up

ADDING IMAGES AND FONTS

We will add some assets to the app: an image for the detail page background and Raleway fonts. Create a fonts folder and add the font downloaded ttf files (Regular and Thin). Add the image to the assets folder. Then open pubspec.yaml file and include the following content

DYNAMIC LIST CONTENT

To make dynamic content for the lessons list items, we will create a class to represent a lesson object. Let's keep this simple: the data type for lesson price will be an integer, from the design it contains integer values and everything else (title, level, content) will be strings. Create a lesson.dart file and add the code below, a simple class with a constructor.

Save this file anywhere within your lib folder but preferably create a directory called model inside lib folder and include the file. Note you can add the code above to your main.dart file as well. But if go my route, ensure you import the lessons.dart.

Usually, you will get this data from an API request. We are not making API request in this case. Add a function to main.dart file called getLessons() and a return a list of lessons

Next, we will refactor the main.dart file. The first is to add a variable of type List and the initState() method. The initState() method is called once the first time widget is being created. It initializes the lessons variable to getLessons() function defined above to load all available lessons

Next, refactor the following final variables to become class methods: makeCard to makeCard(), makeListTile to makeListTile(lesson)

Change makeListTile variable to makeListTile(Lesson lesson) method. For larger applications, it will be better if you extract this into its own widget class and easily reuse it. Then replace the hardcoded values with values from the Lesson object, replaced the image indicator in part with the LinearProgressIndicator widget and adding Padding around the Level Text widget. See the changes below

Test your changes

Flutter run

You should see this

NAVIGATION

Flutter provides the navigator widget. The ListTile comes with the onTap() property. We added the following code from that last snippet above

We are simply pushing the detail page on top the current view screen or better stated: navigating to the detail page. Which will create the page shortly (please do these before running your application)

DETAIL PAGE
Here is the detail page from Pinterest

Create a new stateless widget called DetailPage.

Next, create topContent and bottom Content. See the code below. Let’s start from the bottom of the code. The top Content is Stack widget with a list of children: a container for the background image, a container for the top content Text (topContentText) and a positioned widget for the back button.

topContentText is a Column widget with a list of children. It renders the following section of the design