如何删除文本字段中图标和文本之间的间距 - Flutter？答案

【问题标题】：How to remove spacing between Icon and text in textfield - Flutter?如何删除文本字段中图标和文本之间的间距 - Flutter？
【发布时间】：2020-06-29 13:25:18
【问题描述】：

我是 Flutter 新手，我正在创建一个搜索栏，为此，我使用了 TextField 并添加了前缀图标，但在图标和输入文本之间出现了一些额外的空格。

请告诉我如何删除或减少空间？

下面是我的代码：

  child: TextField(
    decoration: InputDecoration(
      border: InputBorder.none,
      icon: IconButton(
        icon: Icon(Icons.search),
        color: Colors.pink,
        onPressed: () {},
      ),
    hintText: "Search for restaurant",
    hintStyle: TextStyle(fontSize: 15),
    onChanged: (input){
      print(input);
    },
  )

【问题讨论】：

标签： flutter flutter-layout flutter-animation flutter-test

【解决方案1】：

您可以使用prefixIcon 代替icon，默认情况下它不会占用文本和图标之间的空间。

 TextField(
        decoration: InputDecoration(
          border: InputBorder.none,
          prefixIcon: IconButton(
            icon: Icon(
              Icons.search,
              color: Colors.pink,
            ),
            onPressed: () {},
          ),

          hintText: "Search for restaurant",
          hintStyle: TextStyle(fontSize: 15),
        ),
        onChanged: (input) {
          print(input);
        },
      ),

【讨论】：

【解决方案2】：

将此行添加到您的Textfield

contentPadding: EdgeInsets.symmetric(vertical: -5),//set this as per your requirement

【讨论】：