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.
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:
Expanded( 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(
Answered By – Daniel Allen
Answer Checked By – Mary Flores (FlutterFixes Volunteer)