如何删除 OutlinedButton 中的默认填充？答案

【问题标题】：How to remove default padding in OutlinedButton?如何删除 OutlinedButton 中的默认填充？
【发布时间】：2023-02-08 19:39:45
【问题描述】：

我想从轮廓按钮中删除默认填充。这是我的代码；

SizedBox(
    width: 150.0,
    child: OutlinedButton(
      onPressed: () {
        setState(() {
          selected = index;
        });
      },
      style: OutlinedButton.styleFrom(
        backgroundColor: (selected == index) ? color : Colors.white,
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20),
            topRight: Radius.circular(30),
            bottomLeft: Radius.circular(20),
            bottomRight: Radius.circular(20),
          ),
        ),
      ),
      child: Row(
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(duration),
              Text(dataPlan),
              Text(price),
            ],
          ),
        ],
      ),
    ),
  );

SizedBox 包裹在 ListView 中。

这是我得到的结果；

我想删除左侧和右侧的填充，这样我就可以根据自己的喜好进行自定义。谢谢。

【问题讨论】：

你能分享你想要实现的设计吗？
@Abhijith，我对这个问题进行了更好的思考。我想删除按钮左侧和右侧的默认填充。我没有遵循的设计。

标签： flutter dart

【解决方案1】：

将以下属性添加到按钮样式：

tapTargetSize: MaterialTapTargetSize.shrinkWrap
minimumSize: Size.zero
padding: EdgeInsets.zero

此外，将 Column 和 row 上的 mainAxisSize 设置为 min：

child: Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(duration),
        Text(dataPlan),
        Text(price),
      ],
    ),
  ],
),

【讨论】：

【解决方案2】：

添加Column这个属性来减小小部件的大小。

       Column(
        mainAxisSize: MainAxisSize.min
        ...

【讨论】：