Creating an Analog Clock in Flutter: I
The full code for the app can be found here. Other parts of the series can be found below:
Inspiration
I am always itching for something new to learn about. So immediately I heard about flutter while watching one of the GDDEurope videos on Youtube I knew I would soon have to learn about it too considering what it promised to be able to help me achieve: killing two birds with one stone. After a few years of occasionally killing only birds of the Android variety, it was probably time to shoot me some Apple ones as well. And anything that could help me do that without having to do twice the work is always welcome.
And then I saw the Hamilton app created by Posse.
Like most other people who saw the app, last weekend I decided to try out Flutter myself and build my first app. These series of articles will show how to build custom widgets in Flutter using Dart programming language. I will be showing some part of Flutter’s graphics capabilities by building an analog clock.
I will try to be as detailed as a medium article will possibly allow without boring you to death and I will try to explain drawing to canvas and custom widgets in a way that a beginner will understand. At the end of this series of articles, we will get a fully functional analog clock capable of telling time.
We will be tackling this app in 3 parts:
1. The clock bells, legs, and body.
2. The clock face, tick marks and text.
3. The clock hands.
Whip out your favorite Flutter code editor. Let us begin.
Main
Create a new Flutter project in your favorite editor, call it clock.
Open the main.dart file and clear out whatever that is in there and replace it with the following:
So what did we just do? The main.dart file is the entry point of the app. Within the file is the main() function which is called to run the app, a MyApp class which represents the app we will be building and another class, Clock, which also represents the clock we will be building in the app. In Dart, you can put two classes in the same file without nesting one in the other.
There are two kinds of widget classes in Flutter: Stateful and Stateless widgets. We will talk more about Stateful widgets later but, simply stated, Stateless widgets have no……..state. Duh. That is, they have no visible properties that will be changing during the lifetime of the app. If u need to create any widget that will look the same way, through out the lifetime of your application, this is your go-to widget.
Everything in Flutter is a widget. As you can easily see from the code above, even the app itself is a stateless widget since it inherits from it. Every widget has a build() function used for composing up its constituent properties and children to make up the widget itself. The app itself is a MaterialApp which is a class that implements Material Design in Flutter. This is achieved by importing the library like we did in Line 1. The MaterialApp has a parameter, home, which points to a Clock class instance.
The Clock class itself is also Stateless widget. It also has a build() function which returns a Scaffold widget. The Scaffold itself contains a Padding widget which is used to create padding around a child widget. The child widget, in this case, is a Column widget with a center alignment. The column widget is used to arrange a group of widgets vertically. These group of widgets are usually returned in a list of widgets that the children parameter of the Column widget points to. In this specific case, we only have a ClockBody class instance as the only widget in the Column widget.
The ClockBody class hasn’t been created yet. But we will get to it. I have taken my time to try to explain how Flutter code is written and how to widgets are built up by nesting them in one another. Now I can go faster without having to explain everything. Create a file called clock_body.dart in the lib folder of your project. The import statement in Line 2 will take care of itself once we start putting the right code in the clock_body.dart file
Things are about to get interesting. We are about to go into custom widgets and painting. Follow me.
