Add Material 3 support for `TabBar` (#116110)

dev/tools/gen_defaults/bin/gen_defaults.dart

@@ -46,6 +46,7 @@ import 'package:gen_defaults/segmented_button_template.dart';
 import 'package:gen_defaults/slider_template.dart';
 import 'package:gen_defaults/surface_tint.dart';
 import 'package:gen_defaults/switch_template.dart';
+import 'package:gen_defaults/tabs_template.dart';
 import 'package:gen_defaults/text_field_template.dart';
 import 'package:gen_defaults/typography_template.dart';
 
@@ -165,5 +166,6 @@ Future<void> main(List<String> args) async {
   SurfaceTintTemplate('SurfaceTint', '$materialLib/elevation_overlay.dart', tokens).updateFile();
   SwitchTemplate('Switch', '$materialLib/switch.dart', tokens).updateFile();
   TextFieldTemplate('TextField', '$materialLib/text_field.dart', tokens).updateFile();
+  TabsTemplate('Tabs', '$materialLib/tabs.dart', tokens).updateFile();
   TypographyTemplate('Typography', '$materialLib/typography.dart', tokens).updateFile();
 }

dev/tools/gen_defaults/lib/tabs_template.dart

+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'template.dart';
+
+class TabsTemplate extends TokenTemplate {
+  const TabsTemplate(super.blockName, super.fileName, super.tokens, {
+    super.colorSchemePrefix = '_colors.',
+    super.textThemePrefix = '_textTheme.',
+  });
+
+  @override
+  String generate() => '''
+class _${blockName}DefaultsM3 extends TabBarTheme {
+  _${blockName}DefaultsM3(this.context)
+    : super(indicatorSize: TabBarIndicatorSize.label);
+
+  final BuildContext context;
+  late final ColorScheme _colors = Theme.of(context).colorScheme;
+  late final TextTheme _textTheme = Theme.of(context).textTheme;
+
+  @override
+  Color? get dividerColor => ${componentColor("md.comp.primary-navigation-tab.divider")};
+
+  @override
+  Color? get indicatorColor => ${componentColor("md.comp.primary-navigation-tab.active-indicator")};
+
+  @override
+  Color? get labelColor => ${componentColor("md.comp.primary-navigation-tab.with-label-text.active.label-text")};
+
+  @override
+  TextStyle? get labelStyle => ${textStyle("md.comp.primary-navigation-tab.with-label-text.label-text")};
+
+  @override
+  Color? get unselectedLabelColor => ${componentColor("md.comp.primary-navigation-tab.with-label-text.inactive.label-text")};
+
+  @override
+  TextStyle? get unselectedLabelStyle => ${textStyle("md.comp.primary-navigation-tab.with-label-text.label-text")};
+
+  @override
+  MaterialStateProperty<Color?> get overlayColor {
+    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+      if (states.contains(MaterialState.selected)) {
+        if (states.contains(MaterialState.hovered)) {
+          return ${componentColor('md.comp.primary-navigation-tab.active.hover.state-layer')};
+        }
+        if (states.contains(MaterialState.focused)) {
+          return ${componentColor('md.comp.primary-navigation-tab.active.focus.state-layer')};
+        }
+        if (states.contains(MaterialState.pressed)) {
+          return ${componentColor('md.comp.primary-navigation-tab.active.pressed.state-layer')};
+        }
+        return null;
+      }
+      if (states.contains(MaterialState.hovered)) {
+        return ${componentColor('md.comp.primary-navigation-tab.inactive.hover.state-layer')};
+      }
+      if (states.contains(MaterialState.focused)) {
+        return ${componentColor('md.comp.primary-navigation-tab.inactive.focus.state-layer')};
+      }
+      if (states.contains(MaterialState.pressed)) {
+        return ${componentColor('md.comp.primary-navigation-tab.inactive.pressed.state-layer')};
+      }
+      return null;
+    });
+  }
+
+  @override
+  InteractiveInkFeatureFactory? get splashFactory => Theme.of(context).splashFactory;
+}
+''';
+}

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

@@ -29,7 +29,9 @@ class TabBarTheme with Diagnosticable {
   /// Creates a tab bar theme that can be used with [ThemeData.tabBarTheme].
   const TabBarTheme({
     this.indicator,
+    this.indicatorColor,
     this.indicatorSize,
+    this.dividerColor,
     this.labelColor,
     this.labelPadding,
     this.labelStyle,
@@ -43,9 +45,15 @@ class TabBarTheme with Diagnosticable {
   /// Overrides the default value for [TabBar.indicator].
   final Decoration? indicator;
 
+  /// Overrides the default value for [TabBar.indicatorColor].
+  final Color? indicatorColor;
+
   /// Overrides the default value for [TabBar.indicatorSize].
   final TabBarIndicatorSize? indicatorSize;
 
+  /// Overrides the default value for [TabBar.dividerColor].
+  final Color? dividerColor;
+
   /// Overrides the default value for [TabBar.labelColor].
   final Color? labelColor;
 
@@ -80,7 +88,9 @@ class TabBarTheme with Diagnosticable {
   /// new values.
   TabBarTheme copyWith({
     Decoration? indicator,
+    Color? indicatorColor,
     TabBarIndicatorSize? indicatorSize,
+    Color? dividerColor,
     Color? labelColor,
     EdgeInsetsGeometry? labelPadding,
     TextStyle? labelStyle,
@@ -92,7 +102,9 @@ class TabBarTheme with Diagnosticable {
   }) {
     return TabBarTheme(
       indicator: indicator ?? this.indicator,
+      indicatorColor: indicatorColor ?? this.indicatorColor,
       indicatorSize: indicatorSize ?? this.indicatorSize,
+      dividerColor: dividerColor ?? this.dividerColor,
       labelColor: labelColor ?? this.labelColor,
       labelPadding: labelPadding ?? this.labelPadding,
       labelStyle: labelStyle ?? this.labelStyle,
@@ -120,13 +132,15 @@ class TabBarTheme with Diagnosticable {
     assert(t != null);
     return TabBarTheme(
       indicator: Decoration.lerp(a.indicator, b.indicator, t),
+      indicatorColor: Color.lerp(a.indicatorColor, b.indicatorColor, t),
       indicatorSize: t < 0.5 ? a.indicatorSize : b.indicatorSize,
+      dividerColor: Color.lerp(a.dividerColor, b.dividerColor, t),
       labelColor: Color.lerp(a.labelColor, b.labelColor, t),
       labelPadding: EdgeInsetsGeometry.lerp(a.labelPadding, b.labelPadding, t),
       labelStyle: TextStyle.lerp(a.labelStyle, b.labelStyle, t),
       unselectedLabelColor: Color.lerp(a.unselectedLabelColor, b.unselectedLabelColor, t),
       unselectedLabelStyle: TextStyle.lerp(a.unselectedLabelStyle, b.unselectedLabelStyle, t),
-      overlayColor: _LerpColors(a.overlayColor, b.overlayColor, t),
+      overlayColor: MaterialStateProperty.lerp<Color?>(a.overlayColor, b.overlayColor, t, Color.lerp),
       splashFactory: t < 0.5 ? a.splashFactory : b.splashFactory,
       mouseCursor: t < 0.5 ? a.mouseCursor : b.mouseCursor,
     );
@@ -135,7 +149,9 @@ class TabBarTheme with Diagnosticable {
   @override
   int get hashCode => Object.hash(
     indicator,
+    indicatorColor,
     indicatorSize,
+    dividerColor,
     labelColor,
     labelPadding,
     labelStyle,
@@ -156,7 +172,9 @@ class TabBarTheme with Diagnosticable {
     }
     return other is TabBarTheme
         && other.indicator == indicator
+        && other.indicatorColor == indicatorColor
         && other.indicatorSize == indicatorSize
+        && other.dividerColor == dividerColor
         && other.labelColor == labelColor
         && other.labelPadding == labelPadding
         && other.labelStyle == labelStyle
@@ -167,39 +185,3 @@ class TabBarTheme with Diagnosticable {
         && other.mouseCursor == mouseCursor;
   }
 }
-
-
-@immutable
-class _LerpColors implements MaterialStateProperty<Color?> {
-  const _LerpColors(this.a, this.b, this.t);
-
-  final MaterialStateProperty<Color?>? a;
-  final MaterialStateProperty<Color?>? b;
-  final double t;
-
-  @override
-  Color? resolve(Set<MaterialState> states) {
-    final Color? resolvedA = a?.resolve(states);
-    final Color? resolvedB = b?.resolve(states);
-    return Color.lerp(resolvedA, resolvedB, t);
-  }
-
-  @override
-  int get hashCode {
-    return Object.hash(a, b, t);
-  }
-
-  @override
-  bool operator ==(Object other) {
-    if (identical(this, other)) {
-      return true;
-    }
-    if (other.runtimeType != runtimeType) {
-      return false;
-    }
-    return other is _LerpColors
-      && other.a == a
-      && other.b == b
-      && other.t == t;
-  }
-}

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

@@ -20,11 +20,18 @@ class UnderlineTabIndicator extends Decoration {
   ///
   /// The [borderSide] and [insets] arguments must not be null.
   const UnderlineTabIndicator({
+    this.borderRadius,
     this.borderSide = const BorderSide(width: 2.0, color: Colors.white),
     this.insets = EdgeInsets.zero,
   }) : assert(borderSide != null),
        assert(insets != null);
 
+  /// The radius of the indicator's corners.
+  ///
+  /// If this value is non-null, rounded rectangular tab indicator is
+  /// drawn, otherwise rectangular tab indictor is drawn.
+  final BorderRadius? borderRadius;
+
   /// The color and weight of the horizontal line drawn below the selected tab.
   final BorderSide borderSide;
 
@@ -60,7 +67,7 @@ class UnderlineTabIndicator extends Decoration {
 
   @override
   BoxPainter createBoxPainter([ VoidCallback? onChanged ]) {
-    return _UnderlinePainter(this, onChanged);
+    return _UnderlinePainter(this, borderRadius, onChanged);
   }
 
   Rect _indicatorRectFor(Rect rect, TextDirection textDirection) {
@@ -77,15 +84,25 @@ class UnderlineTabIndicator extends Decoration {
 
   @override
   Path getClipPath(Rect rect, TextDirection textDirection) {
+    if (borderRadius != null) {
+      return Path()..addRRect(
+        borderRadius!.toRRect(_indicatorRectFor(rect, textDirection))
+      );
+    }
     return Path()..addRect(_indicatorRectFor(rect, textDirection));
   }
 }
 
 class _UnderlinePainter extends BoxPainter {
-  _UnderlinePainter(this.decoration, super.onChanged)
+  _UnderlinePainter(
+    this.decoration,
+    this.borderRadius,
+    super.onChanged,
+  )
     : assert(decoration != null);
 
   final UnderlineTabIndicator decoration;
+  final BorderRadius? borderRadius;
 
   @override
   void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
@@ -93,8 +110,24 @@ class _UnderlinePainter extends BoxPainter {
     assert(configuration.size != null);
     final Rect rect = offset & configuration.size!;
     final TextDirection textDirection = configuration.textDirection!;
-    final Rect indicator = decoration._indicatorRectFor(rect, textDirection).deflate(decoration.borderSide.width / 2.0);
-    final Paint paint = decoration.borderSide.toPaint()..strokeCap = StrokeCap.square;
-    canvas.drawLine(indicator.bottomLeft, indicator.bottomRight, paint);
+    final Paint paint;
+    if (borderRadius != null) {
+      paint = Paint()..color = decoration.borderSide.color;
+      final Rect indicator = decoration._indicatorRectFor(rect, textDirection)
+        .inflate(decoration.borderSide.width / 4.0);
+      final RRect rrect = RRect.fromRectAndCorners(
+        indicator,
+        topLeft: borderRadius!.topLeft,
+        topRight: borderRadius!.topRight,
+        bottomRight: borderRadius!.bottomRight,
+        bottomLeft: borderRadius!.bottomLeft,
+      );
+      canvas.drawRRect(rrect, paint);
+    } else {
+      paint = decoration.borderSide.toPaint()..strokeCap = StrokeCap.square;
+      final Rect indicator = decoration._indicatorRectFor(rect, textDirection)
+        .deflate(decoration.borderSide.width / 2.0);
+      canvas.drawLine(indicator.bottomLeft, indicator.bottomRight, paint);
+    }
   }
 }

packages/flutter/test/material/tab_bar_theme_test.dart

@@ -11,6 +11,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter_test/flutter_test.dart';
 
+import '../rendering/mock_canvas.dart';
+
 const String _tab1Text = 'tab 1';
 const String _tab2Text = 'tab 2';
 const String _tab3Text = 'tab 3';
@@ -32,9 +34,10 @@ Widget _withTheme(
   TabBarTheme? theme, {
   List<Widget> tabs = _tabs,
   bool isScrollable = false,
+  bool useMaterial3 = false,
 }) {
   return MaterialApp(
-    theme: ThemeData(tabBarTheme: theme),
+    theme: ThemeData(tabBarTheme: theme, useMaterial3: useMaterial3),
     home: Scaffold(
       body: RepaintBoundary(
         key: _painterKey,
@@ -60,7 +63,9 @@ void main() {
     expect(const TabBarTheme().hashCode, const TabBarTheme().copyWith().hashCode);
 
     expect(const TabBarTheme().indicator, null);
+    expect(const TabBarTheme().indicatorColor, null);
     expect(const TabBarTheme().indicatorSize, null);
+    expect(const TabBarTheme().dividerColor, null);
     expect(const TabBarTheme().labelColor, null);
     expect(const TabBarTheme().labelPadding, null);
     expect(const TabBarTheme().labelStyle, null);
@@ -71,18 +76,19 @@ void main() {
     expect(const TabBarTheme().mouseCursor, null);
   });
 
-  testWidgets('Tab bar defaults - label style and selected/unselected label colors', (WidgetTester tester) async {
+  testWidgets('Tab bar defaults', (WidgetTester tester) async {
     // tests for the default label color and label styles when tabBarTheme and tabBar do not provide any
-    await tester.pumpWidget(_withTheme(null));
+    await tester.pumpWidget(_withTheme(null, useMaterial3: true));
 
+    final ThemeData theme = ThemeData(useMaterial3: true);
     final RenderParagraph selectedRenderObject = tester.renderObject<RenderParagraph>(find.text(_tab1Text));
-    expect(selectedRenderObject.text.style!.fontFamily, equals('Roboto'));
+    expect(selectedRenderObject.text.style!.fontFamily, equals(theme.textTheme.titleSmall!.fontFamily));
     expect(selectedRenderObject.text.style!.fontSize, equals(14.0));
-    expect(selectedRenderObject.text.style!.color, equals(Colors.white));
+    expect(selectedRenderObject.text.style!.color, equals(theme.colorScheme.primary));
     final RenderParagraph unselectedRenderObject = tester.renderObject<RenderParagraph>(find.text(_tab2Text));
-    expect(unselectedRenderObject.text.style!.fontFamily, equals('Roboto'));
+    expect(unselectedRenderObject.text.style!.fontFamily, equals(theme.textTheme.titleSmall!.fontFamily));
     expect(unselectedRenderObject.text.style!.fontSize, equals(14.0));
-    expect(unselectedRenderObject.text.style!.color, equals(Colors.white.withAlpha(0xB2)));
+    expect(unselectedRenderObject.text.style!.color, equals(theme.colorScheme.onSurfaceVariant));
 
     // tests for the default value of labelPadding when tabBarTheme and tabBar do not provide one
     await tester.pumpWidget(_withTheme(null, tabs: _sizedTabs, isScrollable: true));
@@ -104,7 +110,16 @@ void main() {
 
     // 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));
+
+    final RenderBox tabBarBox = tester.firstRenderObject<RenderBox>(find.byType(TabBar));
+    expect(
+      tabBarBox,
+      paints
+        ..line(color: theme.colorScheme.surfaceVariant)
+        ..rrect(color: theme.colorScheme.primary),
+    );
   });
+
   testWidgets('Tab bar theme overrides label color (selected)', (WidgetTester tester) async {
     const Color labelColor = Colors.black;
     const TabBarTheme tabBarTheme = TabBarTheme(labelColor: labelColor);
@@ -282,6 +297,15 @@ void main() {
     expect(iconRenderObject.text.style!.color, equals(unselectedLabelColor));
   });
 
+  testWidgets('Tab bar default tab indicator size', (WidgetTester tester) async {
+    await tester.pumpWidget(_withTheme(null, useMaterial3: true, isScrollable: true));
+
+    await expectLater(
+      find.byKey(_painterKey),
+      matchesGoldenFile('tab_bar.default.tab_indicator_size.png'),
+    );
+  });
+
   testWidgets('Tab bar theme overrides tab indicator size (tab)', (WidgetTester tester) async {
     const TabBarTheme tabBarTheme = TabBarTheme(indicatorSize: TabBarIndicatorSize.tab);
 
@@ -349,4 +373,56 @@ void main() {
       matchesGoldenFile('tab_bar_theme.beveled_rect_indicator.png'),
     );
   });
+
+  group('Material 2', () {
+    // Tests that are only relevant for Material 2. Once ThemeData.useMaterial3
+    // is turned on by default, these tests can be removed.
+
+    testWidgets('Tab bar defaults', (WidgetTester tester) async {
+      // tests for the default label color and label styles when tabBarTheme and tabBar do not provide any
+      await tester.pumpWidget(_withTheme(null));
+
+      final RenderParagraph selectedRenderObject = tester.renderObject<RenderParagraph>(find.text(_tab1Text));
+      expect(selectedRenderObject.text.style!.fontFamily, equals('Roboto'));
+      expect(selectedRenderObject.text.style!.fontSize, equals(14.0));
+      expect(selectedRenderObject.text.style!.color, equals(Colors.white));
+      final RenderParagraph unselectedRenderObject = tester.renderObject<RenderParagraph>(find.text(_tab2Text));
+      expect(unselectedRenderObject.text.style!.fontFamily, equals('Roboto'));
+      expect(unselectedRenderObject.text.style!.fontSize, equals(14.0));
+      expect(unselectedRenderObject.text.style!.color, equals(Colors.white.withAlpha(0xB2)));
+
+      // tests for the default value of labelPadding when tabBarTheme and tabBar do not provide one
+      await tester.pumpWidget(_withTheme(null, tabs: _sizedTabs, isScrollable: true));
+
+      const double indicatorWeight = 2.0;
+      final Rect tabBar = tester.getRect(find.byType(TabBar));
+      final Rect tabOneRect = tester.getRect(find.byKey(_sizedTabs[0].key!));
+      final Rect tabTwoRect = tester.getRect(find.byKey(_sizedTabs[1].key!));
+
+      // verify coordinates of tabOne
+      expect(tabOneRect.left, equals(kTabLabelPadding.left));
+      expect(tabOneRect.top, equals(kTabLabelPadding.top));
+      expect(tabOneRect.bottom, equals(tabBar.bottom - kTabLabelPadding.bottom - indicatorWeight));
+
+      // verify coordinates of tabTwo
+      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));
+
+      final RenderBox tabBarBox = tester.firstRenderObject<RenderBox>(find.byType(TabBar));
+      expect(tabBarBox, paints..line(color: const Color(0xff2196f3)));
+    });
+
+    testWidgets('Tab bar default tab indicator size', (WidgetTester tester) async {
+      await tester.pumpWidget(_withTheme(null));
+
+      await expectLater(
+        find.byKey(_painterKey),
+        matchesGoldenFile('tab_bar.m2.default.tab_indicator_size.png'),
+      );
+    });
+  });
 }

packages/flutter/test/material/tabs_test.dart

@@ -5,6 +5,7 @@
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 
 import '../rendering/mock_canvas.dart';
@@ -5088,6 +5089,156 @@ void main() {
 
     expect(tester.takeException(), isAssertionError);
   });
+
+  testWidgets('Tab has correct selected/unselected hover color', (WidgetTester tester) async {
+    tester.binding.focusManager.highlightStrategy = FocusHighlightStrategy.alwaysTraditional;
+    final ThemeData theme = ThemeData(useMaterial3: true);
+    final List<String> tabs = <String>['A', 'B', 'C'];
+
+    await tester.pumpWidget(Theme(
+      data: theme,
+      child: buildFrame(tabs: tabs, value: 'C')),
+    );
+
+    await tester.pumpAndSettle();
+    final RenderObject inkFeatures = tester.allRenderObjects.firstWhere((RenderObject object) => object.runtimeType.toString() == '_RenderInkFeatures');
+    expect(
+      inkFeatures,
+      isNot(paints
+        ..rect(
+          color: theme.colorScheme.onSurface.withOpacity(0.08),
+        ))
+    );
+    expect(
+      inkFeatures,
+      isNot(paints
+        ..rect(
+          color: theme.colorScheme.primary.withOpacity(0.08),
+        ))
+    );
+
+    // Start hovering unselected tab.
+    final TestGesture gesture = await tester.createGesture(kind: PointerDeviceKind.mouse);
+    await gesture.addPointer();
+    await gesture.moveTo(tester.getCenter(find.byType(Tab).first));
+    await tester.pumpAndSettle();
+    expect(
+      inkFeatures,
+      paints
+        ..rect(
+          color: theme.colorScheme.onSurface.withOpacity(0.08),
+        )
+    );
+
+    // Start hovering selected tab.
+    await gesture.moveTo(tester.getCenter(find.byType(Tab).last));
+    await tester.pumpAndSettle();
+    expect(
+      inkFeatures,
+      paints
+        ..rect(
+          color: theme.colorScheme.primary.withOpacity(0.08),
+        ),
+    );
+  });
+
+  testWidgets('Tab has correct selected/unselected focus color', (WidgetTester tester) async {
+    tester.binding.focusManager.highlightStrategy = FocusHighlightStrategy.alwaysTraditional;
+    final ThemeData theme = ThemeData(useMaterial3: true);
+    final List<String> tabs = <String>['A', 'B', 'C'];
+
+    await tester.pumpWidget(MaterialApp(
+        theme: theme,
+        home: buildFrame(tabs: tabs, value: 'B'),
+      ),
+    );
+
+    await tester.pumpAndSettle();
+    final RenderObject inkFeatures = tester.allRenderObjects.firstWhere((RenderObject object) => object.runtimeType.toString() == '_RenderInkFeatures');
+    expect(
+      inkFeatures,
+      isNot(paints
+        ..rect(
+          color: theme.colorScheme.onSurface.withOpacity(0.12),
+        ))
+    );
+    expect(
+      inkFeatures,
+      isNot(paints
+        ..rect(
+          color: theme.colorScheme.primary.withOpacity(0.12),
+        ))
+    );
+
+    await tester.sendKeyEvent(LogicalKeyboardKey.tab);
+    await tester.pumpAndSettle();
+    expect(tester.binding.focusManager.primaryFocus?.hasPrimaryFocus, isTrue);
+    expect(
+      inkFeatures,
+      paints
+        ..rect(
+          color: theme.colorScheme.onSurface.withOpacity(0.12),
+        ),
+    );
+
+    await tester.sendKeyEvent(LogicalKeyboardKey.tab);
+    await tester.pumpAndSettle();
+    expect(tester.binding.focusManager.primaryFocus?.hasPrimaryFocus, isTrue);
+    expect(
+      inkFeatures,
+      paints
+        ..rect(
+          color: theme.colorScheme.primary.withOpacity(0.12),
+        ),
+    );
+  });
+
+  testWidgets('Tab has correct selected/unselected pressed color', (WidgetTester tester) async {
+    final ThemeData theme = ThemeData(useMaterial3: true);
+    final List<String> tabs = <String>['A', 'B', 'C'];
+
+    await tester.pumpWidget(MaterialApp(
+        theme: theme,
+        home: buildFrame(tabs: tabs, value: 'B'),
+      ),
+    );
+
+    await tester.pumpAndSettle();
+    final RenderObject inkFeatures = tester.allRenderObjects.firstWhere((RenderObject object) => object.runtimeType.toString() == '_RenderInkFeatures');
+    expect(
+      inkFeatures,
+      isNot(paints
+        ..rect(
+          color: theme.colorScheme.primary.withOpacity(0.12),
+        ))
+    );
+
+    // Press unselected tab.
+    TestGesture gesture = await tester.startGesture(tester.getCenter(find.text('A')));
+    await tester.pumpAndSettle(); // Let the press highlight animation finish.
+    expect(
+      inkFeatures,
+      paints
+        ..rect(
+          color: theme.colorScheme.primary.withOpacity(0.12),
+        ),
+    );
+
+    // Release pressed gesture.
+    await gesture.up();
+    await tester.pumpAndSettle();
+
+    // Press selected tab.
+    gesture = await tester.startGesture(tester.getCenter(find.text('B')));
+    await tester.pumpAndSettle(); // Let the press highlight animation finish.
+    expect(
+      inkFeatures,
+      paints
+        ..rect(
+          color: theme.colorScheme.primary.withOpacity(0.12),
+        ),
+    );
+  });
 }
 
 class KeepAliveInk extends StatefulWidget {