[Solved] How to animate a Flutter widget whose position changes due to layout changes


Asked by Daniel A on November 11, 2021 (source).

I'm asking the same question as this question, except in their case they were able to solve the problem with a Hero animation which is not applicable here. The situation I have is that when a user focuses a search field, the keyboard will appear and shift the content upward. I would like to be able to animate that content upward so that it doesn't jump (and animate its motion also when the keyboard is dismissed), but the locations are entirely layout-dependent, meaning I can't know what the final position will be in order to use something like a SlideTransition.

Attached is a screenshot of my current situation. The centered magnifying glass icon and text are the widget group that I would like to animate.

Current state


Question answered by Daniel A (source).

It seems like the solution is dependent on a couple of things - one is that I had to set the resetToAvoidBottomInset property on my Scaffold widget to false, but in addition I had to use an AnimatedPadding widget that applies a padding to the bottom of my centered content that is equal to the MediaQuery.of(context).viewInsets.bottom value which accounts for space taken up by the keyboard. This certainly works but feels odd that I'm relying on knowledge of what's happening outside of the widget in order to provide an animation.

Here's a sample of the relevant code:

              child: Container(
                color: Colors.white,
                child: AnimatedPadding(
                  padding: EdgeInsets.only(
                      bottom: MediaQuery.of(context).viewInsets.bottom),
                  duration: const Duration(milliseconds: 600),
                  curve: Curves.easeInOut,
                  child: Center(

Desired outcome