Flutter 2：从 ElevatedButton / TextButton 中删除额外的边距答案

【问题标题】：Flutter 2: Remove additional margin from ElevatedButton / TextButtonFlutter 2：从 ElevatedButton / TextButton 中删除额外的边距
【发布时间】：2021-10-26 08:02:31
【问题描述】：

我想知道如何去除 ElevatedButton 和 TextButton 周围的边距。

这里详细介绍一下它的外观：

Column(
  children: [
    ElevatedButton(
        onPressed: () {
        },
        child: Text('Login')
    ),

    TextButton(
        onPressed: () {
        },
        child: Text('Login')
    ),
  ],
)

你会怎么做？

【问题讨论】：

标签： flutter margin

【解决方案1】：

解决办法如下：

ElevatedButton(
    onPressed: () {
    },
    style: ElevatedButton.styleFrom(
      tapTargetSize: MaterialTapTargetSize.shrinkWrap
    ),
    child: Text('Login')
),

TextButton(
    onPressed: () {
    },
    style: TextButton.styleFrom(
      padding: EdgeInsets.zero,
      tapTargetSize: MaterialTapTargetSize.shrinkWrap,
      minimumSize: Size(0, 0)
    ),
    child: Text('Login')
),

tapTargetSize: MaterialTapTargetSize.shrinkWrap

MaterialTapTargetSize：配置某些 Material 小部件的点击目标和布局大小。更改 ThemeData.materialTapTargetSize 中的值会影响无障碍体验。

收缩包装：将点击目标尺寸缩小到材质规范提供的最小值。

在official flutter documentation上查看更多信息

希望这会有所帮助！如果您有更好的解决方案，请告诉我！

【讨论】：