Flutter: Icon in TextButton doesn't recenter when I change button's height

Question

I'm trying to create a TextButton that contains an Icon and a Label like this:

But every time I try to reduce the button´s height property, it centers the label but not the icon.

I'm achieving this with a TextButton (wrapped with a SizedBox with a 28px width), that has a Row as its child, that contains an Icon and a TextWidget.

Widget build(BuildContext context) {
    return SizedBox(
      height: 28,
      child: TextButton(
        onPressed: onPressed,
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Padding(
              padding: const EdgeInsets.only(right: 10),
              child: Icon(
                hasIcon ? icon : null,
                size: 18,
              ),
            ),
            content is String
                ? Text(
                    (content as String).toUpperCase(),
                    style: const TextStyle(
                        fontSize: 8, fontWeight: FontWeight.w700),
                  )
                : content,
          ],
        ),
(...)

Is there a way I can fix this?

Answer 1

in the TextButton child Row, you can add the mainAxisAlignment : MainAxisAlignment.center This will center horizontally the row's elements.