在Flutter Container> FlatButton中删除填充

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()但是却无法正确实现它们.

Answer 1

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

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

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

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 2

FlatButton(materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,)

Answer 3

由FlatButton提供，在 flutter 的 git 上引入了幻影填充。

如果有人需要一个带有 onPressed 事件而不用 Flutter 填充它的小部件。

你应该使用InkWell

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

响应触摸的材料的矩形区域。

Answer 4

使用ElevatedButton和TextButton（推荐）：

设置minimumSize并padding归零。例如：

• ElevatedButton（以前RaisedButton）

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

• TextButton（以前FlatButton）

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

您也可以使用原始 MaterialButton

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

Answer 5

文本按钮以前是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')
    },
),

Answer 6

对于所有想知道如何操作的人remove the default padding around the text of a 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')
)

请参阅此文档以进一步定制。

Answer 7

FlatButton(
  padding: EdgeInsets.all(0) 
)

为我做了把戏

Answer 8

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

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