Dash O'Clock: Putting It All Together

The internal clockwork of my Flutter Clock Challenge submission

Constantin Stan
4 min readFeb 16, 2020


Dash O’Clock showing 10:10

Flutter announced the Flutter Clock Challenge on the 18th of November 2019. The deadline for submitting the entries for the contest was the 20th of January 2020, and the judgment day was on the 25th of February 2020.

Initially, the winners should’ve been announced at MWC Barcelona 2020 that got canceled because of the new coronavirus developments.

In a previous part of Dash O’Clock, I went on describing how Dash was built and drawn on the screen.

In this part, I’ll go on and describe how everything works together.


As mentioned in the part where I’ve explained the process of drawing Dash, there are 2 CustomPainters on the line: a static one called dash_static.dart and an animated one called, you guessed it, dash_animated.dart

As the name of each state, one deals with painting the static elements that never change and the other paints the animated elements of Dash.

Most of the Dash elements are static. The animated elements are the eye sparkles and the nose. The left eye sparkle is the hour handle, the right one is the minutes handle, and the nose is the seconds handle (that animates as a pendulum moving left or right every other second and moving to the center when another minute fully passed).

Animated elements of Dash that will indicate hours, minutes and seconds

The magic happens in the dash_animated.dart class:

import 'dart:typed_data';
import 'dart:ui';
import 'dart:math' as Math;
import 'package:flutter/material.dart';import 'dash_paint_bucket.dart';
import 'dash_parts.dart';
class DashAnimated extends CustomPainter {
@required this.seconds,
@required this.secondsAngle,
@required this.minutesAngle,
@required this.hoursAngle,
}) : assert(seconds != null),
assert(secondsAngle != null),
assert(minutesAngle != null),
assert(hoursAngle != null),
assert(seconds >= 0)…