英文:
Flutter: Inconsistent column padding on Buttons between Android and Windows
问题
我在Flutter中创建了一个简单的Material App:
flutter create --platforms=android,windows columntest
当我在Android和Windows上运行程序时,我在Android上的ElevatedButton之间会出现一些填充,但在Windows上不会。你知道这是从哪里来的吗?我该如何使设计保持一致?
这种行为似乎只出现在按钮(TextButton、OutlinedButton、ElevatedButton)上。我还在容器(带边框)上进行了测试,那里没有发生这种情况。
以下是小应用的代码:
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(
title: 'Flutter Demo',
home: Scaffold(
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(child: const Text("Foobar1"), onPressed: () {}),
ElevatedButton(child: const Text("Foobar2"), onPressed: () {}),
],
),
),
),
);
}
}
以下是运行时的屏幕截图:

以下是我的Flutter版本:
$ flutter --version
Flutter 3.10.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 84a1e904f4(3周前)• 2023年05月09日 07:41:44 -0700
Engine • revision d44b5a94c9
Tools • Dart 3.0.0 • DevTools 2.23.1
我的Android模拟器是Pixel_3a_API_33_x86_64。但是,这种行为也在我的物理Pixel 6上出现(带有Android UpsideDownCake)。
期待你的回复。
最好的问候
Michael
英文:
I have created a simple material app in flutter with:
flutter create --platforms=android,windows columntest
When I run the program on Android and Windows, I get some kind of padding between the ElevatedButtons on Android, but not on Windows. Do you know where this comes from and how I can make the design consistent?
The behavior seems to occur only with buttons (TextButton, OutlinedButton, ElevatedButton).
I have also tested this with container (with border), there it does not occur.
Here the code from the small app:
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(
title: 'Flutter Demo',
home: Scaffold(
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(child: const Text("Foobar1"), onPressed: () {}),
ElevatedButton(child: const Text("Foobar2"), onPressed: () {}),
],
),
),
),
);
}
}
Here is a screenshot at runtime:

Here my flutter version:
$ flutter --version
Flutter 3.10.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 84a1e904f4 (3 weeks ago) • 2023-05-09 07:41:44 -0700
Engine • revision d44b5a94c9
Tools • Dart 3.0.0 • DevTools 2.23.1
My Android Emulator is an: Pixel_3a_API_33_x86_64
But the behaviour also occurs on my physical Pixel 6 (with android UpsideDownCake)
I look forward to your responses.
best regards
Michael
答案1
得分: 1
这是Flutter实现的。
这个行为是由MaterialApp的ThemeData.materialTapTargetSize参数决定的。
这个特性决定了Material按钮的可触摸尺寸,在你的情况下是ElevatedButton。
你有两个潜在的解决方案:
- 像下面这样更改
ElevatedButton的填充:
ElevatedButton(
onPressed: () {},
style: const ButtonStyle(padding: MaterialStateProperty.all(EdgeInsets.zero)),
child: const Icon(Icons.abc),
),
- 更改
materialApp的值:
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap
),
home: CupertinoPickerExample(),
)
参考链接:https://stackoverflow.com/a/67580951
英文:
So, this implementation is done by flutter.
This is behaviour is because of the ThemeData.materialTapTargetSize parameter for the MaterialApp.
This feature decides what should be touchable dimensions of Material Button, in your case ElevatedButton.
You have 2 potential solutions
- Change padding from ElevatedButton like below
ElevatedButton(
onPressed: () {},
style: const ButtonStyle(padding: MaterialStatePropertyAll(EdgeInsets.zero)),
child: const Icon(Icons.abc),
),
- Change value from material app
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap),
home: CupertinoPickerExample(),
)
Reference : https://stackoverflow.com/a/67580951
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。


评论