How to build a timer with a fancy clock using Flutter?

What is Flutter?

Flutter is an open-source UI software development kit created by Google. It is used to build natively compiled applications for mobile, web, and desktop from a single codebase. Flutter uses the Dart programming language and provides a rich set of pre-built widgets and tools for building beautiful and performant user interfaces.

About this Tutorial!

If you are interested in practicing coding and UI development with Flutter, you can follow a tutorial on building a timer application. This tutorial will guide you through the process of creating a timer with start, pause, and reset functionality, as well as a visually appealing user interface. By completing this tutorial, you can gain hands-on experience with Flutter and improve your skills in coding and UI development.

Create your Flutter app

Below is an example Flutter application that includes both a timer and a stopwatch. It uses the flutter_analog_clock package for a fancy analog clock visualization.

flutter create flutter_analog_clock

Requirements

First, add the required package to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  flutter_analog_clock: ^3.1.0

Then, run flutter pub get to fetch the package.

The code

Now, you can use the following Dart code to create a Flutter app with a timer, stopwatch, and a fancy analog clock:

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_analog_clock/flutter_analog_clock.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Timer and Stopwatch',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isTimerActive = false;
  int timerSeconds = 0;
  int stopwatchSeconds = 0;
  Stopwatch stopwatch = Stopwatch();
  Timer? timer;

  @override
  void dispose() {
    timer?.cancel();
    super.dispose();
  }

  void startTimer() {
    timer = Timer.periodic(Duration(seconds: 1), (Timer t) {
      setState(() {
        timerSeconds++;
      });
    });
  }

  void stopTimer() {
    timer?.cancel();
  }

  void resetTimer() {
    setState(() {
      timerSeconds = 0;
    });
  }

  void startStopwatch() {
    stopwatch.start();
  }

  void stopStopwatch() {
    stopwatch.stop();
    setState(() {
      stopwatchSeconds = stopwatch.elapsed.inSeconds;
    });
  }

  void resetStopwatch() {
    stopwatch.reset();
    setState(() {
      stopwatchSeconds = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Timer and Stopwatch'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlutterAnalogClock(
              dateTime: DateTime(2022, 1, 1, 12, 0),
              dialPlateColor: Colors.white,
              hourHandColor: Colors.black,
              minuteHandColor: Colors.black,
              secondHandColor: Colors.red,
              numberColor: Colors.black,
              borderColor: Colors.black,
              tickColor: Colors.black,
              centerPointColor: Colors.black,
              showBorder: true,
              showTicks: true,
              showMinuteHand: true,
              showSecondHand: true,
              showNumber: true,
              borderWidth: 8.0,
              hourNumberScale: 0.1,
            ),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                ElevatedButton(
                  onPressed: isTimerActive ? stopTimer : startTimer,
                  child: Text(isTimerActive ? 'Stop Timer' : 'Start Timer'),
                ),
                ElevatedButton(
                  onPressed: resetTimer,
                  child: Text('Reset Timer'),
                ),
              ],
            ),
            SizedBox(height: 20),
            Text(
              'Timer: $timerSeconds seconds',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 40),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                ElevatedButton(
                  onPressed: stopwatch.isRunning ? stopStopwatch : startStopwatch,
                  child: Text(stopwatch.isRunning ? 'Stop Stopwatch' : 'Start Stopwatch'),
                ),
                ElevatedButton(
                  onPressed: resetStopwatch,
                  child: Text('Reset Stopwatch'),
                ),
              ],
            ),
            SizedBox(height: 20),
            Text(
              'Stopwatch: $stopwatchSeconds seconds',
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

Final word!

In this example you explore:

• The flutter_analog_clock package is used to create a fancy analog clock.
• The timer is implemented using a Timer that increments a counter every second.
• The stopwatch is implemented using the Stopwatch class provided by Dart.

Feel free to customize the code further based on your requirements and preferred visual styles.