How to animate a Flutter widget whose position changes due to layout changes


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


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

Answered By – Daniel Allen

Answer Checked By – Mary Flores (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.