A Classic Flutter App

In this chapter, we’ll look into the UI of a typical Flutter application designed to be used on a smartphone. This application allows us to see a list of courses we’re following with a visual indication of their progress. We can also see a more detailed view for each course and support screens, like a profile page and a settings page.

We’ll only implement the application’s UI. All the data we’ll need is hardcoded fake data. The goal of this chapter is to identify when the UI is not responsive. Therefore, we don’t need a real data-connected application.

Getting started

First, let’s have a look at the pubspec.yaml file. We have added the device_preview package to make it easier to switch between different devices and the percent_indicator package to show the progress of each course.