CODEWITHSUNDEEP
flutterdartflutter-layout
Don Boots
Don Boots

Reputation: 2166

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

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.

Upvotes: 87

Views: 103614

Answers (11)

Andrii Turkovskyi
Andrii Turkovskyi

Reputation: 29438

Update: This answer is Deprecated. Check new answers below. (You now need to set three attributes: minimumSize, padding and tapTargetSize)

FlatButton(materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,)

Upvotes: 161

CopsOnRoad
CopsOnRoad

Reputation: 267404

UPDATE (New buttons)

  • TextButton

    enter image description here

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

  • ElevatedButton

    enter image description here

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

  • OutlinedButton

    enter image description here

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

Upvotes: 124

Arihant Jain
Arihant Jain

Reputation: 847

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

Upvotes: 17

Khalid Mohammed
Khalid Mohammed

Reputation: 463

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

Upvotes: 0

Terrance Khumalo
Terrance Khumalo

Reputation: 71

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

Upvotes: 2

Durdu
Durdu

Reputation: 4849

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.

Upvotes: 32

Bhushan
Bhushan

Reputation: 61

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

Upvotes: 0

Bar Tzadok
Bar Tzadok

Reputation: 516

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

Upvotes: 7

Joel Brostr&#246;m
Joel Brostr&#246;m

Reputation: 4040

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

Upvotes: 40

Arshak
Arshak

Reputation: 3235

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.

Upvotes: 17

ahmadMarafa
ahmadMarafa

Reputation: 1346

FlatButton(
  padding: EdgeInsets.all(0) 
)

did the trick for me

Upvotes: 35

Related Questions