In Flutter, everything is a widget. Images, icons, and text in a Flutter app are all widgets. Even layout elements such as the rows, columns, and grids that arrange, constrain, and align other widgets, are widgets themselves.

The good point is, Flutter SDK creates an interactive widget at the root of the application here itself. To make things a bit easier, lets remove that and start with a bare minimal design (Hello World!).

Your main.dart file should look something like this:

Firing up the Android emulator opens it up with a Text widget greeting “Hello World!”

Notice the widget in focus here. We will try to modify the body of MaterialApp to bring out the interface as we want it to be. The original version is what is shown below.

Layout elements (widgets) in Flutter can be broadly categorised into two types based on whether they house a single widget or are capable of holding an array of widgets. Container , Padding belong to the former while Row , Column etc. fall under the latter.

Introduce a Row layout with three children of type Text widgets.

Before we go on and style the components, it is advisable to create a new widget that will handle the styling so that we follow DRY principle.

Replace the three children with a custom widget defined later in the same file. The main.dart file now becomes

The timer looks a bit bland right now. I am not very good in user interfaces but lets try our best. Pack the Text widget inside a Container and decorate the Container with a background colour along with padding to space out elements.

Also, insert a button to perform the actions on timer below the three styled text widgets. The modified code looks like this.

Here comes the most integral part of the app — state. The State will hold the current value of the timer and whether the timer is active (running) or not. I have come up with TimerState class that is responsible for maintaining the state and also takes charge of building the widget tree.

Pressing the button toggles isActive variable.

Dart comes with an elegant module for async operations. We can use its Timer class to help us increment seconds. The modified TimerAppState is described below. Notice we have refactored Timer class to TimerApp to prevent ambiguity with Timer class in the async module.

The app is fully functional now. The complete main.dart code can be found here. I hope it clears out the basics of Flutter framework.