在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

FlatButton(materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,)

Answer 2

使用MaterialButton

---

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

Answer 3

FlatButton(
  padding: EdgeInsets.all(0) 
)

对我有用吗

Answer 4

由FlatButton introduces phantom padding（关于Flutter的git）提供。

如果任何人都需要具有onPressed事件且没有Flutter填充的窗口小部件。

您应该使用 InkWell

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

  

材质的矩形区域，可以响应触摸。

Answer 5

我发现将按钮包装在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
);

Answer 6

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

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

Answer 7

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

  

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

示例：

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

Answer 9

将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 10

使用EdgeInsetsGeometry padding

padding属性可帮助我们指定FlatButton内部子项的填充。这里的内部子项是“文本”小部件。

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

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

文本按钮以前的平面按钮

要删除 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')
    },
),