Remove padding in Flutter Container > FlatButton

33

I am looking to remove the default margin of the FlatButton but can't seem to set/override it.

buttons with padding

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

I've come across things like ButtonTheme and even debugDumpRenderTree() but haven't been able to implement them properly.

flutter
asked on Stack Overflow Oct 3, 2018 by Don Boots

9 Answers

99
FlatButton(materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,)
answered on Stack Overflow Oct 3, 2018 by Andrey Turkovsky
29

I find it easier to just wrap the button in a ButtonTheme.

Specify the maxWith and height (set to zero to wrap the child) and then pass your button as the child.

You can also move most of your button properties from the button to the theme to gather all properties in one widget.

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
);
answered on Stack Overflow Oct 16, 2019 by Joel Broström • edited Oct 16, 2019 by Joel Broström
27
FlatButton(
  padding: EdgeInsets.all(0) 
)

did the trick for me

answered on Stack Overflow Dec 4, 2018 by ahmadMarafa
18

Courtesy of FlatButton introduces phantom padding on flutter's git.

If anyone needs a widget with onPressed event without Flutter padding it.

You should use InkWell

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

A rectangular area of a Material that responds to touch.

answered on Stack Overflow Aug 20, 2019 by Durdu • edited Sep 13, 2019 by Durdu
12

For all those who are wondering on how to remove the default padding around the text of a FlatButton, you can make use of RawMaterialButton instead and set the constraints to BoxConstraints() which will reset the default minimum width and height of button to zero.

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.

Example:

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

Please refer to this documentation for further customization.

answered on Stack Overflow Jun 14, 2019 by Arshak
6

Use MaterialButton

enter image description here


MaterialButton(
  onPressed: () {},
  color: Colors.blue,
  minWidth: 0,
  height: 0,
  padding: EdgeInsets.zero,
  child: Text('Button'),
)
answered on Stack Overflow May 13, 2020 by CopsOnRoad
4

you can also change the button width by surrounding it with a sized box:

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

answered on Stack Overflow Nov 24, 2019 by Bar Tzadok
0

wrap your FlatButton inside a container and give your custom width eg.

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),),
          )
answered on Stack Overflow May 19, 2020 by Bhushan
0

Use EdgeInsetsGeometry padding

padding property helps us to specify the padding of FlatButton internal child. Here internal child is Text widget.

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

enter image description here

answered on Stack Overflow Sep 18, 2020 by Paresh Mangukiya

User contributions licensed under CC BY-SA 3.0