ButtonStyle padding different from container padding

Question

Why is it that a ButtonStyle's padding property is not equivalent to a Container's padding property in terms of pixels?

I would expect the TextButton and Container text to be aligned when placed together here:

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    TextButton(
      style: ButtonStyle(
        padding: MaterialStateProperty.all(EdgeInsets.all(24)),
      ),
      onPressed: () => print('pressed!'),
      child: Text('My Button'),
    ),
    Container(
      padding: EdgeInsets.all(24),
      child: Text('Some other text'),
    )
  ],
);

Both the TextButton and Container theoretically have taken the same padding amount, and yet the texts do not line up. Note the "S" from the Container text does not line up with the "M" from the TextButton, despite them both having the same amount of padding:

Note that the Column's crossAxisAlignment has been set to "start" such that both widgets should align to the left-most side.

Am I missing something about the ButtonStyle's padding property?

Update

I can confirm that iOS and Android does not have the same issue. This issue seems to be isolated to Web and Desktop (macOS/Linux). I have not tested Windows.

I've tried poking around, and I've gotta say that this is really weird. when running in dartpad, there is a big difference, while in android they have the exactly same size. — Adnan, Jun 07 '21 at 20:29
Interesting that Android is ok. I’ve only checked macOS and DartPad so far; both with the same results. — shennan, Jun 07 '21 at 20:33

score 1 · Answer 1 · answered Jun 08 '21 at 14:36

So it seems that this is a bug and has been tracked here on GitHub.

As per the comments, a fix was pushed to the master channel of releases in March and I presume will be available in the next 2.3.0 stable release.

For those who want to switch to the latest master to double check that it's working as it should; run:

$ flutter channel master
$ flutter upgrade

You may also need to reinstall any packages before running.

ButtonStyle padding different from container padding

1 Answers1