Unverified Commit 197cd4d6 authored by David Martos's avatar David Martos Committed by GitHub

Update margin between label and icon in Tab to better reflect Material specs (#140698)

This PR improves the distance between the label and the icon in the Tab widget. 
I updated the margin to 2 pixels, taken from the Figma design page for Material 3. On Material 2 I left the default value of 10 pixels.

Related to #128696 (In particular, the distance between label and icon)

Here are some screenshots for comparison. I looked a bit into the other mentioned issue of the tab height not following the M3 spec. Flutter uses 72 and the spec uses 64. But because Tab is a PreferredSizeWidget, I don't think there is an easy way to provide a different size depending on `ThemeData.useMaterial3`, because there is no `BuildContext` available.
I provide a sample image for the 64 height as well for context on the linked issue, even though it's not part of the PR changes.

The screenshots are taken side by side with the image at: https://m3.material.io/components/tabs/guidelines

## Original

![original](https://github.com/flutter/flutter/assets/22084723/f52d46bb-eaf9-4519-976e-9ea07c021e14)

## New (tab height = 72, Flutter default for 8 years)

![new_72](https://github.com/flutter/flutter/assets/22084723/8c9d3510-eaca-4b7d-92d8-0d06a7e75136)

## New (tab height = 64, M3 spec)

![new_64](https://github.com/flutter/flutter/assets/22084723/f8811b70-766f-4a4f-b069-33673b1e3744)
parent c1b01ec1
......@@ -77,6 +77,11 @@ class _${blockName}PrimaryDefaultsM3 extends TabBarTheme {
TabAlignment? get tabAlignment => isScrollable ? TabAlignment.startOffset : TabAlignment.fill;
static double indicatorWeight = ${getToken('md.comp.primary-navigation-tab.active-indicator.height')};
// TODO(davidmartos96): This value doesn't currently exist in
// https://m3.material.io/components/tabs/specs
// Update this when the token is available.
static const EdgeInsetsGeometry iconMargin = EdgeInsets.only(bottom: 2);
}
class _${blockName}SecondaryDefaultsM3 extends TabBarTheme {
......
......@@ -107,7 +107,7 @@ class Tab extends StatelessWidget implements PreferredSizeWidget {
super.key,
this.text,
this.icon,
this.iconMargin = const EdgeInsets.only(bottom: 10.0),
this.iconMargin,
this.height,
this.child,
}) : assert(text != null || child != null || icon != null),
......@@ -132,7 +132,10 @@ class Tab extends StatelessWidget implements PreferredSizeWidget {
///
/// Only useful when used in combination with [icon], and either one of
/// [text] or [child] is non-null.
final EdgeInsetsGeometry iconMargin;
///
/// Defaults to 2 pixels of bottom margin. If [ThemeData.useMaterial3] is false,
/// then defaults to 10 pixels of bottom margin.
final EdgeInsetsGeometry? iconMargin;
/// The height of the [Tab].
///
......@@ -159,11 +162,15 @@ class Tab extends StatelessWidget implements PreferredSizeWidget {
label = icon!;
} else {
calculatedHeight = _kTextAndIconTabHeight;
final EdgeInsetsGeometry effectiveIconMargin = iconMargin ??
(Theme.of(context).useMaterial3
? _TabsPrimaryDefaultsM3.iconMargin
: _TabsDefaultsM2.iconMargin);
label = Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
margin: iconMargin,
margin: effectiveIconMargin,
child: icon,
),
_buildLabelText(),
......@@ -2266,6 +2273,8 @@ class _TabsDefaultsM2 extends TabBarTheme {
@override
TabAlignment? get tabAlignment => isScrollable ? TabAlignment.start : TabAlignment.fill;
static const EdgeInsetsGeometry iconMargin = EdgeInsets.only(bottom: 10);
}
// BEGIN GENERATED TOKEN PROPERTIES - Tabs
......@@ -2340,6 +2349,11 @@ class _TabsPrimaryDefaultsM3 extends TabBarTheme {
TabAlignment? get tabAlignment => isScrollable ? TabAlignment.startOffset : TabAlignment.fill;
static double indicatorWeight = 3.0;
// TODO(davidmartos96): This value doesn't currently exist in
// https://m3.material.io/components/tabs/specs
// Update this when the token is available.
static const EdgeInsetsGeometry iconMargin = EdgeInsets.only(bottom: 2);
}
class _TabsSecondaryDefaultsM3 extends TabBarTheme {
......
......@@ -386,6 +386,45 @@ void main() {
material3 ? const Size(14.25, 72.0) : const Size(14.0, 72.0));
});
testWidgets('Material2 - Default Tab iconMargin', (WidgetTester tester) async {
await tester.pumpWidget(MaterialApp(
theme: ThemeData(useMaterial3: false),
home: const Material(
child: Tab(
icon: Icon(Icons.house),
text: 'x',
),
),
));
double getIconMargin() {
final Rect iconRect = tester.getRect(find.byIcon(Icons.house));
final Rect labelRect = tester.getRect(find.text('x'));
return labelRect.top - iconRect.bottom;
}
expect(getIconMargin(), equals(10));
});
testWidgets('Material3 - Default Tab iconMargin', (WidgetTester tester) async {
await tester.pumpWidget(const MaterialApp(
home: Material(
child: Tab(
icon: Icon(Icons.house),
text: 'x',
),
),
));
double getIconMargin() {
final Rect iconRect = tester.getRect(find.byIcon(Icons.house));
final Rect labelRect = tester.getRect(find.text('x'));
return labelRect.top - iconRect.bottom;
}
expect(getIconMargin(), equals(2));
});
testWidgets('Tab color - normal', (WidgetTester tester) async {
final ThemeData theme = ThemeData(fontFamily: 'FlutterTest');
final bool material3 = theme.useMaterial3;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment