Skip to content
Related Articles

Related Articles

Analog Clock in Flutter

Improve Article
Save Article
Like Article
  • Difficulty Level : Medium
  • Last Updated : 15 Feb, 2021

In Flutter, everything is a widget. Plugins, commonly called dependencies are tools that are quite commonly used in Flutter, which helps in making the code work easier and faster. There are plenty of plugins used in Flutter, out of which for creating an analog clock, the “analog_clock” plugin can be used.

Adding dependencies in Flutter

Steps for adding the plugin to the Flutter app is as follows:

Step 1: Open “pubspec.yaml” file from the project folder.

pubspec.yaml file

Step 2: In the pubspec.yaml file, type “analog_clock:” under dependencies. After adding, the code looks like this:


    sdk: flutter

Step 3: Now click “Pub Get” button at the top of the application (i,e., in Android Studio).

Step 4: The “Process finished with exit code 0“ in the console shows that the dependency is been added successfully.

Step 5:  Now import the plugin or package by adding the “import ‘package:analog_clock/analog_clock.dart’;” code to the top of the “main.dart” file.

The analog_clock plugin

The analog_clock plugin has many parameters in it, which plays a major role in designing the clock. These parameters are completely customizable making it more user-friendly.

The major parameters of the analog_clock plugin are as follows:

  1. datetime: It helps to set the time from which the clock needs to run.
  2. showTicks: The measurements available in the borders of the clock are called “ticks”. These ticks can be hidden using the “false” condition and vice versa.
  3. showNumbers: It helps to hide the numbers near the ticks by using the “false” condition.
  4. showSecondHand: It helps to hide the second hand by using the “false” condition.
  5. showDigitalClock: It helps us to make the digital clock that has hours, minutes, and seconds readings in it, visible inside the analog clock.
  6. tickColor, minuteHandColor, hourHandColor, secondHandColor, digitalClockColor, numberColor: These parameters help in assigning a color to the ticks, minute hand, hour hand, second hand, digital clock, and number respectively.
  7. isLive: It is used to let the clock running live after the time is set.
  8. decoration: This parameter helps to design the clock using the available decoration widgets in a flutter.
  9. height, width: These parameters help to set the height and width of the clock.
  10. textScaleFactor: It helps to set the size of the digital clock and the numbers near the ticks.


In flutter, there are two types of widgets – Stateless and Stateful widget.

The stateless widget is used to create static widgets and the stateful widget is used to create dynamic widgets. Since time is a dynamic factor, we need to use the stateful widget to create the analog clock. So, it is required to create a “state” in which the clock runs and the AnalogClock function is called to make use of the parameters to design the clock that’s needed.

Source Code:


import 'package:analog_clock/analog_clock.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
  _MyAppState createState() => _MyAppState();
class _MyAppState extends State<MyApp> {
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('Geeks for Geeks'),
          body: Center(
            child: AnalogClock(
              decoration: BoxDecoration(
                  border: Border.all(width: 3.0, color:,
              width: 200.0,
              isLive: true,
              hourHandColor: Colors.white,
              minuteHandColor: Colors.white,
              showSecondHand: true,
              numberColor: Colors.white,
              showNumbers: true,
              textScaleFactor: 1.5,
              showTicks: true,
              showDigitalClock: true,
              digitalClockColor: Colors.white,
              datetime: DateTime(2020, 8, 4, 9, 11, 0),


analog clock in flutter

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!