Implicit Animations in Flutter: Getting Started |

Learn how to make smooth-flowing and beautiful apps by adding implicit animations to your Flutter project’s buttons, containers and screen transitions.

This is a companion discussion topic for the original entry at

Hi there!

When we making input text field responsive by changing its width only first animation works (when we type something), but when we click outside of textfield and set _textFieldSelected to false width becomes initial immediately without any smooth transition.
Also, in last section i think you should pass child from TweenAnimationBuilder to the _circularProgressBar method to show how this optimization works.


Thanks for giving your feedback. They will be helpful to me and others visiting this article

The points that you pointed are right. Starting with the first one(Making a Responsive TextField).

That was the expected behavior for the final app. Although, implementing the forward and reverse animation would be really cool. This can be easily achieved with the help of AnimatedContainer. The only change we will need to make is we will have to provide a constrained width rather than unconstrained width(that is replacing double.infinity with some noninfinite width). The reason for using AnimatedSize here was to cover as many implicit animation that will also look good. Final thing that I want to add here is that with the help of AnimatedSize you can do the reverse animation. There is an additional parameter reverseDuration for that. If no value is provided its default value will be equal to the value provided to the duration parameter. Now, if that is the case then why can’t we see the reverse animation. Its because AnimatedSize` animates its size as the size of its child widget changes until both are in their final state. We see the child widget size animating because of the constraints the parent widget imposes on the child widget. That is child widget can take only that much space that the parent widget can allow. You can read more about how widgets are laid out in LFlutter if you are interested and haven’t gone through it yet.

Also, you are rightly pointed out that the child widget is not passed to the _circularProgressBar. We will fix it up and update the article. Thanks a lot I really appreciate that you pointed it out. This detail just slipped somehow.

Do let me know if you any questions in your mind. I will be more than happy to respond to them!