Trying to embed a TextField or TextFormField within a BottomAppBar

231 views Asked by At

I'm trying to build a BottomAppBar which contains a few icons (two on the left and another two on the right), and I'd like to add a Text input field in between them but whatever I try, it doesn't work.

Code compiles fine but when opening the page which uses this widget, the following error now appears:

RenderBox was not laid out: RenderRepaintBoundary#bcb66 NEEDS-LAYOUT NEEDS-PAINT

Here's my code:

Widget _buildBottomNavBar(){
  return BottomAppBar(
    child: Row(
      children:
      [
        IconButton(icon: Icon(Icons.attach_file_rounded), onPressed: () {}),
        IconButton(icon: Icon(Icons.emoji_emotions_outlined), onPressed: () {}),
        TextFormField(
          decoration: InputDecoration(labelText: 'Message'),
        ),
        IconButton(icon: Icon(Icons.play_arrow_rounded), onPressed: () {}),
        IconButton(icon: Icon(Icons.undo_rounded), onPressed: () {}),
      ],
    ),
  );
}

This seems simple but I've tried multiple things (including wrapping the TextFormField in an Expanded widget) but nothing seems to work. Any useful ideas are much appreciated. tia

UPDATE (here's the fixed code, forgot to add child:)

Widget _buildBottomNavBar(){
  return BottomAppBar(
    child: Row(
      children:
      [
        IconButton(icon: Icon(Icons.attach_file_rounded), onPressed: () {}),
        IconButton(icon: Icon(Icons.emoji_emotions_outlined), onPressed: () {}),
        Expanded(child:
        TextFormField(
          decoration: InputDecoration(labelText: 'Message'),
        )),
        IconButton(icon: Icon(Icons.play_arrow_rounded), onPressed: () {}),
        IconButton(icon: Icon(Icons.undo_rounded), onPressed: () {}),
      ],
    ),
  );
}

Btw pardon my crappy indentation.

0

There are 0 answers