In the following screenshot, you can see the layout we will be building in this first part. In order to make it easier to understand what we need to do for this layout, I've added borders that show how the widgets will be placed on the screen:

I believe the easiest way to build this layout is by using a combination of Column and Row widgets. The main container widget in this screen will be a column that will divide the space into three parts, as follows:

1. The three buttons at the top: Work, Short Break, and Long Break
2. The timer in the middle
3. The two buttons at the bottom: Stop and Restart

We will now create a new app that we'll use throughout this chapter to build the productivity timer, as follows:

1. From your favorite editor, create a new app.
2. Name the new app productivity_timer.
3. In the main.dart file, remove the example code.
4. Type...