[CP-stable][Reland] Fix Tab linear and elastic animation blink (#162315)#163830
Merged
auto-submit[bot] merged 2 commits intoflutter:flutter-3.29-candidate.0from Feb 26, 2025
Conversation
flutter#162450) Relands flutter#162315 Removed animated sheet golden tests as they're not consistent for long animation tests. Rewritten the tests to be more precise using mock canvas checks. --- Fixes [https://github.com/flutter/flutter/issues/162098](https://github.com/flutter/flutter/issues/162098) ### Description This PR fixes `Tab` linear and elastic animation blinks/flickers when skipping multiple tabs. Previous attempt to fix elastic animation didn't cover linear animation tests and didn't have enough number of tab items which this PR fixes. - Fixed Linear and elastic animation blink issue. - Added tests for linear and elastic animation with various tab sizes (LTR and RTL) - Added tests for linear and elastic animation when skipping tabs (LTR and RTL) ### Code Sample <details> <summary>expand to view the code sample</summary> ```dart import 'package:flutter/material.dart'; // import 'package:flutter/scheduler.dart'; void main() { // timeDilation = 10; runApp(const TabBarDemo()); } class TabBarDemo extends StatelessWidget { const TabBarDemo({super.key}); @OverRide Widget build(BuildContext context) { final List<Widget> tabs = <Widget>[ const Tab(text: 'Short'), const Tab(text: 'A Bit Longer Text'), const Tab(text: 'An Extremely Long Tab Label That Overflows'), const Tab(text: 'Tiny'), const Tab(text: 'Moderate Length'), const Tab(text: 'Just Right'), const Tab(text: 'Supercalifragilisticexpialidocious'), const Tab(text: 'Longer Than Usual'), ]; return MaterialApp( home: DefaultTabController( length: tabs.length, child: Scaffold( appBar: AppBar( bottom: TabBar( tabAlignment: TabAlignment.start, isScrollable: true, indicatorAnimation: TabIndicatorAnimation.elastic, tabs: tabs, ), title: const Text('Tabs Demo'), ), body: TabBarView( children: <Widget>[ for (int i = 0; i < tabs.length; i++) const Icon(Icons.directions_car), ], ), ), ), ); } } ``` </details> ### Before https://github.com/user-attachments/assets/5c271948-5a01-4520-90a3-921c20c79470 ### After https://github.com/user-attachments/assets/6af32d43-3588-488f-ba50-be59323ed692 ### Linear animation before (left) and After (right) comparison. <img width="1048" alt="Screenshot 2025-01-28 at 17 27 50" src="proxy.php?url=https://github.com/user-attachments/assets/4ba587a5-24d0-40ce-817c-366d004abc05" /> ## 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]. - [x] 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]. - [ ] 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]. <!-- Links --> [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
Author
|
@TahaTesser please fill out the PR description above, afterwards the release team will review this request. |
This was referenced Feb 21, 2025
justinmc
approved these changes
Feb 24, 2025
Contributor
justinmc
left a comment
There was a problem hiding this comment.
Cherry pick LGTM 👍 . The change is low risk and only affects Tab highlight. The bug was affecting all users of Tab with more than 3 items (common).
Contributor
|
The presubmits were fixed in #164050. Pushing a merge commit to see if this PR will pass now. |
…f93fb65e29614d7af5f89eb1ae
10998cd
into
flutter:flutter-3.29-candidate.0
156 checks passed
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Mar 6, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Mar 7, 2025
9 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request is created by automatic cherry pick workflow
Please fill in the form below, and a flutter domain expert will evaluate this cherry pick request.
Issue Link:
Cherry picked PR: #162450
Issue: #162098
< Replace with issue link here >
Changelog Description:
Explain this cherry pick in one line that is accessible to most Flutter developers. See best practices for examples
< Replace with changelog description here >
Impact Description:
What is the impact (ex. visual jank on Samsung phones, app crash, cannot ship an iOS app)? Does it impact development (ex. flutter doctor crashes when Android Studio is installed), or the shipping production app (the app crashes on launch)
Anyone using the
TabBarwidget. High impact.Workaround:
Is there a workaround for this issue?
None.
Risk:
What is the risk level of this cherry-pick?
Test Coverage:
Are you confident that your fix is well-tested by automated tests?
Validation Steps:
What are the steps to validate that this fix works?
Run a
TabBarwith linear tab animation and tap third or fourth or use elastic animation observe tab indictor highlight.