Switch has some padding that leads to uncentered UI #148498
Labels
f: material design
flutter/packages/flutter/material repository.
found in release: 3.22
Found to occur in 3.22
framework
flutter/packages/flutter repository. See also f: labels.
has reproducible steps
The issue has been confirmed reproducible and is ready to work on
P2
Important issues not at the top of the work list
team-design
Owned by Design Languages team
triaged-design
Triaged by Design Languages team
Comments
|
Interestingly I can notice a solid radial artifact. I amplified it here: |
|
Me too, but that only shows up on hover. AppBar behavior ignores the hover effect on its placement. |
|
Visible or not, seems that such area is computed as part of the object causing the mentioned gap. |
|
Yes, that's what causes the issue |
bernaferrari
changed the title
bernaferrari
changed the title
|
Labeling for further investigation. complete sampleimport 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
/// Flutter code sample for [Switch].
void main() => runApp(const SwitchApp());
class SwitchApp extends StatelessWidget {
const SwitchApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light(useMaterial3: true),
home: Scaffold(
appBar: AppBar(title: const Text('Switch Sample')),
body: const Center(
child: SwitchExample(),
),
),
);
}
}
class SwitchExample extends StatefulWidget {
const SwitchExample({super.key});
@override
State<SwitchExample> createState() => _SwitchExampleState();
}
class _SwitchExampleState extends State<SwitchExample> {
bool light = true;
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Switch(
value: light,
onChanged: (bool value) {
setState(() {
light = value;
});
},
),
],
);
}
}flutter doctor -v |
danagbemava-nc
added
framework
Piinks
added
P2
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
It seems to me that Flutter Material 3 Switch width is being miscalculated, which is giving an extra 8px width around it, leading to a padding that causes unbalanced/uncentered layouts. This seems to be against both the Material specs and other Material implementations. Flutter is using 60px instead of 52px for the M3 Switch.
On Material website, the spec says it should be 52px wide:
Material Web implementation also has the correct sizing:
I debugged the code, saw two possible ways to solve:
This one works perfectly (not sure the side effects):
or
This one breaks the track drag:
Screenshots or Video
What I expect (Shadcn/UI):
What I receive (Flutter):
Code sample
Flutter Doctor output
The text was updated successfully, but these errors were encountered: