Challenge

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:

c002_radial_countdown_starter.zip
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

Useful Links and Resources

Official resources from Flutter.dev:

• CircularProgressIndicator class

• TickerProvider class

• SingleTickerProviderStateMixin mixin

• Custom painting in Flutter - Flutter In Focus

• CustomPainter class

Additional resources from Code with Andrea:

• Flutter Timer vs Ticker: A Case Study
• Flutter Custom Painting: Do Not Fear The Canvas
• Stopwatch App UI challenge from my Flutter Animations Masterclass