Revert "Fix divider width in scrollable `TabBar` for Material 3 and add `dividerHeight` parameter (#123127)" (#123616)
Revert "Fix divider width in scrollable `TabBar` for Material 3 and add `dividerHeight` parameter"
diff --git a/dev/tools/gen_defaults/lib/tabs_template.dart b/dev/tools/gen_defaults/lib/tabs_template.dart
index fb37601..22ed0e3 100644
--- a/dev/tools/gen_defaults/lib/tabs_template.dart
+++ b/dev/tools/gen_defaults/lib/tabs_template.dart
@@ -21,9 +21,6 @@
late final TextTheme _textTheme = Theme.of(context).textTheme;
@override
- double? get dividerHeight => ${tokens['md.comp.primary-navigation-tab.divider.height']};
-
- @override
Color? get dividerColor => ${componentColor("md.comp.primary-navigation-tab.divider")};
@override
@@ -85,9 +82,6 @@
Color? get dividerColor => ${componentColor("md.comp.secondary-navigation-tab.divider")};
@override
- double? get dividerHeight => ${tokens['md.comp.primary-navigation-tab.divider.height']};
-
- @override
Color? get indicatorColor => ${componentColor("md.comp.primary-navigation-tab.active-indicator")};
@override
diff --git a/packages/flutter/lib/src/material/tab_bar_theme.dart b/packages/flutter/lib/src/material/tab_bar_theme.dart
index 8a9f8e4..3c4b9e0 100644
--- a/packages/flutter/lib/src/material/tab_bar_theme.dart
+++ b/packages/flutter/lib/src/material/tab_bar_theme.dart
@@ -32,7 +32,6 @@
this.indicatorColor,
this.indicatorSize,
this.dividerColor,
- this.dividerHeight,
this.labelColor,
this.labelPadding,
this.labelStyle,
@@ -55,9 +54,6 @@
/// Overrides the default value for [TabBar.dividerColor].
final Color? dividerColor;
- /// Overrides the default value for [TabBar.dividerHeight].
- final double? dividerHeight;
-
/// Overrides the default value for [TabBar.labelColor].
///
/// If [labelColor] is a [MaterialStateColor], then the effective color will
@@ -101,7 +97,6 @@
Color? indicatorColor,
TabBarIndicatorSize? indicatorSize,
Color? dividerColor,
- double? dividerHeight,
Color? labelColor,
EdgeInsetsGeometry? labelPadding,
TextStyle? labelStyle,
@@ -116,7 +111,6 @@
indicatorColor: indicatorColor ?? this.indicatorColor,
indicatorSize: indicatorSize ?? this.indicatorSize,
dividerColor: dividerColor ?? this.dividerColor,
- dividerHeight: dividerHeight ?? this.dividerHeight,
labelColor: labelColor ?? this.labelColor,
labelPadding: labelPadding ?? this.labelPadding,
labelStyle: labelStyle ?? this.labelStyle,
@@ -147,7 +141,6 @@
indicatorColor: Color.lerp(a.indicatorColor, b.indicatorColor, t),
indicatorSize: t < 0.5 ? a.indicatorSize : b.indicatorSize,
dividerColor: Color.lerp(a.dividerColor, b.dividerColor, t),
- dividerHeight: t < 0.5 ? a.dividerHeight : b.dividerHeight,
labelColor: Color.lerp(a.labelColor, b.labelColor, t),
labelPadding: EdgeInsetsGeometry.lerp(a.labelPadding, b.labelPadding, t),
labelStyle: TextStyle.lerp(a.labelStyle, b.labelStyle, t),
@@ -165,7 +158,6 @@
indicatorColor,
indicatorSize,
dividerColor,
- dividerHeight,
labelColor,
labelPadding,
labelStyle,
@@ -189,7 +181,6 @@
&& other.indicatorColor == indicatorColor
&& other.indicatorSize == indicatorSize
&& other.dividerColor == dividerColor
- && other.dividerHeight == dividerHeight
&& other.labelColor == labelColor
&& other.labelPadding == labelPadding
&& other.labelStyle == labelStyle
diff --git a/packages/flutter/lib/src/material/tab_indicator.dart b/packages/flutter/lib/src/material/tab_indicator.dart
index 603bde9..e949956 100644
--- a/packages/flutter/lib/src/material/tab_indicator.dart
+++ b/packages/flutter/lib/src/material/tab_indicator.dart
@@ -109,8 +109,7 @@
if (borderRadius != null) {
paint = Paint()..color = decoration.borderSide.color;
final Rect indicator = decoration._indicatorRectFor(rect, textDirection)
- .inflate(decoration.borderSide.width / 4.0)
- .shift(Offset(0.0, -decoration.borderSide.width / 2.0));
+ .inflate(decoration.borderSide.width / 4.0);
final RRect rrect = RRect.fromRectAndCorners(
indicator,
topLeft: borderRadius!.topLeft,
diff --git a/packages/flutter/lib/src/material/tabs.dart b/packages/flutter/lib/src/material/tabs.dart
index e76c391..a326e2b 100644
--- a/packages/flutter/lib/src/material/tabs.dart
+++ b/packages/flutter/lib/src/material/tabs.dart
@@ -15,7 +15,6 @@
import 'colors.dart';
import 'constants.dart';
import 'debug.dart';
-import 'divider.dart';
import 'ink_well.dart';
import 'material.dart';
import 'material_localizations.dart';
@@ -361,6 +360,7 @@
required _IndicatorPainter? old,
required this.indicatorPadding,
required this.labelPaddings,
+ this.dividerColor,
}) : super(repaint: controller.animation) {
if (old != null) {
saveTabOffsets(old._currentTabOffsets, old._currentTextDirection);
@@ -372,6 +372,7 @@
final TabBarIndicatorSize? indicatorSize;
final EdgeInsetsGeometry indicatorPadding;
final List<GlobalKey> tabKeys;
+ final Color? dividerColor;
final List<EdgeInsetsGeometry> labelPaddings;
// _currentTabOffsets and _currentTextDirection are set each time TabBar
@@ -464,6 +465,10 @@
size: _currentRect!.size,
textDirection: _currentTextDirection,
);
+ if (dividerColor != null) {
+ final Paint dividerPaint = Paint()..color = dividerColor!..strokeWidth = 1;
+ canvas.drawLine(Offset(0, size.height), Offset(size.width, size.height), dividerPaint);
+ }
_painter!.paint(canvas, _currentRect!.topLeft, configuration);
}
@@ -677,7 +682,6 @@
this.indicator,
this.indicatorSize,
this.dividerColor,
- this.dividerHeight,
this.labelColor,
this.labelStyle,
this.labelPadding,
@@ -727,7 +731,6 @@
this.indicator,
this.indicatorSize,
this.dividerColor,
- this.dividerHeight,
this.labelColor,
this.labelStyle,
this.labelPadding,
@@ -846,13 +849,6 @@
/// [ColorScheme.surfaceVariant] will be used, otherwise divider will not be drawn.
final Color? dividerColor;
- /// The height of the divider.
- ///
- /// If null and [ThemeData.useMaterial3] is true, [TabBarTheme.dividerHeight]
- /// is used. If that is null and [ThemeData.useMaterial3] is true, 1.0 will be used.
- /// Otherwise divider will not be drawn.
- final double? dividerHeight;
-
/// The color of selected tab labels.
///
/// If null, then [TabBarTheme.labelColor] is used. If that is also null and
@@ -1100,7 +1096,7 @@
}
}
- Decoration _getIndicator(TabBarIndicatorSize indicatorSize) {
+ Decoration _getIndicator() {
final ThemeData theme = Theme.of(context);
final TabBarTheme tabBarTheme = TabBarTheme.of(context);
@@ -1134,24 +1130,17 @@
color = Colors.white;
}
- if (theme.useMaterial3 && widget._isPrimary && indicatorSize == TabBarIndicatorSize.label) {
- return UnderlineTabIndicator(
- borderRadius: const BorderRadius.only(
- topLeft: Radius.circular(3.0),
- topRight: Radius.circular(3.0),
- ),
- borderSide: BorderSide(
+ return UnderlineTabIndicator(
+ borderRadius: theme.useMaterial3 && widget._isPrimary
// TODO(tahatesser): Make sure this value matches Material 3 Tabs spec
// when `preferredSize`and `indicatorWeight` are updated to support Material 3
// https://m3.material.io/components/tabs/specs#149a189f-9039-4195-99da-15c205d20e30,
// https://github.com/flutter/flutter/issues/116136
- width: widget.indicatorWeight,
- color: color,
- ),
- );
- }
-
- return UnderlineTabIndicator(
+ ? const BorderRadius.only(
+ topLeft: Radius.circular(3.0),
+ topRight: Radius.circular(3.0),
+ )
+ : null,
borderSide: BorderSide(
width: widget.indicatorWeight,
color: color,
@@ -1196,18 +1185,17 @@
}
void _initIndicatorPainter() {
+ final ThemeData theme = Theme.of(context);
final TabBarTheme tabBarTheme = TabBarTheme.of(context);
- final TabBarIndicatorSize indicatorSize = widget.indicatorSize
- ?? tabBarTheme.indicatorSize
- ?? _defaults.indicatorSize!;
_indicatorPainter = !_controllerIsValid ? null : _IndicatorPainter(
controller: _controller!,
- indicator: _getIndicator(indicatorSize),
- indicatorSize: indicatorSize,
+ indicator: _getIndicator(),
+ indicatorSize: widget.indicatorSize ?? tabBarTheme.indicatorSize ?? _defaults.indicatorSize!,
indicatorPadding: widget.indicatorPadding,
tabKeys: _tabKeys,
old: _indicatorPainter,
+ dividerColor: theme.useMaterial3 ? widget.dividerColor ?? tabBarTheme.dividerColor ?? _defaults.dividerColor : null,
labelPaddings: _labelPaddings,
);
}
@@ -1402,7 +1390,6 @@
);
}
- final ThemeData theme = Theme.of(context);
final TabBarTheme tabBarTheme = TabBarTheme.of(context);
final List<Widget> wrappedTabs = List<Widget>.generate(widget.tabs.length, (int index) {
@@ -1548,24 +1535,6 @@
);
}
- if (theme.useMaterial3) {
- tabBar = Stack(
- alignment: Alignment.center,
- children: <Widget>[
- Container(
- height: widget.preferredSize.height,
- alignment: Alignment.bottomCenter,
- child: Divider(
- height: 0,
- thickness: widget.dividerHeight ?? tabBarTheme.dividerHeight ?? _defaults.dividerHeight,
- color: widget.dividerColor ?? tabBarTheme.dividerColor ?? _defaults.dividerColor,
- ),
- ),
- tabBar,
- ],
- );
- }
-
return tabBar;
}
}
@@ -2100,9 +2069,6 @@
late final TextTheme _textTheme = Theme.of(context).textTheme;
@override
- double? get dividerHeight => 1.0;
-
- @override
Color? get dividerColor => _colors.surfaceVariant;
@override
@@ -2164,9 +2130,6 @@
Color? get dividerColor => _colors.surfaceVariant;
@override
- double? get dividerHeight => 1.0;
-
- @override
Color? get indicatorColor => _colors.primary;
@override
diff --git a/packages/flutter/test/material/tab_bar_theme_test.dart b/packages/flutter/test/material/tab_bar_theme_test.dart
index 1a9db63..eb5176f 100644
--- a/packages/flutter/test/material/tab_bar_theme_test.dart
+++ b/packages/flutter/test/material/tab_bar_theme_test.dart
@@ -126,30 +126,27 @@
final Rect tabTwoRect = tester.getRect(find.byKey(_sizedTabs[1].key!));
// Verify tabOne coordinates.
- final double tabOneLeft = (tabBar.width
- - (tabOneRect.width + tabTwoRect.width) - kTabLabelPadding.horizontal) / 2;
- expect(tabOneRect.left, equals(tabOneLeft));
+ expect(tabOneRect.left, equals(kTabLabelPadding.left));
expect(tabOneRect.top, equals(kTabLabelPadding.top));
expect(tabOneRect.bottom, equals(tabBar.bottom - kTabLabelPadding.bottom - indicatorWeight));
// Verify tabTwo coordinates.
- final double tabTwoRight = tabBar.width
- - (tabBar.width - (tabOneRect.width + tabTwoRect.width) - kTabLabelPadding.horizontal) / 2;
- expect(tabTwoRect.right, equals(tabTwoRight));
+ expect(tabTwoRect.right, equals(tabBar.width - kTabLabelPadding.right));
expect(tabTwoRect.top, equals(kTabLabelPadding.top));
expect(tabTwoRect.bottom, equals(tabBar.bottom - kTabLabelPadding.bottom - indicatorWeight));
// Verify tabOne and tabTwo is separated by right padding of tabOne and left padding of tabTwo.
expect(tabOneRect.right, equals(tabTwoRect.left - kTabLabelPadding.left - kTabLabelPadding.right));
- // Test default divider color.
- final Divider divider = tester.widget<Divider>(find.byType(Divider));
- expect(divider.color, equals(theme.colorScheme.surfaceVariant));
- expect(divider.thickness, 1.0);
-
- // Test default indicator color.
+ // Verify divider color and indicator color.
final RenderBox tabBarBox = tester.firstRenderObject<RenderBox>(find.byType(TabBar));
- expect(tabBarBox, paints..rrect(color: theme.colorScheme.primary));
+ expect(
+ tabBarBox,
+ paints
+ ..line(color: theme.colorScheme.surfaceVariant)
+ // Indicator is a rrect in the primary tab bar.
+ ..rrect(color: theme.colorScheme.primary),
+ );
});
testWidgets('Tab bar defaults (secondary)', (WidgetTester tester) async {
@@ -180,30 +177,27 @@
final Rect tabTwoRect = tester.getRect(find.byKey(_sizedTabs[1].key!));
// Verify tabOne coordinates.
- final double tabOneLeft = (tabBar.width
- - (tabOneRect.width + tabTwoRect.width) - kTabLabelPadding.horizontal) / 2;
- expect(tabOneRect.left, equals(tabOneLeft));
+ expect(tabOneRect.left, equals(kTabLabelPadding.left));
expect(tabOneRect.top, equals(kTabLabelPadding.top));
expect(tabOneRect.bottom, equals(tabBar.bottom - kTabLabelPadding.bottom - indicatorWeight));
// Verify tabTwo coordinates.
- final double tabTwoRight = tabBar.width
- - (tabBar.width - (tabOneRect.width + tabTwoRect.width) - kTabLabelPadding.horizontal) / 2;
- expect(tabTwoRect.right, equals(tabTwoRight));
+ expect(tabTwoRect.right, equals(tabBar.width - kTabLabelPadding.right));
expect(tabTwoRect.top, equals(kTabLabelPadding.top));
expect(tabTwoRect.bottom, equals(tabBar.bottom - kTabLabelPadding.bottom - indicatorWeight));
// Verify tabOne and tabTwo is separated by right padding of tabOne and left padding of tabTwo.
expect(tabOneRect.right, equals(tabTwoRect.left - kTabLabelPadding.left - kTabLabelPadding.right));
- // Test default divider color.
- final Divider divider = tester.widget<Divider>(find.byType(Divider));
- expect(divider.color, equals(theme.colorScheme.surfaceVariant));
- expect(divider.thickness, 1.0);
-
- // Test default indicator color.
+ // Verify divider color and indicator color.
final RenderBox tabBarBox = tester.firstRenderObject<RenderBox>(find.byType(TabBar));
- expect(tabBarBox, paints..line(color: theme.colorScheme.primary));
+ expect(
+ tabBarBox,
+ paints
+ ..line(color: theme.colorScheme.surfaceVariant)
+ // Indicator is a line in the secondary tab bar.
+ ..line(color: theme.colorScheme.primary),
+ );
});
testWidgets('Tab bar theme overrides label color (selected)', (WidgetTester tester) async {
@@ -384,21 +378,21 @@
expect(iconRenderObject.text.style!.color, equals(unselectedLabelColor));
});
- testWidgets('Tab bar default tab indicator size (primary)', (WidgetTester tester) async {
+ testWidgets('Tab bar default tab indicator size', (WidgetTester tester) async {
await tester.pumpWidget(buildTabBar(useMaterial3: true, isScrollable: true));
await expectLater(
find.byKey(_painterKey),
- matchesGoldenFile('tab_bar_primary.default.tab_indicator_size.png'),
+ matchesGoldenFile('tab_bar.default.tab_indicator_size.png'),
);
});
- testWidgets('Tab bar default tab indicator size (secondary)', (WidgetTester tester) async {
- await tester.pumpWidget(buildTabBar(secondaryTabBar: true, useMaterial3: true, isScrollable: true));
+ testWidgets('Tab bar default tab indicator size', (WidgetTester tester) async {
+ await tester.pumpWidget(buildTabBar(useMaterial3: true, isScrollable: true));
await expectLater(
find.byKey(_painterKey),
- matchesGoldenFile('tab_bar_secondary.default.tab_indicator_size.png'),
+ matchesGoldenFile('tab_bar.default.tab_indicator_size.png'),
);
});
@@ -470,74 +464,6 @@
);
});
- testWidgets('TabBar divider can use TabBarTheme.dividerColor & TabBarTheme.dividerHeight', (WidgetTester tester) async {
- const Color dividerColor = Colors.yellow;
- const double dividerHeight = 10.0;
-
- await tester.pumpWidget(
- MaterialApp(
- theme: ThemeData(
- useMaterial3: true,
- tabBarTheme: const TabBarTheme(
- dividerColor: dividerColor,
- dividerHeight: dividerHeight,
- ),
- ),
- home: Scaffold(
- appBar: AppBar(
- bottom: TabBar(
- controller: TabController(length: 3, vsync: const TestVSync()),
- tabs: const <Widget>[
- Tab(text: 'Tab 1'),
- Tab(text: 'Tab 2'),
- Tab(text: 'Tab 3'),
- ],
- ),
- ),
- ),
- ),
- );
-
- final Divider divider = tester.widget<Divider>(find.byType(Divider));
- expect(divider.color, equals(dividerColor));
- expect(divider.thickness, dividerHeight);
- });
-
- testWidgets('dividerColor & dividerHeight overrides TabBarTheme.dividerColor', (WidgetTester tester) async {
- const Color dividerColor = Colors.amber;
- const double dividerHeight = 8.0;
-
- await tester.pumpWidget(
- MaterialApp(
- theme: ThemeData(
- useMaterial3: true,
- tabBarTheme: const TabBarTheme(
- dividerColor: Colors.pink,
- dividerHeight: 5.0,
- ),
- ),
- home: Scaffold(
- appBar: AppBar(
- bottom: TabBar(
- dividerColor: dividerColor,
- dividerHeight: dividerHeight,
- controller: TabController(length: 3, vsync: const TestVSync()),
- tabs: const <Widget>[
- Tab(text: 'Tab 1'),
- Tab(text: 'Tab 2'),
- Tab(text: 'Tab 3'),
- ],
- ),
- ),
- ),
- ),
- );
-
- final Divider divider = tester.widget<Divider>(find.byType(Divider));
- expect(divider.color, equals(dividerColor));
- expect(divider.thickness, dividerHeight);
- });
-
group('Material 2', () {
// Tests that are only relevant for Material 2. Once ThemeData.useMaterial3
// is turned on by default, these tests can be removed.
diff --git a/packages/flutter/test/material/tabs_test.dart b/packages/flutter/test/material/tabs_test.dart
index ed183cf..b1ad1b5 100644
--- a/packages/flutter/test/material/tabs_test.dart
+++ b/packages/flutter/test/material/tabs_test.dart
@@ -5778,6 +5778,36 @@
labelColor.withAlpha(0xB2) // 70% alpha,
);
});
+
+ testWidgets('Material3 - TabBar inherits the dividerColor of TabBarTheme', (WidgetTester tester) async {
+ const Color dividerColor = Colors.yellow;
+
+ await tester.pumpWidget(
+ MaterialApp(
+ theme: ThemeData(
+ useMaterial3: true,
+ tabBarTheme: const TabBarTheme(dividerColor: dividerColor),
+ ),
+ home: Scaffold(
+ appBar: AppBar(
+ bottom: TabBar(
+ controller: TabController(length: 3, vsync: const TestVSync()),
+ tabs: const <Widget>[
+ Tab(text: 'Tab 1'),
+ Tab(text: 'Tab 2'),
+ Tab(text: 'Tab 3'),
+ ],
+ ),
+ ),
+ ),
+ ),
+ );
+
+ // Test painter's divider color.
+ final CustomPaint paint = tester.widget<CustomPaint>(find.byType(CustomPaint).last);
+ // ignore: avoid_dynamic_calls
+ expect((paint.painter as dynamic).dividerColor, dividerColor);
+ });
});
}
