Flutter TextFormField 带有高度容器上的图标

Question

我正在尝试重新创建这个搜索输入，但我在保持它那么小方面遇到了麻烦，如果我添加 prefixIcon 高度会增加并且我似乎无法控制它。

这就是我现在所拥有的。 我正在使用一行，因为我还需要在输入字段后添加一个按钮，但这是以后的事。

Widget _buildSearch() => Container(
          padding: EdgeInsets.all(8.0),
          color: Color(0xFF131313),
          height: 50.0,
          child: Row(
            children: <Widget>[
              Flexible(
                flex: 2,
                child: TextFormField(
                  textAlign: TextAlign.left,
                  style: TextStyle(fontSize: 11.0),
                  decoration: InputDecoration(
                      contentPadding: new EdgeInsets.symmetric(vertical: 0.0),
                      border: InputBorder.none,
                      prefixIcon: Padding(
                        padding: EdgeInsets.all(0.0),
                        child: Icon(
                          Icons.search,
                          color: Colors.grey,
                        ), // icon is 48px widget.
                      ),
                      hintText: 'Search artist, genre, playlist',
                      hintStyle: TextStyle(fontSize: 11.0)),
                ),
              ),
            ],
          ),
        );

Answer 1

调整文本字段的内容填充并将您的图标包装在填充小部件中，因为它的输入类型是小部件

TextField(
      decoration: InputDecoration(
          contentPadding: EdgeInsets.only(top: 20), // add padding to adjust text
          isDense: true,
          hintText: "Email",
          prefixIcon: Padding(
            padding: EdgeInsets.only(top: 15), // add padding to adjust icon
            child: Icon(Icons.help_outline),
          ),

    );

这是上面代码的输出

Answer 2

你可以像这样调整图像大小

prefixIcon: new Padding(
   padding: const EdgeInsets.only( top: 15, left: 5, right: 0, bottom: 15),
   child: new SizedBox(
            height: 4,
            child: Image.asset(imgname),
   ),
),