Building the timer home page layout

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 ...

Get Flutter Projects now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.