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

Question

I am looking to remove the default margin of the FlatButton but can't seem to set/override it.
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.

Answer 1

FlatButton(materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,)

Answer 2

UPDATE (New buttons)
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'),
)
You can also use the raw MaterialButton
MaterialButton(
onPressed: () {},
color: Colors.blue,
minWidth: 0,
height: 0,
padding: EdgeInsets.zero,
child: Text('Button'),
)

Answer 3

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

Answer 4

FlatButton(
padding: EdgeInsets.all(0)
)
did the trick for me

Answer 5

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(child: Text("SING UP"))),
onTap: () => onPressed()
);
A rectangular area of a Material that responds to touch.

Answer 6

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.

Answer 7

Text Button previously FlatButton
To remove spacing between 2 TextButton use tapTargetSize
set tapTargetSize to MaterialTapTargetSize.shrinkWrap
To remove padding
set padding to EdgeInsets.all(0)
TextButton(
child: SizedBox(),
style: TextButton.styleFrom(
backgroundColor: Colors.red,
padding: EdgeInsets.all(0),
tapTargetSize: MaterialTapTargetSize.shrinkWrap
),
onPressed: () {
print('Button pressed')
},
),

Answer 8

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

Answer 9

Since FlatButton is now deprecated you can use TextButton. So if you want to remove the padding on TextButton, you would do it like this:
TextButton( style: ButtonStyle(padding: MaterialStateProperty.all(EdgeInsets.zero))

Answer 10

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

Answer 11

I faced the same thing, There is horizontal padding inside the RawMaterialButton Widget I don't need it.
I solved it using this way :
RawMaterialButton(
onPressed: () {
},
child: Container(
child: Row(
children: [
// Any thing you want to use it. Column or Container or any widget.
],
),
),
),