Fix scrollable `TabBar` jittering #150041

TahaTesser · 2024-06-11T13:57:11Z

fixes TabBar with isScrollable set to true is broken

This regressed due to a tiny mistake in #146293

Code sample

expand to view the code sample

import 'dart:ui';

import 'package:flutter/material.dart';

/// Flutter code sample for [TabBar].

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: TabBarExample(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final List<Tab> tabs =
        List<Tab>.generate(20, (int index) => Tab(text: 'Tab $index'));

    return ScrollConfiguration(
      behavior: ScrollConfiguration.of(context)
          .copyWith(dragDevices: <PointerDeviceKind>{
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      }),
      child: DefaultTabController(
        length: tabs.length,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('TabBar Sample'),
            bottom: TabBar(
              isScrollable: true,
              tabs: tabs,
              tabAlignment: TabAlignment.start,
            ),
          ),
          body: TabBarView(
            children: <Widget>[
              for (int i = 0; i < tabs.length; i++)
                Center(
                  child: Text('Page $i'),
                ),
            ],
          ),
        ),
      ),
    );
  }
}

Before

before.mov

After

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

PerLycke · 2024-06-13T08:40:39Z

Even though this fix works to some extent, it doesn't fix "TabBar with isScrollable set to true is broken" as with the changes proposed in this PR the TabBar jumps after swiping to Tab 3 and back to Tab 2:

Screen.Recording.2024-06-13.at.10.27.41.mov

TahaTesser · 2024-06-13T08:42:23Z

@PerLycke
Thank you so much for testing the PR code. I'm out of office today, I'll address your issue first thing tomorrow.

TahaTesser · 2024-06-14T10:36:10Z

@PerLycke
I just updated the fix and added a new test for the jitter at the start of the scrollable TabBar.

Could you please try it and confirm it works as expected?

PerLycke · 2024-06-16T08:52:34Z

@TahaTesser I can confirm it now works as expected 👍

justinmc

Tricky, good catch. LGTM 👍

FYI @nate-thegrate

nate-thegrate · 2024-06-17T18:06:42Z

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

-      < 0 => lerpDouble(middlePosition, leadingPosition, index - value)!,
-      _   => lerpDouble(middlePosition, trailingPosition, value - index)!,


Thanks for catching my mistake here!

(And thanks @justinmc for letting me know!)

nate-thegrate · 2024-06-17T18:10:06Z

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

+    final double offset = switch ((value, index)) {
+      (_, _) when value == index - 1.0 =>  leadingPosition ?? middlePosition,
+      (_, _) when value == index + 1.0 =>  trailingPosition ?? middlePosition,
+      (_, _) when value == index =>  middlePosition,
+      (_, _) when value < index =>  leadingPosition == null ? middlePosition : lerpDouble(middlePosition, leadingPosition, index - value)!,
+      (_, _) =>  trailingPosition == null ? middlePosition : lerpDouble(middlePosition, trailingPosition, value - index)!,
    };


It feels a bit weird to pass a record into a switch expression and then not use it.

Suggested change

final double offset = switch ((value, index)) {

(_, _) when value == index - 1.0 => leadingPosition ?? middlePosition,

(_, _) when value == index + 1.0 => trailingPosition ?? middlePosition,

(_, _) when value == index => middlePosition,

(_, _) when value < index => leadingPosition == null ? middlePosition : lerpDouble(middlePosition, leadingPosition, index - value)!,

(_, _) => trailingPosition == null ? middlePosition : lerpDouble(middlePosition, trailingPosition, value - index)!,

};

final double offset = switch (value - index) {

-1.0 => leadingPosition ?? middlePosition,

1.0 => trailingPosition ?? middlePosition,

0 => middlePosition,

< 0 => leadingPosition == null ? middlePosition : lerpDouble(middlePosition, leadingPosition, index - value)!,

_ => trailingPosition == null ? middlePosition : lerpDouble(middlePosition, trailingPosition, value - index)!,

};

I believe the logic is identical, based on a local test run.

This is better, thanks!

nate-thegrate

I really appreciate the effort put into correcting a previous error I made.

If we want to just merge right away, that's good with me 👍

Manual roll requested by [email protected] flutter/flutter@ccf3abe...6c06abb 2024-06-18 [email protected] Add test for engine artifact framework permissions (flutter/flutter#148786) 2024-06-18 [email protected] Add test for icon_button.3.dart (flutter/flutter#149988) 2024-06-18 [email protected] Roll Flutter Engine from 78fdd06af541 to 74f42ca3544c (6 revisions) (flutter/flutter#150421) 2024-06-18 [email protected] Fix transparent `dividerColor` breaks `TabBar.tabAlignment` (flutter/flutter#150350) 2024-06-18 [email protected] Fix scrollable `TabBar` jittering (flutter/flutter#150041) 2024-06-18 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Reland 3: [CupertinoActionSheet] Match colors to native (#150386)" (flutter/flutter#150413) 2024-06-18 [email protected] Extend the Windows web_tool_tests_1_2 shard timeout to 45 minutes (flutter/flutter#150393) 2024-06-18 [email protected] Roll Flutter Engine from 1c4e5e230ecb to 78fdd06af541 (3 revisions) (flutter/flutter#150403) 2024-06-18 [email protected] Roll Flutter Engine from a4f266f7eb1a to 1c4e5e230ecb (8 revisions) (flutter/flutter#150399) 2024-06-18 [email protected] Rename doc file to use standard hyphens (flutter/flutter#150314) 2024-06-17 [email protected] Fix typo in `SliverLayoutDimensions.hashCode` where not all properties are used in the hash code. (flutter/flutter#150306) 2024-06-17 [email protected] Fix doc comment references to 'this' (flutter/flutter#150379) 2024-06-17 [email protected] Add 'fail-fast' argument to flutter test (flutter/flutter#149587) 2024-06-17 [email protected] Update matchesGoldenFile documentation reference to goldenFileComparator (flutter/flutter#150343) 2024-06-17 [email protected] Reland 3: [CupertinoActionSheet] Match colors to native (flutter/flutter#150386) 2024-06-17 [email protected] [a11y] Add semantics: button to bottom navigation bar items and dropdown menu items (flutter/flutter#149375) 2024-06-17 [email protected] Reland "sliverGridDelegate mainAxisExtent add assert (#148470)" (flutter/flutter#149720) 2024-06-17 [email protected] `ScaffoldBackgroundColor` should default to `ColorScheme.surface` (flutter/flutter#149772) 2024-06-17 [email protected] Reland TreeSliver (flutter/flutter#149839) 2024-06-17 [email protected] Reland: [CupertinoActionSheet] Add sliding tap gesture (flutter/flutter#150219) 2024-06-17 [email protected] Roll Flutter Engine from 5989f0215fed to a4f266f7eb1a (1 revision) (flutter/flutter#150377) 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 Please CC [email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

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

TahaTesser marked this pull request as ready for review June 11, 2024 14:15

TahaTesser requested review from Piinks and goderbauer June 11, 2024 14:15

TahaTesser marked this pull request as draft June 13, 2024 08:41

Fix scrollable TabBar jittering

1a31012

TahaTesser force-pushed the fix_scrollable_tab_bar_jitter branch from 0d1c142 to 1a31012 Compare June 14, 2024 10:34

TahaTesser marked this pull request as ready for review June 14, 2024 11:30

TahaTesser changed the title ~~Fix scrollable TabBar jitters in the middle position~~ Fix scrollable TabBar jittering Jun 17, 2024

justinmc approved these changes Jun 17, 2024

View reviewed changes

nate-thegrate reviewed Jun 17, 2024

View reviewed changes

nate-thegrate approved these changes Jun 17, 2024

View reviewed changes

Address feedback

ca8b11d

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

auto-submit bot merged commit a9f554a into flutter:master Jun 18, 2024

TahaTesser deleted the fix_scrollable_tab_bar_jitter branch June 18, 2024 08:31

TahaTesser mentioned this pull request Jun 18, 2024

Fix transparent dividerColor breaks TabBar.tabAlignment #150350

Merged

9 tasks

engine-flutter-autoroll mentioned this pull request Jun 18, 2024

Roll Flutter from ccf3abe94047 to b44c67e2e893 (19 revisions) flutter/packages#6944

Closed

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

a9f554a Fix scrollable TabBar jittering (flutter/flutter#150041)

f7a407b

engine-flutter-autoroll mentioned this pull request Jun 18, 2024

Roll Flutter from ccf3abe94047 to f2c48afbb1cf (20 revisions) flutter/packages#6945

Closed

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

a9f554a Fix scrollable TabBar jittering (flutter/flutter#150041)

17a00b2

engine-flutter-autoroll mentioned this pull request Jun 18, 2024

Roll Flutter from ccf3abe94047 to 6c06abbb5576 (21 revisions) flutter/packages#6947

Closed

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

a9f554a Fix scrollable TabBar jittering (flutter/flutter#150041)

549a8f5

engine-flutter-autoroll mentioned this pull request Jun 18, 2024

Roll Flutter from ccf3abe94047 to f54dfcd27db8 (22 revisions) flutter/packages#6948

Closed

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

a9f554a Fix scrollable TabBar jittering (flutter/flutter#150041)

673afc0

engine-flutter-autoroll mentioned this pull request Jun 19, 2024

Roll Flutter from ccf3abe94047 to 71ac7f55b3dd (29 revisions) flutter/packages#6950

Closed

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

a9f554a Fix scrollable TabBar jittering (flutter/flutter#150041)

2967987

engine-flutter-autoroll mentioned this pull request Jun 19, 2024

Roll Flutter from ccf3abe94047 to 71ac7f55b3dd (29 revisions) flutter/packages#6951

Closed

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

a9f554a Fix scrollable TabBar jittering (flutter/flutter#150041)

0cc4b71

engine-flutter-autoroll mentioned this pull request Jun 20, 2024

Manual roll Flutter from ccf3abe94047 to 6c06abbb5576 (21 revisions) flutter/packages#6954

Merged

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

a9f554a Fix scrollable TabBar jittering (flutter/flutter#150041)

d8e85e6

engine-flutter-autoroll mentioned this pull request Jun 20, 2024

Roll Flutter from ccf3abe94047 to bfdcb51643b3 (32 revisions) flutter/packages#6955

Closed

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

a9f554a Fix scrollable TabBar jittering (flutter/flutter#150041)

eed2eeb

engine-flutter-autoroll mentioned this pull request Jun 20, 2024

Roll Flutter from ccf3abe94047 to 0674f46e9fde (33 revisions) flutter/packages#6956

Closed

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

a9f554a Fix scrollable TabBar jittering (flutter/flutter#150041)

60eef04

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

a9f554a Fix scrollable TabBar jittering (flutter/flutter#150041)

6b6ae10

nate-thegrate mentioned this pull request Oct 14, 2024

Notable Mishaps #156720

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix scrollable `TabBar` jittering #150041

Fix scrollable `TabBar` jittering #150041

Uh oh!

TahaTesser commented Jun 11, 2024

Uh oh!

PerLycke commented Jun 13, 2024

Uh oh!

TahaTesser commented Jun 13, 2024

Uh oh!

TahaTesser commented Jun 14, 2024

Uh oh!

PerLycke commented Jun 16, 2024

Uh oh!

justinmc left a comment

Uh oh!

nate-thegrate Jun 17, 2024

Uh oh!

nate-thegrate Jun 17, 2024

Uh oh!

TahaTesser Jun 18, 2024

Uh oh!

nate-thegrate left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		< 0 => lerpDouble(middlePosition, leadingPosition, index - value)!,
		_ => lerpDouble(middlePosition, trailingPosition, value - index)!,

Fix scrollable TabBar jittering #150041

Fix scrollable TabBar jittering #150041

Uh oh!

Conversation

TahaTesser commented Jun 11, 2024

Code sample

Before

After

Pre-launch Checklist

Uh oh!

PerLycke commented Jun 13, 2024

Uh oh!

TahaTesser commented Jun 13, 2024

Uh oh!

TahaTesser commented Jun 14, 2024

Uh oh!

PerLycke commented Jun 16, 2024

Uh oh!

justinmc left a comment

Choose a reason for hiding this comment

Uh oh!

nate-thegrate Jun 17, 2024

Choose a reason for hiding this comment

Uh oh!

nate-thegrate Jun 17, 2024

Choose a reason for hiding this comment

Uh oh!

TahaTesser Jun 18, 2024

Choose a reason for hiding this comment

Uh oh!

nate-thegrate left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Fix scrollable `TabBar` jittering #150041

Fix scrollable `TabBar` jittering #150041