Flutter：删除按钮中的填充 - FlatButton、ElevatedButton、OutlinedButton

Question

我想删除 FlatButton 的默认边距，但似乎无法 set/override 它。

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() 之类的事情，但未能正确实施它们。

Answer 1

FlatButton(materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,)

Answer 2

FlatButton(
  padding: EdgeInsets.all(0) 
)

对我有用

Answer 3

对于所有想知道如何 remove the default padding around the text of a FlatButton 的人，您可以改用 RawMaterialButton 并 将约束设置为 BoxConstraints() 这将 将按钮的默认最小宽度和高度重置为零 。

RawMaterialButton can be used to configure a button that doesn't depend on any inherited themes. So we can customize all default values based on our needs.

示例：

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

请参阅 this 文档以进一步自定义。

Answer 4

感谢 FlatButton introduces phantom padding 关于 flutter 的 git。

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

你应该使用InkWell

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

A rectangular area of a Material that responds to touch.

Answer 5

我发现将按钮包裹在 ButtonTheme 中更容易。

指定 maxWith 和高度（设置为零以包裹 child），然后将您的按钮作为 child 传递。

您还可以将大部分按钮属性从按钮移至主题，以将所有属性集中在一个小部件中。

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
);

Answer 6

您还可以通过用一个大小合适的框围绕它来更改按钮宽度：

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),
    ),
  ),
),

Answer 7

更新（新按钮）

`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'),
)

Answer 8

将您的 FlatButton 包裹在一个容器中并指定您的自定义宽度例如

Container(
            width: 50,
            child: FlatButton(child: Text("WORK",style: Theme.of(context).textTheme.bodyText1.copyWith(fontWeight: FontWeight.bold),),
            onPressed: () => Navigator.pushNamed(context, '/locationChange'),materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,padding: EdgeInsets.all(0),),
          )

Answer 9

使用EdgeInsetsGeometry padding

padding 属性帮助我们指定 FlatButton 内部的 padding child。这里内部 child 是文本小部件。

FlatButton(
  padding: EdgeInsets.all(5),
  child: Text('Flat Button'),
)

Answer 10

由于 FlatButton 现已弃用，您可以使用 TextButton。所以如果你想删除 TextButton 上的填充，你可以这样做：

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

Answer 11

我遇到了同样的事情，RawMaterialButton 小部件中有水平填充我不需要它。

我是这样解决的:

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

Answer 12

Text Button 之前 FlatButton

要删除 2 个 TextButton 之间的间距，请使用 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')
    },
),

Flutter：删除按钮中的填充 - FlatButton、ElevatedButton、OutlinedButton

Flutter: Remove padding in buttons - FlatButton, ElevatedButton, OutlinedButton

dart

flutter

flutter-layout

更新（新按钮）

`TextButton`

`ElevatedButton`

`OutlinedButton`