Fix `TabBar` tab indicator stretch effect #150868

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 zanderso@users.noreply.github.com Reland: Move all Linux Moto G4 tests to mokey in staging (flutter/flutter#151654) 2024-07-12 leroux_bruno@yahoo.fr Update obsolete comment in InputDecorator test (flutter/flutter#151651) 2024-07-12 tessertaha@gmail.com Fix `TabBar` tab indicator stretch effect (flutter/flutter#150868) 2024-07-12 kustermann@google.com Remove workaround for a bug in dart2wasm (flutter/flutter#151603) 2024-07-12 dacoharkes@google.com [native_assets] Stop running link hooks in JIT mode (flutter/flutter#151534) 2024-07-12 victorsanniay@gmail.com Roll `Switch.adaptive` changes into `CupertinoSwitch` (flutter/flutter#149465) 2024-07-11 34871572+gmackall@users.noreply.github.com Unmark java11 tests as bringup:true (flutter/flutter#151612) 2024-07-11 737941+loic-sharma@users.noreply.github.com 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 zanderso@users.noreply.github.com Move all Linux Moto G4 tests to mokey in staging (flutter/flutter#151608) 2024-07-11 goderbauer@google.com docimports for API samples (flutter/flutter#151606) 2024-07-11 goderbauer@google.com docimports for flutter_goldens, flutter_localizations, flutter_web_plugins, fuchsia_remote_debug_protocol, integration_test (flutter/flutter#151271) 2024-07-11 jacksongardner@google.com Re-enable debug canvaskit e2e tests. (flutter/flutter#151565) 2024-07-11 57765714+Vi-debug@users.noreply.github.com Fix: Submenu anchor misaligned with child panel in web (Resolved #151081) (flutter/flutter#151294) 2024-07-11 45459898+RamonFarizel@users.noreply.github.com Replaced {@tool snippet} with {@tool dartpad} in CupertinoTabController (flutter/flutter#151272) 2024-07-11 git@reb0.org feat: Support overriding native endorsed plugins (flutter/flutter#137040) 2024-07-11 jeff@jefferey.dev expose keyboardType in DropdownMenu #150894 (flutter/flutter#150896) 2024-07-11 goderbauer@google.com docimports for flutter_driver (flutter/flutter#151267) 2024-07-11 82763757+NobodyForNothing@users.noreply.github.com Add `TimeOfDay` comparison methods (flutter/flutter#151233) 2024-07-11 engine-flutter-autoroll@skia.org Roll Flutter Engine from 6534fbf3c2c1 to 36dccf7bb25c (2 revisions) (flutter/flutter#151577) 2024-07-11 engine-flutter-autoroll@skia.org Roll Flutter Engine from 1c23c8f64076 to 6534fbf3c2c1 (3 revisions) (flutter/flutter#151572) 2024-07-11 victorsanniay@gmail.com Use correct locale for `CupertinoDatePicker` weekday (flutter/flutter#151494) 2024-07-10 goderbauer@google.com doc imports for enum values (flutter/flutter#151548) 2024-07-10 34871572+gmackall@users.noreply.github.com 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 engine-flutter-autoroll@skia.org Roll Packages from 14341d1 to ea35fc6 (16 revisions) (flutter/flutter#151556) 2024-07-10 dkwingsmt@users.noreply.github.com [CupertinoActionSheet] Fix padding and font size of buttons (flutter/flutter#151199) 2024-07-10 engine-flutter-autoroll@skia.org Roll Flutter Engine from db2b45bea2c0 to 1c23c8f64076 (2 revisions) (flutter/flutter#151550) 2024-07-10 goderbauer@google.com Add docImports for flutter_test references (flutter/flutter#151175) 2024-07-10 ian@hixie.ch Mention not @-mentioning people in commit messages in tree hygiene (flutter/flutter#151487) 2024-07-10 engine-flutter-autoroll@skia.org Roll Flutter Engine from 371db85f33d7 to db2b45bea2c0 (8 revisions) (flutter/flutter#151522) 2024-07-10 yjbanov@google.com fix heading level absorption, diagnostics; add tests and an a11y use-case (flutter/flutter#151421) 2024-07-10 engine-flutter-autoroll@skia.org Roll Flutter Engine from 9d943eb2b37a to 371db85f33d7 (3 revisions) (flutter/flutter#151505) 2024-07-10 engine-flutter-autoroll@skia.org Roll Flutter Engine from d3269d5855a7 to 9d943eb2b37a (5 revisions) (flutter/flutter#151495) 2024-07-09 mdebbar@google.com Update doc of `SemanticsProperties.identifier` (flutter/flutter#149915) 2024-07-09 polinach@google.com Clean up leaky test. (flutter/flutter#151131) 2024-07-09 137456488+flutter-pub-roller-bot@users.noreply.github.com Roll pub packages (flutter/flutter#151492) 2024-07-09 32538273+ValentinVignal@users.noreply.github.com testAdd tests for stepper.controls_builder.0.dart (flutter/flutter#150669) 2024-07-09 mdebbar@google.com Add Semantics Property `linkUrl` (flutter/flutter#150639) 2024-07-09 engine-flutter-autoroll@skia.org Roll Flutter Engine from 4a2ac0e51a8f to d3269d5855a7 (1 revision) (flutter/flutter#151488) 2024-07-09 34871572+gmackall@users.noreply.github.com Link engine docs on AS setup in flutter/flutter docs on engine contributor setup (flutter/flutter#151481) 2024-07-09 engine-flutter-autoroll@skia.org Roll Flutter Engine from 69075e7e87d4 to 4a2ac0e51a8f (21 revisions) (flutter/flutter#151482) 2024-07-09 tessertaha@gmail.com 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

Uh oh!

Fix `TabBar` tab indicator stretch effect #150868

Fix `TabBar` tab indicator stretch effect #150868

Uh oh!

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

Fix TabBar tab indicator stretch effect #150868

Fix TabBar tab indicator stretch effect #150868

Uh oh!

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

Fix `TabBar` tab indicator stretch effect #150868

Fix `TabBar` tab indicator stretch effect #150868

TahaTesser commented Jun 26, 2024 •

edited

Loading

TahaTesser commented Jul 8, 2024 •

edited

Loading