CODEWITHSUNDEEP
flutterflutter-animation
user2511882
user2511882

Reputation: 9152

Flutter countdown animation with text customization

Trying to create a simple countdown timer animation in Flutter.

I have used the StepTween class along with an AnimatedController to achieve the animation using the following:

Flutter - Create a countdown widget.

However, what I am trying to accomplish looks something like this:

enter image description here

I tried creating a Row widget and adding a Text() followed by AnimatedWidget(). However the styling is nowhere near the expected result:

enter image description here

  1. How do I get the size/color for the text within the AnimatedWidget() to match the design?
  2. The AnimatedWidget() switches to a single digit within the 0-10 region. For example instead of showing the countdown as 0:09 it is shown as 0:9. How do I change that?

Thanks!

Upvotes: 1

Views: 814

Answers (1)

Denis G
Denis G

Reputation: 571

In countdown widget

 child: new Text(val.toString(), style: new TextStyle(fontSize: 150.0)),

is responsible for the styling you see. Instead try removing the style or apply the theme:

 child: new Text(val.toString(), style: Theme.of(context).textTheme.body1),

Upvotes: 1

Related Questions