Flutter TextButton Remove Padding and Inner Padding

Question

I just updated my code in Flutter to use TextButton instead of old FlatButton. I can't figure out how to set width and height of a button though.

I got two problems. First one is that I have this icon Button now:

TextButton.icon(
    label: Container(),
    style: TextButton.styleFrom(padding: EdgeInsets.all(0),
        backgroundColor: Colors.black26),
        icon: Icon(Icons.share, color: Theme.of(context).primaryColor),
        onPressed: () {}),

which loos like this:

I can't figure out how to get rid of the padding on the left and the right. Although I did set the padding inside the style to zero.

My Second Problem is a button that I had like this:

ButtonTheme(
    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    height: 10,
    minWidth: 15,
    padding: EdgeInsets.only(top: 5, bottom: 5, right: 5, left: 5),
    child: FlatButton(
      color: Colors.white.withOpacity(0.9),
      child: <MyChild>,
      onPressed: () {},
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12.0),
          side: BorderSide(
              color: condition
                  ? Theme.of(context).primaryColor
                  : widget.color != null
                      ? widget.color
                      : Colors.black54,
              width: 0.5)),
    ));
}

and it looked like this:

Now I updated my code to this:

OutlinedButton(
    style: OutlinedButton.styleFrom(
      tapTargetSize: MaterialTapTargetSize.shrinkWrap,
      padding: EdgeInsets.only(top: 0, bottom: 0, right: 5, left: 5),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
      side: BorderSide(
          width: 0.5,
          color: condition
              ? Theme.of(context).primaryColor
              : widget.color != null
                  ? widget.color
                  : Colors.black54),
      primary: Colors.white.withOpacity(0.9),
    ),
    child: <MyChild>,
    onPressed: () {})

But it looks like this now: The padding on top/bottom is too much but I can't figure out how to minimize it.

Any advice? Thank you!

Edit: I tried to use OutlinedButtonTheme but this did not allow me to set a height etc.

Answer 1

Flutter TextButton is the new button. Since Flutter 2.0 FlatButton is deprecated.

Example of how to use this button with custom styles. This is a back button with an icon. It has a wide pressable area and alignment to left according to design.

For inner padding just use Padding widget in the child property - it gives you consistent style for any String length.

TextButton(   onPressed: () => Navigator.pop(context),   style: TextButton.styleFrom(       padding: EdgeInsets.zero,       minimumSize: Size(50, 30),       alignment: Alignment.centerLeft),   child: Icon(     CupertinoIcons.back,     color: Colors.black,     size: 18,   ), ), 

Answer 2

You need to set three attributes: minimumSize, padding and tapTargetSize

TextButton(   onPressed: (){},   child: Icon(Icons.delete, color: Colors.black54),   style: TextButton.styleFrom(     minimumSize: Size.zero,     padding: EdgeInsets.zero,     tapTargetSize: MaterialTapTargetSize.shrinkWrap,   ), ) 

Edit:

I have added some padding in my code, and it looks good.

padding: EdgeInsets.fromLTRB(10.0, 3.0, 10.0, 3.0), 

Answer 3

Okay, I just figured it out. One need to set the minimumSize attribute.

OutlinedButton.styleFrom(
  minimumSize: Size(widthValue, heightValue),
)

This was what made my Buttons bigger than I wanted.