how can I make BottomNavigationBar stick on top of keyboard flutter

问题

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 icon.

I added a text field but when typing the navigation bar is hidden by the keyboard.

this is the code of my BottomNavigationBar :

bottomNavigationBar: new Container(
          height: ScreenSize.height/12,
          /*color: Colors.red,*/

          child: new Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,

            children: <Widget>[
              new Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  new Container(
                    child: new Icon(Icons.send),

                    width:ScreenSize.width/6,
                  ),
                ],
              ),
              new Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Material(
                    child: new Container(
                      child: new TextField(
                        autofocus: false,
                        decoration: InputDecoration(
                          contentPadding: EdgeInsets.all(9.0),
                          border: InputBorder.none,
                          hintText: 'Please enter a search term',
                        ),
                      ),
                      width:ScreenSize.width*4/6,
                    ),
                      elevation: 4.0,
                    /*borderRadius: new BorderRadius.all(new Radius.circular(45.0)),*/
                    clipBehavior: Clip.antiAlias,
                    type: MaterialType.card,
                  )
                ],
              ),
              new Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  new Container(
                    child: Text('HELLO C1'),
                    color: Colors.green,
                    width:ScreenSize.width/6,
                  ),
                ],
              )




            ],
          ),
        ),

here is how it looks when focused :

回答1:

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

回答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

回答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.

回答4:

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

来源：https://stackoverflow.com/questions/53364062/how-can-i-make-bottomnavigationbar-stick-on-top-of-keyboard-flutter

标签

dart

Flutter