How can I make a BottomAppBar stick to top of keyboard? flutter

Question

bottomNavigationBar: BottomAppBar(

        color: Colors.white,
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: TextField(
            maxLines: 1,
            decoration: InputDecoration(hintText: 'Tags', border: InputBorder.none),
          ),
        ),
        elevation: 0,
      ),

Although the TextField for contents sticks to keyboard(Theres a TextField for contents in the body.), the BottomAppBar doesnt do.

I chose to use BottomAppbar to put a TextField on the bottom. Is it a bad way to do it?

idle

when I cursor on the tags

question from:https://stackoverflow.com/questions/65840865/how-can-i-make-a-bottomappbar-stick-to-top-of-keyboard-flutter

Answer 1

I would not recommend using a TextField in the bottom navigation bar, it is not thought to hold such elements.

What I would do instead is something like (:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Colum(
        children: [
          // Your widgets
          ...
          Spacer(),
          TextField(
             ...
          ),
        ),
    );
  }
}

Here, Spacer will push the TextField to the bottom of the application. If you did not use a SingleChildScrollView, you would get an overflow error since the keyboard would overlap the TextField. However, with the SingleChildScrollView the content will be made scrollable so there's no overlap.