how can I make BottomNavigationBar stick on top of keyboard flutter

Question

I am trying to make a simple chat app, so I created a scaffold and my body, will be the messages and my bottomNavigationBar would be my typing field and sending ico

Answer 1

Literally just worked through the same issue. Given the code i was refactoring, this worked like a charm. Peep the github link, review his change and apply. Couldn't be much more straight forward: https://github.com/GitJournal/GitJournal/commit/f946fe487a18b2cb8cb1d488026af5c64a8f2f78..

Content of the link above in case the link goes down:

(-)BottomAppBar buildEditorBottonBar(
(+)Widget buildEditorBottonBar(
  BuildContext context,
  Editor editor,
  EditorState editorState,
BottomAppBar buildEditorBottonBar(
    folderName = "Root Folder";
  }

  *REPLACE* return BottomAppBar(
    elevation: 0.0,
    color: Theme.of(context).scaffoldBackgroundColor,
    child: Row(
      children: <Widget>[
        FlatButton.icon(
          icon: Icon(Icons.folder),
          label: Text(folderName),
          onPressed: () {
            var note = editorState.getNote();
            editor.moveNoteToFolderSelected(note);
          },
        )
      ],
      mainAxisAlignment: MainAxisAlignment.center,

  *WITH THE WRAPPER* return StickyBottomAppBar(
    child: BottomAppBar(
      elevation: 0.0,
      color: Theme.of(context).scaffoldBackgroundColor,
      child: Row(
        children: <Widget>[
          FlatButton.icon(
            icon: Icon(Icons.folder),
            label: Text(folderName),
            onPressed: () {
              var note = editorState.getNote();
              editor.moveNoteToFolderSelected(note);
            },
          )
        ],
        mainAxisAlignment: MainAxisAlignment.center,
      ),
    ),
  );
}

class StickyBottomAppBar extends StatelessWidget {
  final BottomAppBar child;
  StickyBottomAppBar({@required this.child});

  @override
  Widget build(BuildContext context) {
    return Transform.translate(
      offset: Offset(0.0, -1 * MediaQuery.of(context).viewInsets.bottom),
      child: child,
    );
  }
}

Answer 2

I was trying to do the same thing, and came across this wonderfully simple solution:

https://www.reddit.com/r/FlutterDev/comments/8ao6ty/how_to_make_bottom_appbar_that_sticks_to_the_top/

Thought it might prove useful to someone in the future

Answer 3

If you need some kind of button; you can do:

Scaffold(
            bottomNavigationBar: bottomNavigationBar,
            floatingActionButton: ExampleButton(
              text: 'Hello',
            ),
            body: body,
          ),

You can apply further customizations on the Floating Action Button using parameters in the Scaffold.

Answer 4

if you use a Stack on your Scaffold's body, instead of bottomNavigationBar, your nav will push up above the keyboard. even if you fix to the bottom with a Positioned:

Positioned(
   bottom: 0.0,
   left: 0.0,
   right: 0.0,
   child: MyNav(),
),