Fix default overlay color in `TabBar` #175270

ValentinVignal · 2025-09-12T17:09:41Z

Fix the TODO introduced in #174746 (comment)

The hidden bug was that the incorrect color was used for the overlay color of TabBar when using the default theme:

Consider the scenario for a selected tab:

The user over it
The user presses it
The user stops the press and hovers it again

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

Lines 2698 to 2723 in 2efda9c

    
           WidgetStateProperty<Color?> get overlayColor { 
        
             return WidgetStateProperty.resolveWith((Set<WidgetState> states) { 
        
               if (states.contains(WidgetState.selected)) { 
        
                 if (states.contains(WidgetState.pressed)) { 
        
                   return _colors.primary.withOpacity(0.1); 
        
                 } 
        
                 if (states.contains(WidgetState.hovered)) { 
        
                   return _colors.primary.withOpacity(0.08); 
        
                 } 
        
                 if (states.contains(WidgetState.focused)) { 
        
                   return _colors.primary.withOpacity(0.1); 
        
                 } 
        
                 return null; 
        
               } 
        
               if (states.contains(WidgetState.pressed)) { 
        
                 return _colors.primary.withOpacity(0.1); 
        
               } 
        
               if (states.contains(WidgetState.hovered)) { 
        
                 return _colors.onSurface.withOpacity(0.08); 
        
               } 
        
               if (states.contains(WidgetState.focused)) { 
        
                 return _colors.onSurface.withOpacity(0.1); 
        
               } 
        
               return null; 
        
             }); 
        
           }

Since the hovered and pressed colors are very similar, it is hard to catch. I've made a video to illustrate it when the hovered color is blue 🟦 and the pressed color is red 🟥:

	Before	After
Overlay color	1. `primary.withOpacity(0.08)` 2. `primary.withOpacity(0.1)` 3. `primary.withOpacity(0.1)` ❌ Wrong color	1. `primary.withOpacity(0.08)` 2. `primary.withOpacity(0.1)` 3. `primary.withOpacity(0.08)` ✅ Correct color
	Screen.Recording.2025-09-13.at.1.23.58.AM.mov	Screen.Recording.2025-09-13.at.1.23.09.AM.mov

	Before	After
overlay color	1. `primary.withOpacity(0.08)`

`` | 1. primary.withOpacity(0.08) |

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
I followed the breaking change policy and added Data Driven Fixes where supported.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

Note: The Flutter team is currently trialing the use of Gemini Code Assist for GitHub. Comments from the gemini-code-assist bot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed.

gemini-code-assist

Code Review

This pull request correctly addresses a bug in the TabBar widget where mutating a Set within the build method led to incorrect overlay colors. The change to create a new set using .toSet() before modification is the proper way to handle state immutability within build methods, preventing side effects on subsequent rebuilds. The accompanying test case is well-crafted, specifically targeting the scenario that would have previously failed, thereby ensuring the fix is effective and guarding against regressions. The changes are clean, correct, and improve the overall robustness of the widget.

chunhtai

Do you think it is possible to repro a bug based on the code?

chunhtai · 2025-09-12T17:58:42Z

packages/flutter/test/material/tabs_test.dart

    await tester.pumpAndSettle();
    expect(overlayColor(), paints..rect(color: theme.colorScheme.onSurface.withOpacity(0.08)));

+    await gesture.moveTo(tester.getCenter(find.text(selectedValue)));


What is this for this additional operation test for?

This is to make the test failing without the code change.

Before the code change, expect(overlayColor(), paints..rect(color: theme.colorScheme.primary.withOpacity(0.08))); would fail (the color of the overlay was theme.colorScheme.primary.withOpacity(0.1)

Would you prefer me to write a new test, or add a comment or something?

oh it is fine then, LGTM

ValentinVignal · 2025-09-13T05:47:49Z

Do you think it is possible to repro a bug based on the code?

Yes, I could reproduce a bug, I described it in the description. Or are there some unclear details you need to me explain?

chunhtai

LGTM

chunhtai · 2025-09-15T21:42:29Z

packages/flutter/test/material/tabs_test.dart

    await tester.pumpAndSettle();
    expect(overlayColor(), paints..rect(color: theme.colorScheme.onSurface.withOpacity(0.08)));

+    await gesture.moveTo(tester.getCenter(find.text(selectedValue)));


oh it is fine then, LGTM

flutter/flutter@29a238d...8d0b31d 2025-09-16 engine-flutter-autoroll@skia.org Roll Packages from fcd5f68 to 0255ac9 (2 revisions) (flutter/flutter#175427) 2025-09-16 47866232+chunhtai@users.noreply.github.com Adds a11y section locale support for iOS (flutter/flutter#175005) 2025-09-16 engine-flutter-autoroll@skia.org Roll Skia from 4e9c86d4a6d9 to 7d160bbf9403 (3 revisions) (flutter/flutter#175404) 2025-09-16 gregorysconrad@gmail.com [native_assets] Find more `CCompilerConfig` on Linux (flutter/flutter#175323) 2025-09-16 engine-flutter-autoroll@skia.org Roll Dart SDK from 50e61e5bff51 to 700de52f29a9 (3 revisions) (flutter/flutter#175395) 2025-09-16 32538273+ValentinVignal@users.noreply.github.com Fix default overlay color in `TabBar` (flutter/flutter#175270) 2025-09-16 32538273+ValentinVignal@users.noreply.github.com Migrate to widget state (flutter/flutter#175242) 2025-09-16 engine-flutter-autoroll@skia.org Roll Skia from 01b0ede33ae9 to 4e9c86d4a6d9 (1 revision) (flutter/flutter#175387) 2025-09-15 chinmaygarde@google.com Merge the engine README into the README of the old buildroot. (flutter/flutter#175384) 2025-09-15 fluttergithubbot@gmail.com Marks Mac_ios microbenchmarks_ios to be unflaky (flutter/flutter#171146) 2025-09-15 okorohelijah@google.com Deprecate Objective-C plugin template (flutter/flutter#174003) 2025-09-15 robert.ancell@canonical.com Add a gn --ccache argument (flutter/flutter#174621) 2025-09-15 mohellebiabdessalem@gmail.com Update `build.gradle` to remove deprecation warning in `flutter\engine\src\flutter\shell\platform\android` (flutter/flutter#175305) 2025-09-15 54338732+Memet18@users.noreply.github.com Show cursor after swipe only if TextField has focus (flutter/flutter#175044) 2025-09-15 engine-flutter-autoroll@skia.org Roll Skia from f950263bb3d4 to 01b0ede33ae9 (7 revisions) (flutter/flutter#175373) 2025-09-15 rmacnak@google.com Update Chromium sysroot to pick up RISC-V support. (flutter/flutter#173671) 2025-09-15 magder@google.com Set Gemini Code Assist `include_drafts` to false (flutter/flutter#175098) 2025-09-15 engine-flutter-autoroll@skia.org Roll Packages from 15e7e89 to fcd5f68 (3 revisions) (flutter/flutter#175366) 2025-09-15 115182119+danwirele@users.noreply.github.com Remove 'v' Open DevTools from help on web in profile/release mode (flutter/flutter#172829) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC louisehsu@google.com,stuartmorgan@google.com on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

Fix the TODO introduced in flutter#174746 (comment) The hidden bug was that the incorrect color was used for the overlay color of `TabBar` when using the default theme: Consider the scenario for a selected tab: 1. The user over it 2. The user presses it 3. The user stops the press and hovers it again https://github.com/flutter/flutter/blob/2efda9cc146fa6eef5f758511cf04a55635366cb/packages/flutter/lib/src/material/tabs.dart#L2698-L2723 Since the hovered and pressed colors are very similar, it is hard to catch. I've made a video to illustrate it when the hovered color is blue 🟦 and the pressed color is red 🟥: <table> <tr> <th></th> <th>Before</th> <th>After</th> </tr> <tr> <td>Overlay color</td> <td> 1. <code>primary.withOpacity(0.08)</code><br/> 2. <code>primary.withOpacity(0.1)</code><br/> 3. <code>primary.withOpacity(0.1)</code> ❌ Wrong color </td> <td> 1. <code>primary.withOpacity(0.08)</code><br/> 2. <code>primary.withOpacity(0.1)</code><br/> 3. <code>primary.withOpacity(0.08)</code> ✅ Correct color </td> </tr> <tr> <td></td> <td> https://github.com/user-attachments/assets/667ea9b9-dce1-446b-93ae-68114464d518 </td> <td> https://github.com/user-attachments/assets/e0910b73-11cc-4fc2-982a-e32a7f47dd1b </td> </tr> </table> | | Before | After | | :---: | :---: | :---: | | overlay color| 1. `primary.withOpacity(0.08)` 5. `` | 1. `primary.withOpacity(0.08)` | ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [ ] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord]. **Note**: The Flutter team is currently trialing the use of [Gemini Code Assist for GitHub](https://developers.google.com/gemini-code-assist/docs/review-github-code). Comments from the `gemini-code-assist` bot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed.  [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

ValentinVignal added 2 commits September 13, 2025 01:07

Do not mutate set

02b1af0

Update the tests

ae5fa60

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Sep 12, 2025

ValentinVignal requested a review from chunhtai September 12, 2025 17:10

gemini-code-assist bot reviewed Sep 12, 2025

View reviewed changes

ValentinVignal changed the title ~~Flutter/do not mutate set in build method~~ Fix default overlay color in TabBar Sep 12, 2025

chunhtai reviewed Sep 12, 2025

View reviewed changes

ValentinVignal requested a review from chunhtai September 13, 2025 05:48

chunhtai approved these changes Sep 15, 2025

View reviewed changes

ValentinVignal added the autosubmit Merge PR when tree becomes green via auto submit App label Sep 16, 2025

auto-submit bot added this pull request to the merge queue Sep 16, 2025

Merged via the queue into flutter:master with commit be522c6 Sep 16, 2025
79 checks passed

flutter-dashboard bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Sep 16, 2025

engine-flutter-autoroll mentioned this pull request Sep 16, 2025

Roll Flutter from 29a238d0d506 to 2cda3fb6cdd7 (17 revisions) flutter/packages#10017

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 16, 2025

be522c6 Fix default overlay color in TabBar (flutter/flutter#175270)

6290108

engine-flutter-autoroll mentioned this pull request Sep 16, 2025

Roll Flutter from 29a238d0d506 to e8bef9805194 (18 revisions) flutter/packages#10018

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 16, 2025

be522c6 Fix default overlay color in TabBar (flutter/flutter#175270)

72c7d81

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 16, 2025

be522c6 Fix default overlay color in TabBar (flutter/flutter#175270)

ad5a709

engine-flutter-autoroll mentioned this pull request Sep 16, 2025

Roll Flutter from 29a238d0d506 to 8d0b31d81a02 (19 revisions) flutter/packages#10019

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 12, 2025

be522c6 Fix default overlay color in TabBar (flutter/flutter#175270)

f80b055

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix default overlay color in `TabBar` #175270

Fix default overlay color in `TabBar` #175270

Uh oh!

ValentinVignal commented Sep 12, 2025 •

edited

Loading

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

chunhtai left a comment

Uh oh!

chunhtai Sep 12, 2025

Uh oh!

ValentinVignal Sep 13, 2025

Uh oh!

ValentinVignal Sep 13, 2025

Uh oh!

chunhtai Sep 15, 2025

Uh oh!

ValentinVignal commented Sep 13, 2025 •

edited

Loading

Uh oh!

chunhtai left a comment

Uh oh!

chunhtai Sep 15, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	WidgetStateProperty<Color?> get overlayColor {
	return WidgetStateProperty.resolveWith((Set<WidgetState> states) {
	if (states.contains(WidgetState.selected)) {
	if (states.contains(WidgetState.pressed)) {
	return _colors.primary.withOpacity(0.1);
	}
	if (states.contains(WidgetState.hovered)) {
	return _colors.primary.withOpacity(0.08);
	}
	if (states.contains(WidgetState.focused)) {
	return _colors.primary.withOpacity(0.1);
	}
	return null;
	}
	if (states.contains(WidgetState.pressed)) {
	return _colors.primary.withOpacity(0.1);
	}
	if (states.contains(WidgetState.hovered)) {
	return _colors.onSurface.withOpacity(0.08);
	}
	if (states.contains(WidgetState.focused)) {
	return _colors.onSurface.withOpacity(0.1);
	}
	return null;
	});
	}

Fix default overlay color in TabBar #175270

Fix default overlay color in TabBar #175270

Uh oh!

Conversation

ValentinVignal commented Sep 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-launch Checklist

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

chunhtai left a comment

Choose a reason for hiding this comment

Uh oh!

chunhtai Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

ValentinVignal Sep 13, 2025

Choose a reason for hiding this comment

Uh oh!

ValentinVignal Sep 13, 2025

Choose a reason for hiding this comment

Uh oh!

chunhtai Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

ValentinVignal commented Sep 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chunhtai left a comment

Choose a reason for hiding this comment

Uh oh!

chunhtai Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Fix default overlay color in `TabBar` #175270

Fix default overlay color in `TabBar` #175270

ValentinVignal commented Sep 12, 2025 •

edited

Loading

ValentinVignal commented Sep 13, 2025 •

edited

Loading