Fix `TabBar` tab indicator stretch effect by TahaTesser · Pull Request #150868 · flutter/flutter

TahaTesser · 2024-06-26T19:35:25Z

fixes [Material3] TabBar indicator stretch effect behaving weirdly with long tabs

This PR fixes the tab indicator stretch effect, it currently stretches from both sides. After the fix, tab indicator stretches depending on next size of the indicator and direction of the scroll.

The fix is based on Android Components implementation of the elastic/stretch effect.

https://github.com/material-components/material-components-android/blob/20f92dfb513916d0df6c38bfd630dfc41aff484e/lib/java/com/google/android/material/tabs/ElasticTabIndicatorInterpolator.java#L46-L78

Code sample

expand to view the code sample

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ScrollConfiguration(
        behavior: ScrollConfiguration.of(context)
            .copyWith(dragDevices: <PointerDeviceKind>{
          PointerDeviceKind.touch,
          PointerDeviceKind.mouse,
        }),
        child: DefaultTabController(
          length: 8,
          child: Scaffold(
            appBar: AppBar(
              bottom: const TabBar(
                isScrollable: true,
                tabAlignment: TabAlignment.start,
                tabs: <Widget>[
                  Tab(text: 'Home'),
                  Tab(text: 'Search'),
                  Tab(text: 'Add'),
                  Tab(text: 'Favorite'),
                  Tab(text: 'The longest text...'),
                  Tab(text: 'Short'),
                  Tab(text: 'Longer text...'),
                  Tab(text: 'Profile'),
                ],
              ),
            ),
            body: const TabBarView(
              children: <Widget>[
                Center(child: Text('Page')),
                Center(child: Text('Page')),
                Center(child: Text('Page')),
                Center(child: Text('Page')),
                Center(child: Text('Page')),
                Center(child: Text('Page')),
                Center(child: Text('Page')),
                Center(child: Text('Page')),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Before

Screen.Recording.2024-07-10.at.10.52.18.mov

After

Screen.Recording.2024-07-10.at.10.51.52.mov

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.

Piinks

In the after video it looks like there is a slight glitch in the indicator just after is finishes animating to the long tab. After it arrives, it looks like it really quickly shortens the indicator length on the right side. Or is that maybe triggered by the next swipe gesture starting?

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

TahaTesser · 2024-07-02T21:03:19Z

@Piinks
Great observation, the issue might be that i used to trackpad to test in the videos. I'll put some real device comparison and see if it really glitches.

TahaTesser · 2024-07-08T10:13:10Z

@Piinks Great observation, the issue might be that i used to trackpad to test in the videos. I'll put some real device comparison and see if it really glitches.

I tested this closely on desktop and mobile. This happens when you tap before the tab indicator animation is complete, swipe tab animation is interrupted on tap.

This also happens without this PR too, it's not a bug from this PR.

TahaTesser · 2024-07-10T14:36:34Z

In the next PR. adding a way customize this stretch/elastic tab indicator animation so user can choose to use linear tab indicator animation as part of another issue. #150508

0710-copy.1.mov

Piinks

This LGTM with a nit on the duped variables - you can choose to ignore if you favor it for readability!

Piinks · 2024-07-11T23:46:54Z

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

+      leftFraction = accelerateInterpolation(tabChangeProgress);
+      rightFraction = accelerateInterpolation(tabChangeProgress);
+    } else {
+      leftFraction = decelerateInterpolation(tabChangeProgress);
+      rightFraction = decelerateInterpolation(tabChangeProgress);


If these are just the same values for right and left in both cases, why not use one variable?

I also thought of using a switch statement + pattern combo for assignment, but I figure that implementation preference is not really important. 🙂

Great suggestions, updated the PR to use one variable and switch pattern matching

…0868)

@tool

Roll Flutter from 5103d75 to 58068d8 (42 revisions) flutter/flutter@5103d75...58068d8 2024-07-12 [email protected] Reland: Move all Linux Moto G4 tests to mokey in staging (flutter/flutter#151654) 2024-07-12 [email protected] Update obsolete comment in InputDecorator test (flutter/flutter#151651) 2024-07-12 [email protected] Fix `TabBar` tab indicator stretch effect (flutter/flutter#150868) 2024-07-12 [email protected] Remove workaround for a bug in dart2wasm (flutter/flutter#151603) 2024-07-12 [email protected] [native_assets] Stop running link hooks in JIT mode (flutter/flutter#151534) 2024-07-12 [email protected] Roll `Switch.adaptive` changes into `CupertinoSwitch` (flutter/flutter#149465) 2024-07-11 [email protected] Unmark java11 tests as bringup:true (flutter/flutter#151612) 2024-07-11 [email protected] Add link to design document archive (flutter/flutter#151489) 2024-07-11 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Move all Linux Moto G4 tests to mokey in staging (#151608)" (flutter/flutter#151620) 2024-07-11 [email protected] Move all Linux Moto G4 tests to mokey in staging (flutter/flutter#151608) 2024-07-11 [email protected] docimports for API samples (flutter/flutter#151606) 2024-07-11 [email protected] docimports for flutter_goldens, flutter_localizations, flutter_web_plugins, fuchsia_remote_debug_protocol, integration_test (flutter/flutter#151271) 2024-07-11 [email protected] Re-enable debug canvaskit e2e tests. (flutter/flutter#151565) 2024-07-11 [email protected] Fix: Submenu anchor misaligned with child panel in web (Resolved #151081) (flutter/flutter#151294) 2024-07-11 [email protected] Replaced {@tool snippet} with {@tool dartpad} in CupertinoTabController (flutter/flutter#151272) 2024-07-11 [email protected] feat: Support overriding native endorsed plugins (flutter/flutter#137040) 2024-07-11 [email protected] expose keyboardType in DropdownMenu #150894 (flutter/flutter#150896) 2024-07-11 [email protected] docimports for flutter_driver (flutter/flutter#151267) 2024-07-11 [email protected] Add `TimeOfDay` comparison methods (flutter/flutter#151233) 2024-07-11 [email protected] Roll Flutter Engine from 6534fbf3c2c1 to 36dccf7bb25c (2 revisions) (flutter/flutter#151577) 2024-07-11 [email protected] Roll Flutter Engine from 1c23c8f64076 to 6534fbf3c2c1 (3 revisions) (flutter/flutter#151572) 2024-07-11 [email protected] Use correct locale for `CupertinoDatePicker` weekday (flutter/flutter#151494) 2024-07-10 [email protected] doc imports for enum values (flutter/flutter#151548) 2024-07-10 [email protected] Reland "Upgrade template Gradle, App AGP, Module AGP, and Kotlin versions, and tests"... but no longer upgrade module AGP version (flutter/flutter#151433) 2024-07-10 [email protected] Roll Packages from 14341d1 to ea35fc6 (16 revisions) (flutter/flutter#151556) 2024-07-10 [email protected] [CupertinoActionSheet] Fix padding and font size of buttons (flutter/flutter#151199) 2024-07-10 [email protected] Roll Flutter Engine from db2b45bea2c0 to 1c23c8f64076 (2 revisions) (flutter/flutter#151550) 2024-07-10 [email protected] Add docImports for flutter_test references (flutter/flutter#151175) 2024-07-10 [email protected] Mention not @-mentioning people in commit messages in tree hygiene (flutter/flutter#151487) 2024-07-10 [email protected] Roll Flutter Engine from 371db85f33d7 to db2b45bea2c0 (8 revisions) (flutter/flutter#151522) 2024-07-10 [email protected] fix heading level absorption, diagnostics; add tests and an a11y use-case (flutter/flutter#151421) 2024-07-10 [email protected] Roll Flutter Engine from 9d943eb2b37a to 371db85f33d7 (3 revisions) (flutter/flutter#151505) 2024-07-10 [email protected] Roll Flutter Engine from d3269d5855a7 to 9d943eb2b37a (5 revisions) (flutter/flutter#151495) 2024-07-09 [email protected] Update doc of `SemanticsProperties.identifier` (flutter/flutter#149915) 2024-07-09 [email protected] Clean up leaky test. (flutter/flutter#151131) 2024-07-09 [email protected] Roll pub packages (flutter/flutter#151492) 2024-07-09 [email protected] testAdd tests for stepper.controls_builder.0.dart (flutter/flutter#150669) 2024-07-09 [email protected] Add Semantics Property `linkUrl` (flutter/flutter#150639) 2024-07-09 [email protected] Roll Flutter Engine from 4a2ac0e51a8f to d3269d5855a7 (1 revision) (flutter/flutter#151488) 2024-07-09 [email protected] Link engine docs on AS setup in flutter/flutter docs on engine contributor setup (flutter/flutter#151481) 2024-07-09 [email protected] Roll Flutter Engine from 69075e7e87d4 to 4a2ac0e51a8f (21 revisions) (flutter/flutter#151482) 2024-07-09 [email protected] Fix Material 3 `Dialog` default background color (flutter/flutter#151400) 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 ...

…0868)

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Jun 26, 2024

TahaTesser marked this pull request as ready for review July 2, 2024 11:45

TahaTesser requested a review from Piinks July 2, 2024 11:46

Piinks reviewed Jul 2, 2024

View reviewed changes

packages/flutter/lib/src/material/tabs.dart Outdated Show resolved Hide resolved

packages/flutter/lib/src/material/tabs.dart Outdated Show resolved Hide resolved

TahaTesser requested a review from Piinks July 8, 2024 10:13

TahaTesser added 2 commits July 10, 2024 10:41

Fix TabBar tab indicator stretch effect

fc62685

Fis typos

44e42d0

Piinks approved these changes Jul 11, 2024

View reviewed changes

TahaTesser added 2 commits July 12, 2024 10:54

Address feedback

c8ec1df

Fix analyzer

52de082

TahaTesser added the autosubmit Merge PR when tree becomes green via auto submit App label Jul 12, 2024

auto-submit bot merged commit de2dbf4 into flutter:master Jul 12, 2024

TahaTesser deleted the fix_tab_indicator_stretch branch July 12, 2024 09:48

engine-flutter-autoroll mentioned this pull request Jul 12, 2024

Roll Flutter from 5103d7574361 to bf6c455d4a7a (41 revisions) flutter/packages#7109

Closed

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

de2dbf4 Fix TabBar tab indicator stretch effect (flutter/flutter#15…

7d89f2f

…0868)

engine-flutter-autoroll mentioned this pull request Jul 12, 2024

Roll Flutter from 5103d7574361 to 58068d8ea4ec (42 revisions) flutter/packages#7110

Closed

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

de2dbf4 Fix TabBar tab indicator stretch effect (flutter/flutter#15…

e3b744d

…0868)

engine-flutter-autoroll mentioned this pull request Jul 12, 2024

Roll Flutter from 5103d7574361 to e47c83729075 (43 revisions) flutter/packages#7111

Closed

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

de2dbf4 Fix TabBar tab indicator stretch effect (flutter/flutter#15…

0534125

…0868)

engine-flutter-autoroll mentioned this pull request Jul 12, 2024

Roll Flutter from 5103d7574361 to 68f375fe3871 (44 revisions) flutter/packages#7112

Closed

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

de2dbf4 Fix TabBar tab indicator stretch effect (flutter/flutter#15…

768c999

…0868)

engine-flutter-autoroll mentioned this pull request Jul 12, 2024

Roll Flutter from 5103d7574361 to 607190448b1c (45 revisions) flutter/packages#7113

Closed

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

de2dbf4 Fix TabBar tab indicator stretch effect (flutter/flutter#15…

b7d0d09

…0868)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix `TabBar` tab indicator stretch effect#150868

Fix `TabBar` tab indicator stretch effect#150868
auto-submit[bot] merged 4 commits intoflutter:masterfrom
TahaTesser:fix_tab_indicator_stretch

TahaTesser commented Jun 26, 2024 •

edited

Loading

Uh oh!

Piinks left a comment

Uh oh!

Uh oh!

Uh oh!

TahaTesser commented Jul 2, 2024

Uh oh!

TahaTesser commented Jul 8, 2024 •

edited

Loading

Uh oh!

TahaTesser commented Jul 10, 2024

Uh oh!

Piinks left a comment

Uh oh!

Piinks Jul 11, 2024

Uh oh!

Piinks Jul 11, 2024

Uh oh!

TahaTesser Jul 12, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

TahaTesser commented Jun 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code sample

Before

After

Pre-launch Checklist

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

TahaTesser commented Jul 2, 2024

Uh oh!

TahaTesser commented Jul 8, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

TahaTesser commented Jul 10, 2024

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

Piinks Jul 11, 2024

Choose a reason for hiding this comment

Uh oh!

Piinks Jul 11, 2024

Choose a reason for hiding this comment

Uh oh!

TahaTesser Jul 12, 2024

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

TahaTesser commented Jun 26, 2024 •

edited

Loading

TahaTesser commented Jul 8, 2024 •

edited

Loading