Skip to content

Conversation

@flutteractionsbot
Copy link

@flutteractionsbot flutteractionsbot commented Feb 21, 2025

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 TabBar widget. High impact.

Workaround:

Is there a workaround for this issue?

None.

Risk:

What is the risk level of this cherry-pick?

  • Low
  • Medium
  • High

Test Coverage:

Are you confident that your fix is well-tested by automated tests?

  • Yes
  • No

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.

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="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
@flutteractionsbot flutteractionsbot added the cp: review Cherry-picks in the review queue label Feb 21, 2025
@flutteractionsbot
Copy link
Author

@TahaTesser please fill out the PR description above, afterwards the release team will review this request.

@github-actions github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Feb 21, 2025
Copy link
Contributor

@justinmc justinmc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

@justinmc
Copy link
Contributor

The presubmits were fixed in #164050. Pushing a merge commit to see if this PR will pass now.

@justinmc justinmc added the autosubmit Merge PR when tree becomes green via auto submit App label Feb 26, 2025
@auto-submit auto-submit bot merged commit 10998cd into flutter:flutter-3.29-candidate.0 Feb 26, 2025
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
@reidbaker reidbaker mentioned this pull request Apr 4, 2025
9 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

autosubmit Merge PR when tree becomes green via auto submit App cp: review Cherry-picks in the review queue f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants