How to move AppBar when Keyboard is opened? - flutter

Question

So my app looks like this:
Now, when I click the TextField in the BottomAppBar, I see this:
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?

Answer 1

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
]
)

Answer 2

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) => {},
)),
),
],
)

Answer 3

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),
),

Answer 4

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) => {},
)),
}