Wrap padding/spacing is inconsistent between Mobile and Desktop/Web

[apulsifer]

Steps to reproduce

ElevatedButton's have padding on Android, while on Windows they have no padding. To reproduce, place multiple ElevatedButton's in a Wrap, like this: Wrap(spacing:15, runSpacing: 0, children: [ElevatedButton( ...
On Windows, resize the window so it is narrow and the buttons stack. They will be touching each other. Now look at Android. The buttons stack but they do not touch. Of course, you can try to set runSpacing to something like 10, but then you get too much padding on Android (it eats up too much of the limited screen space). This difference in button padding makes it difficult to get a layout that can adjust to screen size and works on both platforms.

Suggested solution: Add padding to ElevatedButton on Windows to make it consistent with Android.

Expected results

The button padding should be consistent between the two platforms.

Actual results

Buttons touch on Windows, they do not touch on Android.

Code sample

Wrap(spacing:15, runSpacing: 0, children: [ElevatedButton(...), ElevatedButton(...), ElevatedButton(...), ElevatedButton(...), ElevatedButton(...), ElevatedButton(...), ElevatedButton(...), ElevatedButton(...), ...]

Screenshots or Video

No response

Logs

No response

Flutter Doctor output

[√] Flutter (Channel stable, 3.32.1, on Microsoft Windows [Version 10.0.19045.5854], locale en-US) [989ms]
    • Flutter version 3.32.1 on channel stable at C:\Users\A\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b25305a883 (3 days ago), 2025-05-29 10:40:06 -0700
    • Engine revision 1425e5e9ec
    • Dart version 3.8.1
    • DevTools version 2.45.1

[√] Windows Version (10 Home 64-bit, 22H2, 2009) [5.7s]

[√] Android toolchain - develop for Android devices (Android SDK version 36.0.0) [5.5s]
    • Android SDK at C:\Users\A\AppData\Local\Android\sdk
    • Platform android-36, build-tools 36.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 21.0.6+-13368085-b895.109)
    • All Android licenses accepted.

[√] Chrome - develop for the web [188ms]
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.14.0) [185ms]
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.14.36109.1
    • Windows 10 SDK version 10.0.26100.0

[√] Android Studio (version 2024.3.2) [41ms]
    • Android Studio at C:\Program Files\Android\Android Studio
    • 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 21.0.6+-13368085-b895.109)

[√] VS Code, 64-bit edition (version 1.100.2) [38ms]
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.110.0

[√] Connected device (4 available) [819ms]
    • Pixel 3a (wireless) (mobile) • adb-9ARAY1F302-KVckni._adb-tls-connect._tcp • android-arm64  • Android 12 (API 32)
    • Windows (desktop)            • windows                                     • windows-x64    • Microsoft Windows
      [Version 10.0.19045.5854]
    • Chrome (web)                 • chrome                                      • web-javascript • Google Chrome
      136.0.7103.114
    • Edge (web)                   • edge                                        • web-javascript • Microsoft Edge
      136.0.3240.50

[√] Network resources [486ms]
    • All expected network resources are available.

• No issues found!

[apulsifer]

FYI, as a work around, I ended up cropping the button heights to 40 on Android. Also, the default button font size on both platforms is 14, but I found it looked slightly better on Windows to bump that up to 15. The code below is what I ended up with. Note that cropping the button height to 32 on Windows has no effect, and setting the button text font size to 14 on Android has no effect, I just put these in so I could use the same code for both platforms.

class SettingsState extends MySettingsStateBase {
  static double defaultButtonFontSize = 14.0;
  static double defaultButtonHeight = 40.0; // exact height of button on Android with text fontSize 14
}

const desktopPixelSizeThreshold = 1.55;

bool checkHorizontalPixelSize(
  BuildContext context, {
  double threshold = desktopPixelSizeThreshold ,
}) {
  final ratio = MediaQuery.maybeDevicePixelRatioOf(context) ?? 1;
  print('checkHorizontalPixelSize ratio = $ratio <= threshold = $threshold');
  return ratio <= threshold;
}

    final isDesktop = checkHorizontalPixelSize(context);

    // make the buttons look the same on Android and Windows
    if (isDesktop) {
      SettingsState.defaultButtonFontSize = 15.0;
      SettingsState.defaultButtonHeight = 32.0; // exact height of button on Windows with text fontSize 15
    }
    print(
      'isDesktop = $isDesktop; defaultButtonFontSize = ${SettingsState.defaultButtonFontSize}; defaultButtonHeight = ${SettingsState.defaultButtonHeight}',
    );

// an ElevatedButton has padding on Android but none on Windows
// to make layout consistent, we wrap the ElevatedButton in a SizedBox
// so it has the same padding on both platforms
Widget myButton({
  bool enabled = true,
  double? height,
  FocusNode? focusNode,
  VoidCallback? onPressed,
  required Widget? child,
}) {
  return SizedBox(
    height: height ?? SettingsState.defaultButtonHeight,
    child: Align(
      widthFactor: 1,
      alignment: Alignment.center,
      child: ElevatedButton(
        focusNode: focusNode,
        style: ButtonStyle(
          foregroundColor: WidgetStateProperty.all<Color>(Colors.black),
          backgroundColor: enabled
              ? WidgetStateProperty.all<Color>(Colors.blue)
              : null,
        ),
        onPressed: enabled ? onPressed : null,
        child: child,
      ),
    ),
  );
}

class MyButtonText extends Text {
  MyButtonText(
    super.text, {
    super.key,
    double? fontSize,
    FontStyle fontStyle = FontStyle.normal,
  }) : super(
         style: TextStyle(
           fontSize: fontSize ?? SettingsState.defaultButtonFontSize,
           fontStyle: fontStyle,
         ),
       );
}

// example of myButton
return myButton(
	enabled: settingsState.enableSave,
	onPressed: settingsState.saveSettings,
	child: MyButtonText('Save'),
      );

[tirth-patel-nc]

hi @apulsifer, by inconsistent padding you meant following (check red arrows):

Code Sample

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: Test()));

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Wrap(
          spacing: 15,
          runSpacing: 0,
          children: [
            ElevatedButton(onPressed: () {}, child: Text('Test')),
            ElevatedButton(onPressed: () {}, child: Text('Test')),
            ElevatedButton(onPressed: () {}, child: Text('Test')),
            ElevatedButton(onPressed: () {}, child: Text('Test')),
            ElevatedButton(onPressed: () {}, child: Text('Test')),
            ElevatedButton(onPressed: () {}, child: Text('Test')),
            ElevatedButton(onPressed: () {}, child: Text('Test')),
            ElevatedButton(onPressed: () {}, child: Text('Test')),
            ElevatedButton(onPressed: () {}, child: Text('Test')),
            ElevatedButton(onPressed: () {}, child: Text('Test')),
          ],
        ),
      ),
    );
  }
}

[apulsifer]

hi @apulsifer, by inconsistent padding you meant following (check red arrows):

yes, that is what I meant and also what I am seeing

[tirth-patel-nc]

thanks for confirming. it's reproducible on macOS and web, while android and iOS are fine. seems specific to desktop and web platforms - possibly a duplicate of #67797.

stable 3.32.1
master 3.33.0-1.0.pre.386