Flutter 2：从 ElevatedButton / TextButton 中移除额外的边距

Question

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

这里详细介绍它的外观：

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

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

你会怎么做？

Answer 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 中的值将影响辅助功能体验。

收缩包装：将点击目标大小缩小到 Material 规范提供的最小值。

查看更多 official flutter documentation

希望对您有所帮助！如果你有更好的解决方案告诉我！

Flutter 2：从 ElevatedButton / TextButton 中移除额外的边距

Flutter 2: Remove additional margin from ElevatedButton / TextButton

flutter

margin