Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article focuses on better animation when the Flutter keyboard is open

In this tutorial, we’ll listen carefully to keyboard visibility and provide a smoother transition for your view when it appears. We’ll use the keyboard_visibility package to listen for visibility and AnimatedContainer to animate our view UI.

keyboard_visibility

We will first add the package to PubSpec

Keyboard_visibility: ^ 0.5.6Copy the code

We will have a simple setup. Our MyApp widget will display a HomeView as the home page of the MaterialApp. HomeView will be a stateful widget.

class MyApp extends StatelessWidget { // This widget is the root of your application. @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(); }}Copy the code

In the initState function, we will listen for keyboard visibility.

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

Animated UI

Suppose we have a UI with text fields in the center of the screen. When we click on it, we want it to go to the top. To do this, we’ll use an animation container as our root widget and set the alignment to the top center when the keyboard displays. Let’s make our UI first. 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'),
            )
          ],
        ),
      ),
    );
Copy the code

This should give you a title and text field in the center of the screen. Next let’s animate by first using the alignment value as a class variable and changing its value in setState.

// Add variable to top of class Alignment childAlignment = Alignment.center; @override void initState() { KeyboardVisibilityNotification().addNewListener( onChange: (bool visible) { // Add state updating code setState(() { childAlignment = visible ? Alignment.topCenter : Alignment.center; }); }); super.initState(); } // Updated animated container alignment property ... AnimatedContainer( curve: Curves.easeOut, duration: Duration( milliseconds: 400, ), width: double.infinity, height: double.infinity, padding: const EdgeInsets.all(20), alignment: childAlignment, // <=== Make sure to use childAlignment here child: Column(...) ,);Copy the code

When you now click on the input field, you’ll see the columns appear at the top of the screen in a smoother way than the usual keyboard jump.