Creating an enhanced counter app
Since this chapter focuses on performance considerations and Flutter’s fundamentals, we want to keep the UI minimal. The app we’re going to build is just some text, two buttons, and a horizontal list view. Very intuitively, the plus and minus buttons respectively increase and decrease the text at the center by 1
. New tiles are only added to the scrollable list underneath when the value is increased; tapping on minus won’t add a new item in the ListView
widget. You can see a representation of the UI in the following screenshot:
Figure 1.2 – The UI of our enhanced counter app
We can immediately see that the UI is made up of the following three main parts:
- A title at the top with two red and green signs
- The counter itself in the middle
- A scrollable list at the bottom
These three main UI pieces can be mapped to three widgets we need to create for the app. We have decided to structure...