How to create a bottom comment widget in Flutter?

Question

I would like to build a comment widget floating at the bottom of screen. when user tap the input box, a key board pop-up.

Here is the problem. I tried to add a Container inside of a BottomNavigationBar. But when I tap the input box, key board pop-up and covered the entire BottomNavigationBar. SO I have no way to see what I just tapped in the input box.

Here are 2 images to show you the comment widget box I would like to build. And the key point is I don't want keyboard cover the comment widget.

Please help me.

close key board

open key board

Answer 1

MediaQuery.of(context).viewInsets returns ofsets which caused by keyboards. So, you can wrap your BottomNavigationBar into Padding like this:

Scaffold(
  bottomNavigationBar: Padding(padding: MediaQuery.of(context).viewInsets,
  child: BottomNavigationBar(
    ...
  )
...