Analog Clock in Flutter

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

The 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:

Dart

dependencies:
  flutter:
    sdk: flutter
  analog_clock:

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.

Constraints

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:

Dart

// package to create analog clock
import 'package:analog_clock/analog_clock.dart';
import 'package:flutter/material.dart';

// function to trigger the build process
void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  // ignore: library_private_types_in_public_api
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  // building the app widgets
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.green[900],
            title: const Text('Geeks for Geeks'),
          ), // app bar
          backgroundColor: Colors.green,
          body: Center(
            child: AnalogClock(
              decoration: BoxDecoration(
                  border: Border.all(width: 3.0, color: Colors.black),
                  color: Colors.black,
                  shape: BoxShape.circle), // decoration
              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
          ), // center
        ), // scaffold
      ); // material app
}

Output: