Flutter: 移除按钮中的填充 - FlatButton、ElevatedButton、OutlinedButton

Question

我想要去掉FlatButton的默认外边距，但似乎无法设置或覆盖它。

Column(children: <Widget>[
      Container(
          children: [
            FractionallySizedBox(
              widthFactor: 0.6,
              child: FlatButton(
                  color: Color(0xFF00A0BE),
                  textColor: Color(0xFFFFFFFF),
                  child: Text('LOGIN', style: TextStyle(letterSpacing: 4.0)),
                  shape: RoundedRectangleBorder(side: BorderSide.none)))),
      Container(
          margin: const EdgeInsets.only(top: 0.0),
          child: FractionallySizedBox(
              widthFactor: 0.6,
              child: FlatButton(
                  color: Color(0xFF00A0BE),
                  textColor: Color(0xFF525252),
                  child: Text('SIGN UP',
                      style: TextStyle(
                          fontFamily: 'Lato',
                          fontSize: 12.0,
                          color: Color(0xFF525252),
                          letterSpacing: 2.0)))))
    ])

我遇到了像ButtonTheme和debugDumpRenderTree()这样的东西，但是我无法正确地实现它们。

- Don Boots

Answer 1

FlatButton(materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,)

- Andrii Turkovskyi

---

知道吗，那个方法很有效。我想我永远也不会发现那个。真傻，一直在寻找边距/内补语法。 - Don Boots

首先，我也看了一下边距/填充))) - Andrii Turkovskyi

我认为需要注意的是，移除目标点击尺寸通常不是一个好的做法，因为Material Design在触控目标大小方面有一些严格的指南，Flutter Material Widget试图遵守这些指南。 - Walter Kimaro

FlatButton的最小尺寸为88.0 x 36.0，根据文档，因此上述解决方案对于较小的按钮将无效，需要在ButtonTheme中进行包装。请查看@joel-broström的答案。 - Vivek Bansal

如果您不想使用ButtonTheme，只需添加minWidth:0 - 这将将默认最小大小减小为0，主要用于较小的按钮。 - mustafa zaki

FlatButton已被弃用。替代它的ElevatedButton在样式中具有tapTargetSize: MaterialTapTargetSize.shrinkWrap。 - kashlo

Answer 2

更新（新增按钮）

• TextButton

  

TextButton(
  onPressed: () {},
  style: TextButton.styleFrom(
    minimumSize: Size.zero, // Set this
    padding: EdgeInsets.zero, // and this
  ),
  child: Text('TextButton'),
)

ElevatedButton

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    minimumSize: Size.zero, // Set this
    padding: EdgeInsets.zero, // and this
  ),
  child: Text('ElevatedButton'),
)

OutlinedButton

OutlinedButton(
  onPressed: () {},
  style: OutlinedButton.styleFrom(
    minimumSize: Size.zero, // Set this
    padding: EdgeInsets.zero, // and this
  ),
  child: Text('OutlinedButton'),
)

---

您也可以使用原始的MaterialButton

MaterialButton(
  onPressed: () {},
  color: Colors.blue,
  minWidth: 0,
  height: 0,
  padding: EdgeInsets.zero,
  child: Text('Button'),
)

- CopsOnRoad

---

这应该是被接受的答案，因为Flutter已经更新了按钮。 - Obumuneme Nwabude

好的，谢谢兄弟。这个答案应该被接受。它们对Flutter中的许多按钮都很有用 <3 - Nghien Nghien

你应该添加 tapTargetSize: MaterialTapTargetSize.shrinkWrap。 - Tayan

新的按钮并没有更好，所以并没有什么答案。我试图从RawMaterialButton中去除填充，但无济于事，而使用MaterialButton时问题完全相同。 - undefined

Answer 3

我发现将按钮包装在ButtonTheme中更容易。 指定maxWith和height（将其设置为零以包装子元素），然后将您的按钮作为子元素传递即可。 您还可以将大多数按钮属性从按钮移动到主题中，以在一个小部件中收集所有属性。

ButtonTheme(
  padding: EdgeInsets.symmetric(vertical: 4.0, horizontal: 8.0), //adds padding inside the button
  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, //limits the touch area to the button area
  minWidth: 0, //wraps child's width
  height: 0, //wraps child's height
  child: RaisedButton(onPressed: (){}, child: Text('Button Text')), //your original button
);

- Joel Broström

---

出于好奇，我的答案有什么问题吗？还是其他人的答案更好？ - Joel Broström

你的答案更好。它涵盖了所有类似情况。 - Rafik Farhad

它没有解决我的问题。包含在行中的FlatButton仍然有额外的填充。我不知道它来自哪里。 - passerbywhu

如果您可以在 gist [https://gist.github.com/] 上发布您的代码，我可以查看一下！ - Joel Broström

Answer 4

FlatButton(
  padding: EdgeInsets.all(0) 
)

这对我起了作用

- ahmadMarafa

---

根据文档，FlatButton的最小尺寸为88.0 x 36.0，因此上述解决方案无法适用于较小的按钮，需要将其包装在ButtonTheme中。请参考@joel-broström的答案。 - Vivek Bansal

更好的写法是 EdgeInsets.zero。 - HasanAlyazidi

正如@VivekBansal所指出的，这个解决方案行不通，joel-brostrom的答案才是关键。 - Deepak K J

Answer 5

感谢Flutter的git上FlatButton introduces phantom padding。

如果有人需要一个没有Flutter填充的onPressed事件小部件。

您应该使用InkWell

InkWell(
    child: Center(child: Container(child: Text("SING UP"))),
    onTap: () => onPressed()
);

一个对触摸作出反应的材料矩形区域。

- Durdu

Answer 6

文本按钮以前称为扁平按钮

要在两个文本按钮之间去除间距，请使用tapTargetSize， 将tapTargetSize设置为MaterialTapTargetSize.shrinkWrap

要去除内边距， 将padding设置为EdgeInsets.all(0)

TextButton(
    child: SizedBox(),
    style: TextButton.styleFrom(
        backgroundColor: Colors.red,
        padding: EdgeInsets.all(0),
        tapTargetSize: MaterialTapTargetSize.shrinkWrap
    ),
    onPressed: () {
    print('Button pressed')
    },
),

- Arihant Jain

Answer 7

对于那些想知道如何移除FlatButton文本周围的默认填充的人，你可以使用RawMaterialButton，并将约束设置为BoxConstraints()，这将将按钮的默认最小宽度和高度重置为零。

RawMaterialButton可用于配置不依赖于任何继承主题的按钮。因此，我们可以根据自己的需要自定义所有默认值。

示例：

RawMaterialButton(
    constraints: BoxConstraints(),
    padding: EdgeInsets.all(5.0), // optional, in order to add additional space around text if needed
    child: Text('Button Text')
)

请参考此文档进行进一步的自定义。

- Arshak

Answer 8

您还可以通过使用SizedBox将按钮包裹来更改按钮的宽度：

SizedBox(
  width: 40,
  height: 40,
  child: RaisedButton(
    elevation: 10,
    onPressed: () {},
    padding: EdgeInsets.all(0), // make the padding 0 so the child wont be dragged right by the default padding
    child: Container(
      child: Icon(Icons.menu),
    ),
  ),
),

- Bar Tzadok

Answer 9

由于FlatButton已被弃用，您可以使用TextButton。因此，如果您想在TextButton上去除填充，则可以按照以下方式进行：

TextButton（style：ButtonStyle(padding: MaterialStateProperty.all(EdgeInsets.zero))）

- Terrance Khumalo

Answer 10

我也遇到了同样的问题，RawMaterialButton小部件内有水平填充，但我不需要它。

我用以下方法解决了这个问题：

RawMaterialButton(
  onPressed: () {
            
  },
  child: Container(
     child: Row(
        children: [
            // Any thing you want to use it. Column or Container or any widget.
        ],
     ),
   ),
),

- khaled mohammad