1

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.

ChrisFNZ
  • 597
  • 1
  • 4
  • 21
  • I had no problem with this after wrapping `TextFormField` in an `Expanded` widget. I believe your problem lies elsewhere in your code. – Lee3 Feb 08 '21 at 10:06
  • Where you put this code ? If is it Column or Row you should wrap it with Sizedbox or something like that. I had no problem with that. – Onur Feb 08 '21 at 10:08
  • @Onur, I'm calling it within a Column context. – ChrisFNZ Feb 08 '21 at 10:10
  • I think there is a problem at your column. Can you share it – Onur Feb 08 '21 at 10:12
  • @Onur: Here's the relevant bit of the Column code: Widget _chatForm() { return Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.start, children: [ – ChrisFNZ Feb 08 '21 at 10:17
  • you can just remove Row which is inside `_buildBottomNavBar` and Create Stack with same items – theiskaa Feb 08 '21 at 10:29
  • I got it working, sorry it was a stupid typo. I'll delete this post soon so as not to waste anyone else's time. Thanks all. – ChrisFNZ Feb 08 '21 at 10:33
  • @theiskaa, I thought Stack was only to be used if you want to layer widgets on top of each other, which I'm not trying to do here. – ChrisFNZ Feb 08 '21 at 10:36
  • No no wait i have solved it – theiskaa Feb 08 '21 at 10:38
  • I will push answer just one min give me one minute pls – theiskaa Feb 08 '21 at 10:39

0 Answers0