Build a Flutter Stopwatch App with Custom UI and Animations

Download the stopwatch_flutter.zip starter project, set up with Flutter and Dart SDK 2.12, and explore the custom stopwatch UI, animated elapsed time, and duration formatting.

Enable dark mode by applying ThemeData.dark to the MaterialApp and setting scaffoldBackgroundColor to Colors.black. Wrap the scaffold with AnnotatedRegion<SystemUiOverlayStyle> and apply SystemUiOverlayStyle.light to customize the status bar.

Set up a periodic timer to update the stopwatch by capturing the start time with DateTime.now and computing elapsed time, then render with a fixed-width ElapsedTimeText for readability.

Replace timer with a ticker that syncs to the screen, delivering 60 frames per second updates for a Flutter stopwatch and exposing elapsed time via callbacks.

Use matrix transforms to render the stopwatch UI with tick markers, five-second labels, and a clockwise clock hand, and move UI into a StopwatchRenderer widget that takes elapsed time.

Learn matrix transforms by using a stack to render ElapsedTimeText, wrap in an AspectRatio of 1.0, and add a padded container to create a centered square stopwatch UI.

Explore matrix transforms in Flutter by using the Transform widget and Matrix4 to translate, rotate, and scale widgets, control origin with alignment, and chain multiple transforms for 3D space effects.

Derive the circle radius from layout constraints with LayoutBuilder and pass it to StopwatchRenderer to render a responsive stopwatch circle, using a decorated container for visualization.

Design a reusable ClockHand widget that animates a clock hand clockwise using elapsed time and matrix transforms, then position and rotate it in a stack to complete a minute rotation.

Extend the stopwatch user interface by rendering 60 tick markers around a circle with a clockSecondsTickMarker widget, using matrix transforms, rotation, and color logic for multiples of five.

Complete the stopwatch user interface by adding five-second markers with a reusable ClockTextMarker widget, using matrix transforms, sized boxes, and a loop to position 60-second markings.

Add start, stop, and reset functionality to the stopwatch with custom buttons built from InkWell, Material, and clip oval. Use stack and align to position them and adjust aspect ratio.

Implement start, stop, and reset logic for a Flutter stopwatch by managing an is running flag, ticker control, and elapsed time with previously elapsed and currently elapsed getters.

Refactor the stopwatch UI to redraw only the parts that change at 60 fps. Implement a ticker UI widget and a global key to refresh only moving parts.

Explore further with a complete Flutter animations course, featuring seven hours of content to build a fully custom habit tracking app with advanced features and challenges.