Incorrect vertical padding for `ElevatedButton` from `ButtonStyle`

[ltOgt]

Is there an existing issue for this?

• I have searched the existing issues
• I have read the guide to filing a bug

Steps to reproduce

(tested on macos, stable and master)

Create a new flutter project and paste the following into main.dart:

Code Sample

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: const Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {},
      style: const ButtonStyle(
        backgroundColor: MaterialStatePropertyAll(Colors.blue),
        padding: MaterialStatePropertyAll(
          EdgeInsets.all(30), // <================= 30 horizontal and vertical
        ),
      ),
      child: Container(
        color: Colors.black,
        width: 10,
        height: 10,
      ),
    );
  }
}

Expected results

The given padding should be used for horizontal and vertical padding.

Actual results

The horizontal padding is honoured, but the vertical padding is too small:

On stable:

• Top padding 22 ❌

  • 

• Right padding 30 ✅

  • 

On master:

• Top padding 23 ❌
  • 
• Right padding 30 ✅
  • 

Code sample

See above

Screenshots or Video

See above

Logs

None

Flutter Doctor output

Doctor output (stable)

$ flutter doctor -v
[✓] Flutter (Channel stable, 3.13.9, on macOS 13.4 22F66 darwin-arm64, locale en-DE)
    • Flutter version 3.13.9 on channel stable at /Users/gian/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision d211f42860 (2 days ago), 2023-10-25 13:42:25 -0700
    • Engine revision 0545f8705d
    • Dart version 3.1.5
    • DevTools version 2.25.0

[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/gian/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E300c
    • CocoaPods version 1.12.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.82.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.74.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 13.4 22F66 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 118.0.5993.117

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

Doctor output (master)

$ flutter doctor -v
[✓] Flutter (Channel master, 3.16.0-18.0.pre.63, on macOS 13.4 22F66 darwin-arm64, locale en-DE)
    • Flutter version 3.16.0-18.0.pre.63 on channel master at /Users/gian/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision eba149fcc3 (4 hours ago), 2023-10-27 12:04:07 +0300
    • Engine revision bedc49efc8
    • Dart version 3.3.0 (build 3.3.0-56.0.dev)
    • DevTools version 2.28.1

[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/gian/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E300c
    • CocoaPods version 1.12.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.82.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.74.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 13.4 22F66 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 118.0.5993.117

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

[dam-ease]

Hi @ltOgt. Thanks for filing this. Trying to reproduce this but it's a little difficult seeing the differences. Did you take a screenshot to grap these measurements or could you explain more on how the wrong vertical padding was discovered?

[ltOgt]

I discovered these differences when trying to implement some design spec.

The screenshots above were taken via macos screenshot tool (cmd+shift+4) while making a screen recording.

You should be able to just take a screenshot and measure the pixels in any image program like paint of photoshop.

But the difference should also be visible from the button itself:

Since the padding is 30 on both axis, and the button content is a square, the button should be square as well.

---

I also edited the issue description to include the measurements next to the screenshots

---

Here is the video where i measured:

Screen.Recording.2023-10-27.at.14.39.49.mov

[dam-ease]

Thanks for your response. Checking this on my end, I see almost the same dimensions. Are you taking the screenshot from mobile (Android or iOS) or Desktop as I seem to notice slight differences when testing with screenshot from macOS

Screen.Recording.2023-10-30.at.08.54.17.mov

[ltOgt]

Strange, the video you shared looks exactly how i would expect it to look without this issue.

I tried it on macos for Desktop (both macos and web).

I now checked it on dartpad.dev as well for both Channel Stable and Channel Master.

The issue also happens there:

[dam-ease]

Thanks for your response and patience. I see this issue seems to occur on desktop only, the earlier screen record attached was from testing on mobile.
Running the sample and testing on web and macOS, I can see a difference in the horizontal and vertical padding when measured.

Mobile	Web	MacOS
❌	✅	✅

✅- Reproduces
❌- Doesn't reproduce

Screen.Recording.2023-11-02.at.10.30.23.mov

flutter doctor -v

[!] Flutter (Channel stable, 3.13.9, on macOS 14.0 23A344 darwin-arm64, locale
    en-NG)
    • Flutter version 3.13.9 on channel stable at
      /Users/damilolaalimi/sdks/flutter
    ! Warning: `dart` on your path resolves to
      /opt/homebrew/Cellar/dart/3.1.5/libexec/bin/dart, which is not inside your      current Flutter SDK checkout at /Users/damilolaalimi/sdks/flutter.
      Consider adding /Users/damilolaalimi/sdks/flutter/bin to the front of your      path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision d211f42860 (8 days ago), 2023-10-25 13:42:25 -0700
    • Engine revision 0545f8705d
    • Dart version 3.1.5
    • DevTools version 2.25.0
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/damilolaalimi/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/damilolaalimi/Library/Android/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A507
    • CocoaPods version 1.12.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build
      17.0.6+0-17.0.6b802.4-9586694)

[!] Android Studio (version unknown)
    • Android Studio at /Users/damilolaalimi/Downloads/Android Studio
      Preview.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to determine Android Studio version.
    • Java version OpenJDK Runtime Environment (build
      17.0.7+0-17.0.7b1000.6-10550314)

[✓] VS Code (version 1.83.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.50.0

[✓] VS Code (version 1.83.1)
    • VS Code at /Users/damilolaalimi/Downloads/Visual Studio Code.app/Contents
    • Flutter extension version 3.50.0

[✓] Connected device (4 available)
    • sdk gphone64 arm64 (mobile) • emulator-5554             • android-arm64  •
      Android 14 (API 34) (emulator)
    • Damilola’s iPhone (mobile)  • 00008110-001964480AE1801E • ios            •
      iOS 17.0.2 21A351
    • macOS (desktop)             • macos                     • darwin-arm64   •
      macOS 14.0 23A344 darwin-arm64
    • Chrome (web)                • chrome                    • web-javascript •
      Google Chrome 118.0.5993.117

[!] Network resources
    ✗ A network error occurred while checking "https://github.com/": Operation
      timed out

! Doctor found issues in 3 categories.

[!] Flutter (Channel master, 3.16.0-21.0.pre.42, on macOS 14.0 23A344 darwin-arm64, locale en-NG)
    • Flutter version 3.16.0-21.0.pre.42 on channel master at /Users/damilolaalimi/fvm/versions/master
    ! Warning: `flutter` on your path resolves to /Users/damilolaalimi/sdks/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/damilolaalimi/fvm/versions/master. Consider adding /Users/damilolaalimi/fvm/versions/master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /opt/homebrew/Cellar/dart/3.1.5/libexec/bin/dart, which is not inside your current Flutter SDK checkout at /Users/damilolaalimi/fvm/versions/master. Consider adding /Users/damilolaalimi/fvm/versions/master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f7d1b35dca (3 hours ago), 2023-11-02 03:21:43 -0400
    • Engine revision 3c1e8f457e
    • Dart version 3.3.0 (build 3.3.0-87.0.dev)
    • DevTools version 2.29.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/damilolaalimi/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/damilolaalimi/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A507
    • CocoaPods version 1.12.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[!] Android Studio (version unknown)
    • Android Studio at /Users/damilolaalimi/Downloads/Android Studio Preview.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to determine Android Studio version.
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)

[✓] VS Code (version 1.83.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.50.0

[✓] VS Code (version 1.83.1)
    • VS Code at /Users/damilolaalimi/Downloads/Visual Studio Code.app/Contents
    • Flutter extension version 3.50.0

[✓] Connected device (3 available)
    • Damilola’s iPhone (mobile) • 00008110-001964480AE1801E • ios            • iOS 17.0.2 21A351
    • macOS (desktop)            • macos                     • darwin-arm64   • macOS 14.0 23A344 darwin-arm64
    • Chrome (web)               • chrome                    • web-javascript • Google Chrome 118.0.5993.117

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 2 categories.