In this tutorial we'll go over listening to the keyboard visibility and giving your view a smoother transition when it shows up. We'll use the keyboard_visibility package to listen for the visibility and the AnimatedContainer to animate our view's UI.

We'll start by adding the package to the pubspec

keyboard_visibility : ^0.5.6

We'll have a simple setup. Our MyApp widget will show a HomeView as the home of the MaterialApp. The HomeView will be a stateful widget.

class MyApp extends StatelessWidget { @override Widget build ( BuildContext context ) { return MaterialApp ( title : 'Flutter Demo' , home : HomeView ( ) , ) ; } } class HomeView extends StatefulWidget { const HomeView ( { Key key } ) : super ( key : key ) ; @override _HomeViewState createState ( ) = > _HomeViewState ( ) ; } class _HomeViewState extends State < HomeView > { @override Widget build ( BuildContext context ) { return Scaffold ( ) ; } }

In the initState function we'll listen for the keyboard visibility.

@override void initState ( ) { KeyboardVisibilityNotification ( ) . addNewListener ( onChange : ( bool visible ) { print ( 'keyboard $visible' ) ; } , ) ; super . initState ( ) ; }

Lets say we have a UI where the text field is in the center of the screen. When we tap it we want it to go to the top. For this we'll use an animated container as our root widget and set the alignment to top center when the keyboard shows. Lets first make our UI. Make your build widget look like this.

@override Widget build ( BuildContext context ) { return Scaffold ( body : AnimatedContainer ( curve : Curves . easeOut , duration : Duration ( milliseconds : 400 , ) , width : double . infinity , height : double . infinity , padding : const EdgeInsets . all ( 20 ) , alignment : Alignment . center , child : Column ( mainAxisSize : MainAxisSize . min , children : < Widget > [ Text ( 'Let\'s start your search' , style : TextStyle ( fontSize : 30 ) , ) , TextField ( decoration : InputDecoration ( hasFloatingPlaceholder : true , hintText : 'Enter things here' ) , ) ] , ) , ) , ) ;

That should give you a title and text field in the center of your screen. Next lets do the animation, we'll start by keeping the alignment value as a class variable and changing it's value in the setState.

Alignment childAlignment = Alignment . center ; @override void initState ( ) { KeyboardVisibilityNotification ( ) . addNewListener ( onChange : ( bool visible ) { setState ( ( ) { childAlignment = visible ? Alignment . topCenter : Alignment . center ; } ) ; } , ) ; super . initState ( ) ; } . . . AnimatedContainer ( curve : Curves . easeOut , duration : Duration ( milliseconds : 400 , ) , width : double . infinity , height : double . infinity , padding : const EdgeInsets . all ( 20 ) , alignment : childAlignment , child : Column ( . . . ) , ) ;

When you tap on the input field now you'll see the column animating to the top of the screen in a much smoother fashion than the usual keyboard jump.

Check out some of the other snippets to get some more Flutter knowledge.