How to create a bottom comment widget in Flutter?

Issue

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

Solution

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(
    ...
  )
...

Answered By – Andrey Turkovsky

Answer Checked By – Terry (FlutterFixes Volunteer)