Flutter searchbar layout issue BoxConstraints forces an infinite width

Question

I am trying to imitate a searchview similar to attached image, but I am getting following error. I can achieve this using ListTile but I can't set padding to the icons or TextField. So I am trying to achieve this using Row widget. Please have a look at my code and help me to draw this searchbar.

 I/flutter (19181): The following assertion was thrown during 
 performLayout():
 I/flutter (19181): BoxConstraints forces an infinite width.
 I/flutter (19181): These invalid constraints were provided to 
 RenderAnimatedOpacity's layout() function by the      
 I/flutter (19181): following function, which probably computed 
 the invalid constraints in question:
 I/flutter (19181):   _RenderDecoration._layout.layoutLineBox (package:flutter/src/material/input_decorator.dart:767:11)
 I/flutter (19181): The offending constraints were:
 I/flutter (19181):   BoxConstraints(w=Infinity, 0.0<=h<=46.0)

Here is my code:

 new Container(
            height: 70.0,
              color: Theme.of(context).primaryColor,
              child: new Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: new Card(
                      child: new Container(
                        child: new Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            new Icon(Icons.search),


                            new Container(
                              height: double.infinity,
                              width: double.infinity,
                              child: new TextField(
                                controller: controller,
                                decoration: new InputDecoration(
                                    hintText: 'Search', border: InputBorder.none),
                                // onChanged: onSearchTextChanged,
                              ),
                            ),
                            new IconButton(icon: new Icon(Icons.cancel), onPressed: () {
                              controller.clear();
                              // onSearchTextChanged('');
                            },),



                          ],
                        ),
                      )
                  ))),

Yamin · Accepted Answer · 2018-08-07T11:38:24.257

EDIT: This answer is a quick fix for the above question.

Best practice is Derek Lakin's answer

Answer:

To maximize container's width, set its width to

MediaQuery.of(context).size.width

Check this code:

new Container(
    height: 70.0,
    color: Theme.of(context).primaryColor,
    child: new Padding(
        padding: const EdgeInsets.all(8.0),
        child: new Card(
            child: new Container(
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  new Icon(Icons.search),
                  new Container(
                    //height: double.infinity, //This is extra
                    width: MediaQuery.of(context).size.width - 100.0, // Subtract sums of paddings and margins from actual width 
                    child: new TextField(
                      controller: controller,
                      decoration: new InputDecoration(
                          hintText: 'Search', border: InputBorder.none),
                      // onChanged: onSearchTextChanged,
                    ),
                  ),
                  new IconButton(icon: new Icon(Icons.cancel), onPressed: () {
                    controller.clear();
                    // onSearchTextChanged('');
                  },),
                ],
              ),
            )
        )))

score 4 · Answer 2 · answered Aug 01 '18 at 12:13

You're trying to define infinite height and width for the Container that is a parent of the TextField, which wants to use all the space.

The following works by using Expanded to fill the available space:

Container(
  height: 70.0,
  child: Card(
    margin: EdgeInsets.all(8.0),
    child: Row(
      children: <Widget>[
        Padding(
          padding: EdgeInsets.all(8.0),
          child: Icon(Icons.search),
        ),
        Expanded(
          child: TextField(
            decoration: new InputDecoration(
                hintText: 'Search', border: InputBorder.none),
          ),
          flex: 1,
        ),
        IconButton(
          icon: Icon(Icons.cancel),
          onPressed: () {},
        )
      ],
    ),
  ),
),

Flutter searchbar layout issue BoxConstraints forces an infinite width

2 Answers2