How to move AppBar when Keyboard is opened?

user_13725696 0
Viewed 392

So my app looks like this:

App Image

Now, when I click the TextField in the BottomAppBar, I see this:

bottom app bar hidden

Code:

bottomNavigationBar: Container(
    decoration: BoxDecoration(
        color: Colors.blue[50],
        borderRadius: BorderRadius.all(Radius.circular(20))),
    padding: EdgeInsets.all(12.0),
    child: TextField(
        decoration: InputDecoration(hintText: 'Add a new item'),
        onSubmitted: (str) => {},
    )),

I want the BottomAppBar to move up when I type so I can see what I'm typing. How do I go about doing this?

flutter
4 Answers

I would personally suggest not using the bottomnavigationbar, which is meant to disappear under a keyboard, but instead just use a bottom-aligned view in the body of your scaffold. This will automatically move up when the keyboard appears. If you put the ListView and the Container with the textfield into a column and wrap the ListView in an Expanded widget, it should work pretty easily:

Column(
    children: [
        Expanded(child: ListView(...)), // your item list
        Container(...), // your textfield
    ]
)
user_154695370

Add this to your Container in the bottomNavigationBar property:

          padding: EdgeInsets.only(
            bottom: MediaQuery.of(context).viewInsets.bottom,
          ),

Or to keep the padding you already added:

          padding: EdgeInsets.only(
            bottom: MediaQuery.of(context).viewInsets.bottom,
          ).add(
            const EdgeInsets.all(12.0),
          ),

Screenshot of example

user_136464300

You should try with stack

Stack(
      children: [
        SingleChildScrollView(
          ---------
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: Container(
              decoration: BoxDecoration(
                  color: Colors.blue[50],
                  borderRadius: BorderRadius.all(Radius.circular(20))),
              padding: EdgeInsets.all(12.0),
              child: TextField(
                decoration: InputDecoration(hintText: 'Add a new item'),
                onSubmitted: (str) => {},
              )),
        ),

      ],
    )
user_150492640

What @fravolt suggested is right in the sense that bottomnavigationbar should not move as per Material Design. In my case I moved the widget up using the Translate widget:

Widget build(BuildContext context) {
    final mediaQueryData = MediaQuery.of(context);

    Transform.translate(
      offset: Offset(
        0.0,
        -1 * mediaQueryData.viewInsets.bottom,
      ),
      child: Container(
    decoration: BoxDecoration(
        color: Colors.blue[50],
        borderRadius: BorderRadius.all(Radius.circular(20))),
    padding: EdgeInsets.all(12.0),
    child: TextField(
        decoration: InputDecoration(hintText: 'Add a new item'),
        onSubmitted: (str) => {},
    )),

}
user_126687270
Related