颤动图标按钮周围有不需要的空间答案

【问题标题】：Flutter Icon Button with unwanted space around颤动图标按钮周围有不需要的空间
【发布时间】：2023-01-02 03:11:30
【问题描述】：

我在 Flutter 中仍然是绿色的，并且面临着 IconButton 间距问题：

图标周围有不需要的空间。我没有在小部件之间添加任何填充或大小框，而且我对来自很棒的字体的图标也有同样的问题。这是我的代码：

Widget contactCard(context, dl, i) {
  return GestureDetector(
    onTap: () {},
    child: Card(
      color: Colors.grey[300],
      child: SizedBox(
        height: 190,
        child: Padding(
          padding: EdgeInsets.all(10),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(dl[i].englishName, style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
              Text(dl[i].chineseName, style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
              constructPhone(dl[i].phone1),
              constructPhone(dl[i].phone2),
            ],
          ),
        ),
      ),
    ),
  );
}

Widget constructPhone(tel){
  if (tel.runes.length==0){
    return Text('');
  }else{
    return Row(
      children: [
        IconButton(
          padding: EdgeInsets.all(0),
          icon: const Icon(Icons.phone, size: 20),
          onPressed: () => launchUrl(Uri.parse("tel://" + tel)),
        ),
        Text(
          tel,
          style: TextStyle(fontSize: 18),
        ),
      ],
    );
  };
}

【问题讨论】：

标签： flutter iconbutton

【解决方案1】：

使用 iconSize 或 IconButton

IconButton(
 iconSize: 20,
 icon: const Icon(Icons.phone),
 padding: EdgeInsets.zero,

默认图标将采用 24 大小，并且图标资产附带硬编码填充。

【讨论】：

您可能还喜欢RichText

【解决方案2】：

IconButton 周围总是有相当大的填充，以便用户更容易点击它们。

如果您不想要填充，请考虑使用 Icon 小部件，并用 GestureDetector 包装它以执行您自己的 onTap 事件。您还可以考虑使用 GestureDetector 或 InkWell 使整行（图标和文本）可点击，以允许用户更轻松地点击它。

【讨论】：