flutterdartflutter-layout

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.


Solution

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

    FlatButton(materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,)