Height of SegmentedButton does not match Material3 spec and cannot be changed #121493
Description
Internal: b/319434259
SegmentedButton has wrong height
The Material3 specification gives a height of 40dp for Segmented buttons and a recommended TapTargetSize of 48dp. This cannot be achieved in Flutter since the minimumSize style-property does not affect the widget.
The correct minimumSize was actually set as a default in #120095 but is not honored.
Expected results:
A SegmentedButton with (visual) height of 40dp and TapTargetSize of 48dp can be achieved and is the default.
Relevant Topic in the M3 Spec: https://m3.material.io/components/segmented-buttons/specs#8e9a164f-1913-4a93-8214-585ce84a8c0f
Actual results:
The minimumHeight of SegmentedButton cannot be changed and defaults to the MaterialTapTargetSize of 48dp.
SegmentedButton without and with minimumSize set (see provided Demo-Code):
Issue demo code
Code sample
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light(useMaterial3: true),
home: const Scaffold(
body: Center(
child: SegmentedButtonDemo(),
),
),
);
}
}
class SegmentedButtonDemo extends StatefulWidget {
const SegmentedButtonDemo({super.key});
@override
State<SegmentedButtonDemo> createState() => _SegmentedButtonDemoState();
}
class _SegmentedButtonDemoState extends State<SegmentedButtonDemo> {
int selectedValue = 1;
void _onValueSelected(Set<int> value) {
setState(() {
selectedValue = value.first;
});
}
List<ButtonSegment<int>> _buttonSegments() {
return const [
ButtonSegment(value: 1, label: Text('Hello')),
ButtonSegment(value: 2, label: Text('World')),
];
}
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
SegmentedButton(
segments: _buttonSegments(),
selected: {selectedValue},
onSelectionChanged: _onValueSelected,
),
SegmentedButton(
style: ButtonStyle(
minimumSize: MaterialStateProperty.all(const Size.fromHeight(40.0)),
),
segments: _buttonSegments(),
selected: {selectedValue},
onSelectionChanged: _onValueSelected,
)
],
);
}
}Used Flutter version
Channel master, 3.8.0-16.0.pre.55
Flutter doctor
[✓] Flutter (Channel master, 3.8.0-16.0.pre.55, on macOS 13.2.1 22D68 darwin-x64, locale de-DE)
• Flutter version 3.8.0-16.0.pre.55 on channel master at /Users/wachter/dev/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision bdfe74fc4a (3 hours ago), 2023-02-26 13:16:23 -0500
• Engine revision 0c040de0e6
• Dart version 3.0.0 (build 3.0.0-272.0.dev)
• DevTools version 2.22.1
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at /Users/wachter/Library/Android/sdk
• Platform android-33, build-tools 30.0.3
• ANDROID_HOME = /Users/wachter/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 13.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 13E113
• CocoaPods version 1.11.3
[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Android Studio (version 2022.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 11.0.15+0-b2043.56-8887301)
[✓] IntelliJ IDEA Ultimate Edition (version 2020.1.4)
• IntelliJ at /Applications/IntelliJ IDEA.app
• Flutter plugin version 54.0.1
• Dart plugin version 201.9335
[✓] VS Code (version 1.75.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.58.0
[✓] Connected device (3 available)
• SM G973F (mobile) • adb-RF8N21W2EKF-fhvdo5._adb-tls-connect._tcp. • android-arm64 • Android 12 (API 31)
• macOS (desktop) • macos • darwin-x64 • macOS 13.2.1 22D68 darwin-x64
• Web Server (web) • web-server • web-javascript • Flutter Tools
[✓] Network resources
• All expected network resources are available.
! Doctor found issues in 1 category.
Metadata
Metadata
Assignees
Labels
Important issues not at the top of the work listflutter/packages/flutter/material repository.Found to occur in 3.8flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onIssue is closed as already fixed in a newer versionOwned by Design Languages teamTriaged by Design Languages team