[Reland] Fix Tab linear and elastic animation blink (#162315)#162450
[Reland] Fix Tab linear and elastic animation blink (#162315)#162450auto-submit[bot] merged 2 commits intoflutter:masterfrom TahaTesser:reland_tab_animation_fix
Tab linear and elastic animation blink (#162315)#162450Conversation
|
Yesterday, my tab bar PR broke the tree #162315. After looking into it, it looks like golden images generated in a longer animation produces very low quality images as a result some images produce unexpected diff. This PR remove this animated sheet golden tests in favor of mock canvas tests. As a result, I've also rename some tests to be precise. |
justinmc
left a comment
There was a problem hiding this comment.
LGTM 👍
Is the problem that the low-res images that are produced for the goldens during the animation are nondeterministic/flakey? Kind of a bummer since those tests were so concise. Thank you for doing the work to thoroughly write all of this out for mock canvas though.
| await tester.pump(); | ||
| await tester.pump(const Duration(milliseconds: 100)); |
There was a problem hiding this comment.
Just double checking that this first call to pump() is necessary here. Here and elsewhere.
Sorry if I already asked about this in the first PR.
There was a problem hiding this comment.
Initially pump trigger UI update and second pump advances the animation. If we only pump duration, there is no pixel movement.
There was a problem hiding this comment.
Another example here
flutter/dev/benchmarks/microbenchmarks/lib/stocks/build_bench.dart
Lines 29 to 30 in 5d70532
|
@dkwingsmt As the author of AnimationSheetBuilder have you ever seen this kind of flakiness before? Or maybe it's due to the size of the sheet producing a very large golden image that has to be scaled down, something like that? Maybe @Piinks would know if that's how large goldens work? If we can't diagnose this here, maybe we should open an issue to track this. |
Compare to previous PR. the reverted PR had more cases which increased the animation duration captured in the generate image. I noticed the images got a lot burrier with longer test. Blurry images are harder to compare and may produce diffs. If I scale back the tests duration, we don't the full benefit of such tests and have to deal with golden updates so I decided to use mock canvas instead. |
|
I was not aware of this problem, but yeah it might be the case. :( Thank you for trying animation sheet though. |
Roll Flutter from b007899 to 8e2a6fc (61 revisions) flutter/flutter@b007899...8e2a6fc 2025-02-03 [email protected] Implement hot reload using the DDC library bundle format (flutter/flutter#162498) 2025-02-01 [email protected] [Android] add lint ignores to Flutter JNI. (flutter/flutter#162527) 2025-02-01 [email protected] Fix `Linux docs_publish` running at head (flutter/flutter#162557) 2025-02-01 [email protected] [Flutter GPU] Breaking: Use exceptions for resource creation errors. (flutter/flutter#162104) 2025-02-01 [email protected] [Impeller] Increase conical gradient precision. (flutter/flutter#162543) 2025-01-31 [email protected] Roll pub packages (flutter/flutter#162542) 2025-01-31 [email protected] [web] Gracefully handle empty ui.Vertices (flutter/flutter#162461) 2025-01-31 [email protected] [web] Remove HTML build artifacts (flutter/flutter#162528) 2025-01-31 [email protected] [ Tool ] Remove use of globals from widget-preview commands (flutter/flutter#162522) 2025-01-31 [email protected] Add a special case for the Fuchsia SDK ftl.fidl file in the license script (flutter/flutter#162423) 2025-01-31 [email protected] [Impeller] Remove some unused methods from EntityPassClipStack (flutter/flutter#162478) 2025-01-31 [email protected] Reenable linux_web_engine mac tests on Mac-14 (flutter/flutter#162409) 2025-01-31 [email protected] Fix NavigationRail examples overflow alignment (flutter/flutter#159937) 2025-01-31 [email protected] Roll Skia from c1dc5033e7c9 to 4bdf90faf708 (1 revision) (flutter/flutter#162511) 2025-01-31 [email protected] Roll Skia from e0941791b86e to c1dc5033e7c9 (1 revision) (flutter/flutter#162504) 2025-01-31 [email protected] [Reland] Fix `Tab` linear and elastic animation blink (#162315) (flutter/flutter#162450) 2025-01-31 [email protected] fix syntax error in comment pseudocode (flutter/flutter#162453) 2025-01-31 [email protected] Roll Skia from ec8c632b8c7f to e0941791b86e (1 revision) (flutter/flutter#162502) 2025-01-31 [email protected] Roll Skia from a9af2a74c5ab to ec8c632b8c7f (2 revisions) (flutter/flutter#162496) 2025-01-31 [email protected] Roll pub packages (flutter/flutter#162476) 2025-01-31 [email protected] Document flutter/package deps version policy (flutter/flutter#162492) 2025-01-31 [email protected] Add iOS tool codeowner (flutter/flutter#162167) 2025-01-31 [email protected] Fixed the text aspect ratio (flutter/flutter#162415) 2025-01-31 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Delete `FlutterCommand.usageValues` (#162468)" (flutter/flutter#162494) 2025-01-31 [email protected] Add new web contributors to web triage doc. (flutter/flutter#162420) 2025-01-30 [email protected] Fix the build borked in flutter/flutter#162475. (flutter/flutter#162484) 2025-01-30 [email protected] Roll Skia from e6daf687b558 to a9af2a74c5ab (5 revisions) (flutter/flutter#162474) 2025-01-30 [email protected] Bump `Linux mac_clang_tidy" to 120m timeout (flutter/flutter#162475) 2025-01-30 [email protected] Delete `FlutterCommand.usageValues` (flutter/flutter#162468) 2025-01-30 [email protected] Fixed some floating point inaccuracies in TextContents (flutter/flutter#162351) 2025-01-30 [email protected] Limit number of retries when downloading the Dart SDK on Windows (flutter/flutter#162411) 2025-01-30 [email protected] Add FormField.errorBuilder (flutter/flutter#162255) 2025-01-30 [email protected] Fix `Checkbox` default visual density to meet Material 3 guidelines (flutter/flutter#159081) 2025-01-30 [email protected] [Android] add HC++ platform view class. (flutter/flutter#161829) 2025-01-30 [email protected] Add tests to confirm CupertinoSliverNavigationBar snaps when partially scrolled in .always bottom mode (flutter/flutter#162425) 2025-01-30 [email protected] [Impeller] Disable Vulkan on Emulators. (flutter/flutter#162454) 2025-01-30 [email protected] [FGP Kotlin conversion] Convert `Deeplink` and `IntentFilterCheck` (flutter/flutter#161835) 2025-01-30 [email protected] fix slider semantic label (flutter/flutter#162304) 2025-01-30 [email protected] Roll Skia from f22419dbed05 to e6daf687b558 (37 revisions) (flutter/flutter#162447) 2025-01-30 [email protected] Fix `flutter doctor` instructions displayed when `cmdline-tools` (Android SDK) cannot be found (flutter/flutter#162281) 2025-01-30 [email protected] remove more (simple) usage of package:usage (flutter/flutter#162354) 2025-01-30 [email protected] [Android] HC++ plumbing. (flutter/flutter#162407) 2025-01-30 [email protected] Removes dev dependencies from generated plugin registrant for non-Android platforms (flutter/flutter#161828) 2025-01-30 [email protected] Fix unexpected shown of Scrollbar (flutter/flutter#159386) 2025-01-30 [email protected] Roll package:vm_service to 15.0.0 and package:leak_tracker to 10.0.9 (flutter/flutter#162325) 2025-01-30 [email protected] Roll Fuchsia Test Scripts from r9Dc5VRF6sE3pJH20... to g6IlaYL1_wNmk3zNj... (flutter/flutter#162427) ...
|
Failed to create CP due to merge conflicts. |
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
|
@justinmc @eyebrowsoffire |
…2315) (#163830) This pull request is created by [automatic cherry pick workflow](https://github.com/flutter/flutter/blob/main/docs/releases/Flutter-Cherrypick-Process.md#automatically-creates-a-cherry-pick-request) 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](https://github.com/flutter/flutter/blob/main/docs/releases/Hotfix-Documentation-Best-Practices.md) 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 `TabBar` widget. 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 `TabBar` with linear tab animation and tap third or fourth or use elastic animation observe tab indictor highlight.
Roll Flutter from b007899 to 8e2a6fc (61 revisions) flutter/flutter@b007899...8e2a6fc 2025-02-03 [email protected] Implement hot reload using the DDC library bundle format (flutter/flutter#162498) 2025-02-01 [email protected] [Android] add lint ignores to Flutter JNI. (flutter/flutter#162527) 2025-02-01 [email protected] Fix `Linux docs_publish` running at head (flutter/flutter#162557) 2025-02-01 [email protected] [Flutter GPU] Breaking: Use exceptions for resource creation errors. (flutter/flutter#162104) 2025-02-01 [email protected] [Impeller] Increase conical gradient precision. (flutter/flutter#162543) 2025-01-31 [email protected] Roll pub packages (flutter/flutter#162542) 2025-01-31 [email protected] [web] Gracefully handle empty ui.Vertices (flutter/flutter#162461) 2025-01-31 [email protected] [web] Remove HTML build artifacts (flutter/flutter#162528) 2025-01-31 [email protected] [ Tool ] Remove use of globals from widget-preview commands (flutter/flutter#162522) 2025-01-31 [email protected] Add a special case for the Fuchsia SDK ftl.fidl file in the license script (flutter/flutter#162423) 2025-01-31 [email protected] [Impeller] Remove some unused methods from EntityPassClipStack (flutter/flutter#162478) 2025-01-31 [email protected] Reenable linux_web_engine mac tests on Mac-14 (flutter/flutter#162409) 2025-01-31 [email protected] Fix NavigationRail examples overflow alignment (flutter/flutter#159937) 2025-01-31 [email protected] Roll Skia from c1dc5033e7c9 to 4bdf90faf708 (1 revision) (flutter/flutter#162511) 2025-01-31 [email protected] Roll Skia from e0941791b86e to c1dc5033e7c9 (1 revision) (flutter/flutter#162504) 2025-01-31 [email protected] [Reland] Fix `Tab` linear and elastic animation blink (#162315) (flutter/flutter#162450) 2025-01-31 [email protected] fix syntax error in comment pseudocode (flutter/flutter#162453) 2025-01-31 [email protected] Roll Skia from ec8c632b8c7f to e0941791b86e (1 revision) (flutter/flutter#162502) 2025-01-31 [email protected] Roll Skia from a9af2a74c5ab to ec8c632b8c7f (2 revisions) (flutter/flutter#162496) 2025-01-31 [email protected] Roll pub packages (flutter/flutter#162476) 2025-01-31 [email protected] Document flutter/package deps version policy (flutter/flutter#162492) 2025-01-31 [email protected] Add iOS tool codeowner (flutter/flutter#162167) 2025-01-31 [email protected] Fixed the text aspect ratio (flutter/flutter#162415) 2025-01-31 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Delete `FlutterCommand.usageValues` (#162468)" (flutter/flutter#162494) 2025-01-31 [email protected] Add new web contributors to web triage doc. (flutter/flutter#162420) 2025-01-30 [email protected] Fix the build borked in flutter/flutter#162475. (flutter/flutter#162484) 2025-01-30 [email protected] Roll Skia from e6daf687b558 to a9af2a74c5ab (5 revisions) (flutter/flutter#162474) 2025-01-30 [email protected] Bump `Linux mac_clang_tidy" to 120m timeout (flutter/flutter#162475) 2025-01-30 [email protected] Delete `FlutterCommand.usageValues` (flutter/flutter#162468) 2025-01-30 [email protected] Fixed some floating point inaccuracies in TextContents (flutter/flutter#162351) 2025-01-30 [email protected] Limit number of retries when downloading the Dart SDK on Windows (flutter/flutter#162411) 2025-01-30 [email protected] Add FormField.errorBuilder (flutter/flutter#162255) 2025-01-30 [email protected] Fix `Checkbox` default visual density to meet Material 3 guidelines (flutter/flutter#159081) 2025-01-30 [email protected] [Android] add HC++ platform view class. (flutter/flutter#161829) 2025-01-30 [email protected] Add tests to confirm CupertinoSliverNavigationBar snaps when partially scrolled in .always bottom mode (flutter/flutter#162425) 2025-01-30 [email protected] [Impeller] Disable Vulkan on Emulators. (flutter/flutter#162454) 2025-01-30 [email protected] [FGP Kotlin conversion] Convert `Deeplink` and `IntentFilterCheck` (flutter/flutter#161835) 2025-01-30 [email protected] fix slider semantic label (flutter/flutter#162304) 2025-01-30 [email protected] Roll Skia from f22419dbed05 to e6daf687b558 (37 revisions) (flutter/flutter#162447) 2025-01-30 [email protected] Fix `flutter doctor` instructions displayed when `cmdline-tools` (Android SDK) cannot be found (flutter/flutter#162281) 2025-01-30 [email protected] remove more (simple) usage of package:usage (flutter/flutter#162354) 2025-01-30 [email protected] [Android] HC++ plumbing. (flutter/flutter#162407) 2025-01-30 [email protected] Removes dev dependencies from generated plugin registrant for non-Android platforms (flutter/flutter#161828) 2025-01-30 [email protected] Fix unexpected shown of Scrollbar (flutter/flutter#159386) 2025-01-30 [email protected] Roll package:vm_service to 15.0.0 and package:leak_tracker to 10.0.9 (flutter/flutter#162325) 2025-01-30 [email protected] Roll Fuchsia Test Scripts from r9Dc5VRF6sE3pJH20... to g6IlaYL1_wNmk3zNj... (flutter/flutter#162427) ...
Roll Flutter from b007899 to 8e2a6fc (61 revisions) flutter/flutter@b007899...8e2a6fc 2025-02-03 [email protected] Implement hot reload using the DDC library bundle format (flutter/flutter#162498) 2025-02-01 [email protected] [Android] add lint ignores to Flutter JNI. (flutter/flutter#162527) 2025-02-01 [email protected] Fix `Linux docs_publish` running at head (flutter/flutter#162557) 2025-02-01 [email protected] [Flutter GPU] Breaking: Use exceptions for resource creation errors. (flutter/flutter#162104) 2025-02-01 [email protected] [Impeller] Increase conical gradient precision. (flutter/flutter#162543) 2025-01-31 [email protected] Roll pub packages (flutter/flutter#162542) 2025-01-31 [email protected] [web] Gracefully handle empty ui.Vertices (flutter/flutter#162461) 2025-01-31 [email protected] [web] Remove HTML build artifacts (flutter/flutter#162528) 2025-01-31 [email protected] [ Tool ] Remove use of globals from widget-preview commands (flutter/flutter#162522) 2025-01-31 [email protected] Add a special case for the Fuchsia SDK ftl.fidl file in the license script (flutter/flutter#162423) 2025-01-31 [email protected] [Impeller] Remove some unused methods from EntityPassClipStack (flutter/flutter#162478) 2025-01-31 [email protected] Reenable linux_web_engine mac tests on Mac-14 (flutter/flutter#162409) 2025-01-31 [email protected] Fix NavigationRail examples overflow alignment (flutter/flutter#159937) 2025-01-31 [email protected] Roll Skia from c1dc5033e7c9 to 4bdf90faf708 (1 revision) (flutter/flutter#162511) 2025-01-31 [email protected] Roll Skia from e0941791b86e to c1dc5033e7c9 (1 revision) (flutter/flutter#162504) 2025-01-31 [email protected] [Reland] Fix `Tab` linear and elastic animation blink (#162315) (flutter/flutter#162450) 2025-01-31 [email protected] fix syntax error in comment pseudocode (flutter/flutter#162453) 2025-01-31 [email protected] Roll Skia from ec8c632b8c7f to e0941791b86e (1 revision) (flutter/flutter#162502) 2025-01-31 [email protected] Roll Skia from a9af2a74c5ab to ec8c632b8c7f (2 revisions) (flutter/flutter#162496) 2025-01-31 [email protected] Roll pub packages (flutter/flutter#162476) 2025-01-31 [email protected] Document flutter/package deps version policy (flutter/flutter#162492) 2025-01-31 [email protected] Add iOS tool codeowner (flutter/flutter#162167) 2025-01-31 [email protected] Fixed the text aspect ratio (flutter/flutter#162415) 2025-01-31 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Delete `FlutterCommand.usageValues` (#162468)" (flutter/flutter#162494) 2025-01-31 [email protected] Add new web contributors to web triage doc. (flutter/flutter#162420) 2025-01-30 [email protected] Fix the build borked in flutter/flutter#162475. (flutter/flutter#162484) 2025-01-30 [email protected] Roll Skia from e6daf687b558 to a9af2a74c5ab (5 revisions) (flutter/flutter#162474) 2025-01-30 [email protected] Bump `Linux mac_clang_tidy" to 120m timeout (flutter/flutter#162475) 2025-01-30 [email protected] Delete `FlutterCommand.usageValues` (flutter/flutter#162468) 2025-01-30 [email protected] Fixed some floating point inaccuracies in TextContents (flutter/flutter#162351) 2025-01-30 [email protected] Limit number of retries when downloading the Dart SDK on Windows (flutter/flutter#162411) 2025-01-30 [email protected] Add FormField.errorBuilder (flutter/flutter#162255) 2025-01-30 [email protected] Fix `Checkbox` default visual density to meet Material 3 guidelines (flutter/flutter#159081) 2025-01-30 [email protected] [Android] add HC++ platform view class. (flutter/flutter#161829) 2025-01-30 [email protected] Add tests to confirm CupertinoSliverNavigationBar snaps when partially scrolled in .always bottom mode (flutter/flutter#162425) 2025-01-30 [email protected] [Impeller] Disable Vulkan on Emulators. (flutter/flutter#162454) 2025-01-30 [email protected] [FGP Kotlin conversion] Convert `Deeplink` and `IntentFilterCheck` (flutter/flutter#161835) 2025-01-30 [email protected] fix slider semantic label (flutter/flutter#162304) 2025-01-30 [email protected] Roll Skia from f22419dbed05 to e6daf687b558 (37 revisions) (flutter/flutter#162447) 2025-01-30 [email protected] Fix `flutter doctor` instructions displayed when `cmdline-tools` (Android SDK) cannot be found (flutter/flutter#162281) 2025-01-30 [email protected] remove more (simple) usage of package:usage (flutter/flutter#162354) 2025-01-30 [email protected] [Android] HC++ plumbing. (flutter/flutter#162407) 2025-01-30 [email protected] Removes dev dependencies from generated plugin registrant for non-Android platforms (flutter/flutter#161828) 2025-01-30 [email protected] Fix unexpected shown of Scrollbar (flutter/flutter#159386) 2025-01-30 [email protected] Roll package:vm_service to 15.0.0 and package:leak_tracker to 10.0.9 (flutter/flutter#162325) 2025-01-30 [email protected] Roll Fuchsia Test Scripts from r9Dc5VRF6sE3pJH20... to g6IlaYL1_wNmk3zNj... (flutter/flutter#162427) ...
Relands #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 #162098
Description
This PR fixes
Tablinear 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.Code Sample
expand to view the code sample
Before
before.mov
After
after.mov
Linear animation before (left) and After (right) comparison.
Pre-launch Checklist
///).If you need help, consider asking for advice on the #hackers-new channel on Discord.