For this intermediate challenge, create this custom countdown timer:

Open preview in a separate page

Starter Project

You can grab the starter project for this challenge here:
v0.1.0, updated: 2024-02-26

Check the README for how to use it.

Primary Goals

  • Create the countdown UI ring
  • Store the elapsed time into a state variable (initial value: 10)
  • Add a ticker that updates the elapsed time
  • Calculate the progress and remaining time and pass them to the child widgets for rendering
  • Restart the ticker when the button is pressed

To draw the UI ring, use a CircularProgressIndicator with valueColor: AlwaysStoppedAnimation.

Stretch Goals

  • Implement the UI ring with a custom painter
  • Add the ability to pause and resume the timer
  • Customize the font in the countdown timer
  • Add some kind of animation when the text changes

What You Will Learn

  • Bind the value of a CircularProgressIndicator to your local state
  • Create, start, and stop a Ticker
  • Work with local widget state
  • Work with Stack, Align, AspectRatio, LayoutBuilder widgets
  • Draw on the canvas using custom painters

Official resources from

Additional resources from Code with Andrea:

Questions? Let's chat