Padding inside FilledButton have a different behavior on web when on Mobile Browser vs Desktop Browser #155768
Description
Steps to reproduce
- Run the following code with flutter run -d chrome
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
body: Center(
child: SizedBox(
height: 40,
child: FilledButton(
style: FilledButton.styleFrom(
padding: const EdgeInsets.all(16),
),
onPressed: () {},
child: const Text("test"),
),
),
),
),
),
);
}- open a chrome window on the resulting url
- open a browser window on the resulting url with a iPhone simulator or an Android Emulator
Expected results
The two test button looks the same
Actual results
The two button looks really different.
The button text is visible on a chrome browser on macOS.
The button text is not visible on a chrome browser on iPhone/Android.
The mobile version is probably the correct one, with the text being cropped by the height constraint + big padding, but the debug was difficult be cause on desktop it looked good.
Code sample
Code sample
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
body: Center(
child: SizedBox(
height: 40,
child: FilledButton(
style: FilledButton.styleFrom(
padding: const EdgeInsets.all(16),
),
onPressed: () {},
child: const Text("test"),
),
),
),
),
),
);
}Screenshots or Video
Screenshots / Video demonstration
Logs
Logs
No interesting logs in the console
Performing hot restart...
Waiting for connection from debug service on Chrome...
Restarted application in 45ms.Flutter Doctor output
Doctor output
[!] Flutter (Channel [user-branch], 3.22.0, on macOS 14.6.1 23G93 darwin-arm64,
locale en-IT)
! Flutter version 3.22.0 on channel [user-branch] at
/opt/homebrew/Caskroom/flutter/3.19.4/flutter
Currently on an unknown channel. Run `flutter channel` to switch to an
official channel.
If that doesn't fix the issue, reinstall Flutter by following instructions
at https://flutter.dev/docs/get-started/install.
! Upstream repository unknown source is not a standard remote.
Set environment variable "FLUTTER_GIT_URL" to unknown source to dismiss
this error.
• Framework revision 5dcb86f68f (5 months ago), 2024-05-09 07:39:20 -0500
• Engine revision f6344b75dc
• Dart version 3.4.0
• DevTools version 2.34.3
• Pub download mirror
https://pvotaltech.jfrog.io/artifactory/api/pub/pvotal-pub/
• 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 33.0.0)
• Android SDK at /Users/clucera/Library/Android/sdk
• Platform android-34, build-tools 33.0.0
• Java binary at: /Applications/Android
Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build
17.0.7+0-17.0.7b1000.6-10550314)
• All Android licenses accepted.
[!] Xcode - develop for iOS and macOS (Xcode 16.0)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 16A242d
! iOS 18.0 Simulator not installed; this may be necessary for iOS and macOS
development.
To download and install the platform, open Xcode, select Xcode > Settings
> Platforms,
and click the GET button for the required platform.
For more information, please visit:
https://developer.apple.com/documentation/xcode/installing-additional-si
mulator-runtimes
• CocoaPods version 1.15.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2023.1)
• 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.7+0-17.0.7b1000.6-10550314)
[✓] IntelliJ IDEA Ultimate Edition (version 2023.1.6)
• IntelliJ at /Applications/IntelliJ IDEA.app
• Flutter plugin version 78.2.1
• Dart plugin version 231.9414.10
[✓] VS Code (version 1.88.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.90.0
[✓] Connected device (4 available)
• iPhone 15 Pro Max (mobile) • 7419A062-CAA2-4A3E-B7C1-4273A165C394 • ios • com.apple.CoreSimulator.SimRuntime.iOS-17-5 (simulator)
• macOS (desktop) • macos • darwin-arm64 • macOS 14.6.1 23G93 darwin-arm64
• Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 14.6.1 23G93 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 129.0.6668.60
[✓] Network resources
• All expected network resources are available.Metadata
Metadata
Assignees
Labels
Important issues not at the top of the work listWorks on one platform but not anotherIssues with https://api.flutter.dev/flutter/packages/flutter/material repository.Found to occur in 3.24Found to occur in 3.27flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onWeb applications specificallyIssue is closed as already fixed in a newer versionOwned by Design Languages teamTriaged by Design Languages team
Type
Projects
Status