Skip to content

Commit 3dfc60c

Browse files
authored
Revert "Fix divider width in scrollable TabBar for Material 3 and add dividerHeight parameter (flutter#123127)" (flutter#123616)
Revert "Fix divider width in scrollable `TabBar` for Material 3 and add `dividerHeight` parameter"
1 parent 12b36de commit 3dfc60c

File tree

6 files changed

+74
-171
lines changed

6 files changed

+74
-171
lines changed

dev/tools/gen_defaults/lib/tabs_template.dart

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,6 @@ class _${blockName}PrimaryDefaultsM3 extends TabBarTheme {
2020
late final ColorScheme _colors = Theme.of(context).colorScheme;
2121
late final TextTheme _textTheme = Theme.of(context).textTheme;
2222
23-
@override
24-
double? get dividerHeight => ${tokens['md.comp.primary-navigation-tab.divider.height']};
25-
2623
@override
2724
Color? get dividerColor => ${componentColor("md.comp.primary-navigation-tab.divider")};
2825
@@ -84,9 +81,6 @@ class _${blockName}SecondaryDefaultsM3 extends TabBarTheme {
8481
@override
8582
Color? get dividerColor => ${componentColor("md.comp.secondary-navigation-tab.divider")};
8683
87-
@override
88-
double? get dividerHeight => ${tokens['md.comp.primary-navigation-tab.divider.height']};
89-
9084
@override
9185
Color? get indicatorColor => ${componentColor("md.comp.primary-navigation-tab.active-indicator")};
9286

packages/flutter/lib/src/material/tab_bar_theme.dart

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ class TabBarTheme with Diagnosticable {
3232
this.indicatorColor,
3333
this.indicatorSize,
3434
this.dividerColor,
35-
this.dividerHeight,
3635
this.labelColor,
3736
this.labelPadding,
3837
this.labelStyle,
@@ -55,9 +54,6 @@ class TabBarTheme with Diagnosticable {
5554
/// Overrides the default value for [TabBar.dividerColor].
5655
final Color? dividerColor;
5756

58-
/// Overrides the default value for [TabBar.dividerHeight].
59-
final double? dividerHeight;
60-
6157
/// Overrides the default value for [TabBar.labelColor].
6258
///
6359
/// If [labelColor] is a [MaterialStateColor], then the effective color will
@@ -101,7 +97,6 @@ class TabBarTheme with Diagnosticable {
10197
Color? indicatorColor,
10298
TabBarIndicatorSize? indicatorSize,
10399
Color? dividerColor,
104-
double? dividerHeight,
105100
Color? labelColor,
106101
EdgeInsetsGeometry? labelPadding,
107102
TextStyle? labelStyle,
@@ -116,7 +111,6 @@ class TabBarTheme with Diagnosticable {
116111
indicatorColor: indicatorColor ?? this.indicatorColor,
117112
indicatorSize: indicatorSize ?? this.indicatorSize,
118113
dividerColor: dividerColor ?? this.dividerColor,
119-
dividerHeight: dividerHeight ?? this.dividerHeight,
120114
labelColor: labelColor ?? this.labelColor,
121115
labelPadding: labelPadding ?? this.labelPadding,
122116
labelStyle: labelStyle ?? this.labelStyle,
@@ -147,7 +141,6 @@ class TabBarTheme with Diagnosticable {
147141
indicatorColor: Color.lerp(a.indicatorColor, b.indicatorColor, t),
148142
indicatorSize: t < 0.5 ? a.indicatorSize : b.indicatorSize,
149143
dividerColor: Color.lerp(a.dividerColor, b.dividerColor, t),
150-
dividerHeight: t < 0.5 ? a.dividerHeight : b.dividerHeight,
151144
labelColor: Color.lerp(a.labelColor, b.labelColor, t),
152145
labelPadding: EdgeInsetsGeometry.lerp(a.labelPadding, b.labelPadding, t),
153146
labelStyle: TextStyle.lerp(a.labelStyle, b.labelStyle, t),
@@ -165,7 +158,6 @@ class TabBarTheme with Diagnosticable {
165158
indicatorColor,
166159
indicatorSize,
167160
dividerColor,
168-
dividerHeight,
169161
labelColor,
170162
labelPadding,
171163
labelStyle,
@@ -189,7 +181,6 @@ class TabBarTheme with Diagnosticable {
189181
&& other.indicatorColor == indicatorColor
190182
&& other.indicatorSize == indicatorSize
191183
&& other.dividerColor == dividerColor
192-
&& other.dividerHeight == dividerHeight
193184
&& other.labelColor == labelColor
194185
&& other.labelPadding == labelPadding
195186
&& other.labelStyle == labelStyle

packages/flutter/lib/src/material/tab_indicator.dart

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,8 +109,7 @@ class _UnderlinePainter extends BoxPainter {
109109
if (borderRadius != null) {
110110
paint = Paint()..color = decoration.borderSide.color;
111111
final Rect indicator = decoration._indicatorRectFor(rect, textDirection)
112-
.inflate(decoration.borderSide.width / 4.0)
113-
.shift(Offset(0.0, -decoration.borderSide.width / 2.0));
112+
.inflate(decoration.borderSide.width / 4.0);
114113
final RRect rrect = RRect.fromRectAndCorners(
115114
indicator,
116115
topLeft: borderRadius!.topLeft,

packages/flutter/lib/src/material/tabs.dart

Lines changed: 18 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import 'color_scheme.dart';
1515
import 'colors.dart';
1616
import 'constants.dart';
1717
import 'debug.dart';
18-
import 'divider.dart';
1918
import 'ink_well.dart';
2019
import 'material.dart';
2120
import 'material_localizations.dart';
@@ -361,6 +360,7 @@ class _IndicatorPainter extends CustomPainter {
361360
required _IndicatorPainter? old,
362361
required this.indicatorPadding,
363362
required this.labelPaddings,
363+
this.dividerColor,
364364
}) : super(repaint: controller.animation) {
365365
if (old != null) {
366366
saveTabOffsets(old._currentTabOffsets, old._currentTextDirection);
@@ -372,6 +372,7 @@ class _IndicatorPainter extends CustomPainter {
372372
final TabBarIndicatorSize? indicatorSize;
373373
final EdgeInsetsGeometry indicatorPadding;
374374
final List<GlobalKey> tabKeys;
375+
final Color? dividerColor;
375376
final List<EdgeInsetsGeometry> labelPaddings;
376377

377378
// _currentTabOffsets and _currentTextDirection are set each time TabBar
@@ -464,6 +465,10 @@ class _IndicatorPainter extends CustomPainter {
464465
size: _currentRect!.size,
465466
textDirection: _currentTextDirection,
466467
);
468+
if (dividerColor != null) {
469+
final Paint dividerPaint = Paint()..color = dividerColor!..strokeWidth = 1;
470+
canvas.drawLine(Offset(0, size.height), Offset(size.width, size.height), dividerPaint);
471+
}
467472
_painter!.paint(canvas, _currentRect!.topLeft, configuration);
468473
}
469474

@@ -677,7 +682,6 @@ class TabBar extends StatefulWidget implements PreferredSizeWidget {
677682
this.indicator,
678683
this.indicatorSize,
679684
this.dividerColor,
680-
this.dividerHeight,
681685
this.labelColor,
682686
this.labelStyle,
683687
this.labelPadding,
@@ -727,7 +731,6 @@ class TabBar extends StatefulWidget implements PreferredSizeWidget {
727731
this.indicator,
728732
this.indicatorSize,
729733
this.dividerColor,
730-
this.dividerHeight,
731734
this.labelColor,
732735
this.labelStyle,
733736
this.labelPadding,
@@ -846,13 +849,6 @@ class TabBar extends StatefulWidget implements PreferredSizeWidget {
846849
/// [ColorScheme.surfaceVariant] will be used, otherwise divider will not be drawn.
847850
final Color? dividerColor;
848851

849-
/// The height of the divider.
850-
///
851-
/// If null and [ThemeData.useMaterial3] is true, [TabBarTheme.dividerHeight]
852-
/// is used. If that is null and [ThemeData.useMaterial3] is true, 1.0 will be used.
853-
/// Otherwise divider will not be drawn.
854-
final double? dividerHeight;
855-
856852
/// The color of selected tab labels.
857853
///
858854
/// If null, then [TabBarTheme.labelColor] is used. If that is also null and
@@ -1100,7 +1096,7 @@ class _TabBarState extends State<TabBar> {
11001096
}
11011097
}
11021098

1103-
Decoration _getIndicator(TabBarIndicatorSize indicatorSize) {
1099+
Decoration _getIndicator() {
11041100
final ThemeData theme = Theme.of(context);
11051101
final TabBarTheme tabBarTheme = TabBarTheme.of(context);
11061102

@@ -1134,24 +1130,17 @@ class _TabBarState extends State<TabBar> {
11341130
color = Colors.white;
11351131
}
11361132

1137-
if (theme.useMaterial3 && widget._isPrimary && indicatorSize == TabBarIndicatorSize.label) {
1138-
return UnderlineTabIndicator(
1139-
borderRadius: const BorderRadius.only(
1140-
topLeft: Radius.circular(3.0),
1141-
topRight: Radius.circular(3.0),
1142-
),
1143-
borderSide: BorderSide(
1133+
return UnderlineTabIndicator(
1134+
borderRadius: theme.useMaterial3 && widget._isPrimary
11441135
// TODO(tahatesser): Make sure this value matches Material 3 Tabs spec
11451136
// when `preferredSize`and `indicatorWeight` are updated to support Material 3
11461137
// https://m3.material.io/components/tabs/specs#149a189f-9039-4195-99da-15c205d20e30,
11471138
// https://github.com/flutter/flutter/issues/116136
1148-
width: widget.indicatorWeight,
1149-
color: color,
1150-
),
1151-
);
1152-
}
1153-
1154-
return UnderlineTabIndicator(
1139+
? const BorderRadius.only(
1140+
topLeft: Radius.circular(3.0),
1141+
topRight: Radius.circular(3.0),
1142+
)
1143+
: null,
11551144
borderSide: BorderSide(
11561145
width: widget.indicatorWeight,
11571146
color: color,
@@ -1196,18 +1185,17 @@ class _TabBarState extends State<TabBar> {
11961185
}
11971186

11981187
void _initIndicatorPainter() {
1188+
final ThemeData theme = Theme.of(context);
11991189
final TabBarTheme tabBarTheme = TabBarTheme.of(context);
1200-
final TabBarIndicatorSize indicatorSize = widget.indicatorSize
1201-
?? tabBarTheme.indicatorSize
1202-
?? _defaults.indicatorSize!;
12031190

12041191
_indicatorPainter = !_controllerIsValid ? null : _IndicatorPainter(
12051192
controller: _controller!,
1206-
indicator: _getIndicator(indicatorSize),
1207-
indicatorSize: indicatorSize,
1193+
indicator: _getIndicator(),
1194+
indicatorSize: widget.indicatorSize ?? tabBarTheme.indicatorSize ?? _defaults.indicatorSize!,
12081195
indicatorPadding: widget.indicatorPadding,
12091196
tabKeys: _tabKeys,
12101197
old: _indicatorPainter,
1198+
dividerColor: theme.useMaterial3 ? widget.dividerColor ?? tabBarTheme.dividerColor ?? _defaults.dividerColor : null,
12111199
labelPaddings: _labelPaddings,
12121200
);
12131201
}
@@ -1402,7 +1390,6 @@ class _TabBarState extends State<TabBar> {
14021390
);
14031391
}
14041392

1405-
final ThemeData theme = Theme.of(context);
14061393
final TabBarTheme tabBarTheme = TabBarTheme.of(context);
14071394

14081395
final List<Widget> wrappedTabs = List<Widget>.generate(widget.tabs.length, (int index) {
@@ -1548,24 +1535,6 @@ class _TabBarState extends State<TabBar> {
15481535
);
15491536
}
15501537

1551-
if (theme.useMaterial3) {
1552-
tabBar = Stack(
1553-
alignment: Alignment.center,
1554-
children: <Widget>[
1555-
Container(
1556-
height: widget.preferredSize.height,
1557-
alignment: Alignment.bottomCenter,
1558-
child: Divider(
1559-
height: 0,
1560-
thickness: widget.dividerHeight ?? tabBarTheme.dividerHeight ?? _defaults.dividerHeight,
1561-
color: widget.dividerColor ?? tabBarTheme.dividerColor ?? _defaults.dividerColor,
1562-
),
1563-
),
1564-
tabBar,
1565-
],
1566-
);
1567-
}
1568-
15691538
return tabBar;
15701539
}
15711540
}
@@ -2099,9 +2068,6 @@ class _TabsPrimaryDefaultsM3 extends TabBarTheme {
20992068
late final ColorScheme _colors = Theme.of(context).colorScheme;
21002069
late final TextTheme _textTheme = Theme.of(context).textTheme;
21012070

2102-
@override
2103-
double? get dividerHeight => 1.0;
2104-
21052071
@override
21062072
Color? get dividerColor => _colors.surfaceVariant;
21072073

@@ -2163,9 +2129,6 @@ class _TabsSecondaryDefaultsM3 extends TabBarTheme {
21632129
@override
21642130
Color? get dividerColor => _colors.surfaceVariant;
21652131

2166-
@override
2167-
double? get dividerHeight => 1.0;
2168-
21692132
@override
21702133
Color? get indicatorColor => _colors.primary;
21712134

0 commit comments

Comments
 (0)