颤振搜索栏布局问题 BoxConstraints 强制无限宽度

Question

我正在尝试模仿类似于附加图像的搜索视图，但出现以下错误。我可以使用 ListTile 来实现这一点，但我无法为图标或 TextField 设置填充。所以我正在尝试使用 Row 小部件来实现这一点。请查看我的代码并帮助我绘制此搜索栏。

 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) 

这是我的代码：

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



                          ],
                        ),
                      )
                  ))),

Answer 1

您正在尝试为 Container 定义无限的高度和宽度，它是 TextField 的父级，它想要使用所有空间。

以下工作通过使用Expanded 来填充可用空间：

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: () {},
        )
      ],
    ),
  ),
),

Answer 2

编辑：此答案是上述问题的快速解决方案。

最佳做法是Derek Lakin's answer

答案：

要最大化容器的宽度，请将其宽度设置为

MediaQuery.of(context).size.width

检查此代码：

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