CODEWITHSUNDEEP
flutterdartflutter-widgetflutter-theme
shennan
shennan

Reputation: 11656

ButtonStyle padding different from container padding

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:

enter image description here

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.

Upvotes: 1

Views: 616

Answers (1)

shennan
shennan

Reputation: 11656

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.

Upvotes: 1

Related Questions