Material 3 - Tab indicator stretch animation #141954

davidmartos96 · 2024-01-22T09:16:45Z

Fixes #128696 (Motion checkbox)

This PR updates the Material 3 tab indicator animation, so that it stretches, as it can be seen in the showcase videos in the specification https://m3.material.io/components/tabs/accessibility#13ed756b-fb35-4bb3-ac8c-1157e49031d8

One thing to note is that the Material 3 videos have a tab transition duration of 700 ms, whereas currently in Flutter the duration is 300 ms. I recorded 4 comparison videos to see the difference better (current animation vs stretch animation and 300 ms vs 700 ms)
@Piinks You mentioned the other day that the default tab size could be updated in the future to better reflect the new size in M3. Maybe the kTabScrollDuration constant is another one that could end up being updated, as 300 ms for this animation feels too fast.

Here are the comparison videos (Material 3 spec showcase on the left and Flutter on the right)

Original animation - 300 ms

orig_default_duration.mp4

New animation - 300 ms

stretch_default_duration.mp4

Original animation - 700 ms

orig_changed_duration.mp4

New animation - 700 ms

stretch_changed_duration.mp4

Code sample

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


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

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

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

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 1,
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('My saved media'),
          bottom: const TabBar(
            tabs: <Widget>[
              Tab(
                icon: Icon(Icons.videocam_outlined),
                text: "Video",
              ),
              Tab(
                icon: Icon(Icons.photo_outlined),
                text: "Photos",
              ),
              Tab(
                icon: Icon(Icons.audiotrack),
                text: "Audio",
              ),
            ],
          ),
        ),
        body: const TabBarView(
          children: <Widget>[
            Center(
              child: Text("Tab 1"),
            ),
            Center(
              child: Text("Tab 2"),
            ),
            Center(
              child: Text("Tab 3"),
            ),
          ],
        ),
      ),
    );
  }
}

If you had to change anything in the flutter/tests repo, include a link to the migration guide as per the breaking change policy.

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.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

Piinks

Hey @davidmartos96! Thanks for your continued work on tabs!

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

Piinks

This is looking really goo! Just one question :)

Piinks · 2024-01-29T20:09:02Z

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

Nice clean up!

Piinks · 2024-01-29T20:13:22Z

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

Would controller.animation.status tell us earlier if it is completed? We might put this at the top of this function to skip doing work then. Otherwise, should we assert here that our determination that the animation status is finished is true?

@Piinks Goog point!
We could add a guard with status == completed at the top, but it would only work when changing tabs via tapping. Dragging a TabBarView doesn't trigger an animation "life cycle", so there is never a completed status, making tabChangeProgress == 1.0 still neccessary.

We could add the early return at the top, and keep the other one as is, but with an assert that it should only happen when not indexIsChanging (dragging the TabBarView). What do you think?

@Piinks Actually, trying out the proposed assert, it doesn't work. There is a frame where the progress is 1.0 but the status is .forward, not .completed. So maybe just having the early return with the status at the top is ok.

Done in 30961c505dbce09a6ceee973475ea6719e0dc93e

Thanks for looking into this!

Piinks

LGTM!

Piinks · 2024-02-01T20:29:16Z

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

Thanks for looking into this!

TahaTesser

Nice fix

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

packages/flutter/test/material/tabs_test.dart

TahaTesser

LGTM

Co-authored-by: Taha Tesser <[email protected]>

* master: (32 commits) [reland] Add `AnimationStyle` to `showSnackBar` (flutter#143052) Run Mac x64 build tests in postsubmit only (flutter#142334) Copy the flutter version JSON file into the simulated Flutter SDK used by update_packages (flutter#143035) Mark `Windows_android hot_mode_dev_cycle_win__benchmark` as no longer flaky (flutter#143016) Dispose precached image info (flutter#143017) Instrument CurvedAnimation. (flutter#143007) Update _goldens_io.dart to generate failure images during a size mism… (flutter#142177) Reverts "Activate InkSparkle on CanvasKit" (flutter#143036) Activate InkSparkle on CanvasKit (flutter#138545) [Windows] Fix signed/unsigned int comparison (flutter#142341) Reverts "Move native assets to `isolated/` directory" (flutter#143027) Reverts "Roll Flutter Engine from 808886312e2b to 07cdaab7f531 (18 revisions)" (flutter#143025) Make destructiveRed a CupertinoDynamicColor (flutter#141364) Move native assets to `isolated/` directory (flutter#142709) Roll Flutter Engine from 808886312e2b to 07cdaab7f531 (18 revisions) (flutter#143005) Fix CupertinoPageScaffold resizeToAvoidBottomInset (flutter#142776) Reverts "Add `AnimationStyle` to `showSnackBar`" (flutter#143001) Material 3 - Tab indicator stretch animation (flutter#141954) Add `AnimationStyle` to `showSnackBar` (flutter#142825) Roll Packages from ae3494d to 1a5a7ce (2 revisions) (flutter#142985) ...

…#141954)

flutter/flutter@e6ba809...8431cae 2024-02-07 [email protected] Roll Flutter Engine from 1ac6beb8a3c2 to 6807342305e4 (6 revisions) (flutter/flutter#143082) 2024-02-07 [email protected] Manual roll Flutter Engine from 808886312e2b to 1ac6beb8a3c2 (22 revisions) (flutter/flutter#143039) 2024-02-07 [email protected] Roll Packages from 1a5a7ce to e4ea6bf (4 revisions) (flutter/flutter#143076) 2024-02-07 [email protected] Fix M3 text field height + initial step for input decorator M3 test migration (flutter/flutter#142981) 2024-02-07 [email protected] [reland] Add `AnimationStyle` to `showSnackBar` (flutter/flutter#143052) 2024-02-07 [email protected] Run Mac x64 build tests in postsubmit only (flutter/flutter#142334) 2024-02-07 [email protected] Copy the flutter version JSON file into the simulated Flutter SDK used by update_packages (flutter/flutter#143035) 2024-02-07 [email protected] Mark `Windows_android hot_mode_dev_cycle_win__benchmark` as no longer flaky (flutter/flutter#143016) 2024-02-07 [email protected] Dispose precached image info (flutter/flutter#143017) 2024-02-07 [email protected] Instrument CurvedAnimation. (flutter/flutter#143007) 2024-02-07 [email protected] Update _goldens_io.dart to generate failure images during a size mismâ�¦ (flutter/flutter#142177) 2024-02-07 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Activate InkSparkle on CanvasKit" (flutter/flutter#143036) 2024-02-07 [email protected] Activate InkSparkle on CanvasKit (flutter/flutter#138545) 2024-02-07 [email protected] [Windows] Fix signed/unsigned int comparison (flutter/flutter#142341) 2024-02-07 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Move native assets to `isolated/` directory" (flutter/flutter#143027) 2024-02-06 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Roll Flutter Engine from 808886312e2b to 07cdaab7f531 (18 revisions)" (flutter/flutter#143025) 2024-02-06 [email protected] Make destructiveRed a CupertinoDynamicColor (flutter/flutter#141364) 2024-02-06 [email protected] Move native assets to `isolated/` directory (flutter/flutter#142709) 2024-02-06 [email protected] Roll Flutter Engine from 808886312e2b to 07cdaab7f531 (18 revisions) (flutter/flutter#143005) 2024-02-06 [email protected] Fix CupertinoPageScaffold resizeToAvoidBottomInset (flutter/flutter#142776) 2024-02-06 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Add `AnimationStyle` to `showSnackBar`" (flutter/flutter#143001) 2024-02-06 [email protected] Material 3 - Tab indicator stretch animation (flutter/flutter#141954) 2024-02-06 [email protected] Add `AnimationStyle` to `showSnackBar` (flutter/flutter#142825) 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],[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

…#141954)

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

davidmartos96 mentioned this pull request Jan 22, 2024

M3 tabs spec issues #128696

Closed

3 tasks

davidmartos96 force-pushed the tab_indicator_curve branch from 5072d42 to e7bad4f Compare January 22, 2024 09:27

Piinks reviewed Jan 22, 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

davidmartos96 requested a review from Piinks January 23, 2024 15:42

Piinks reviewed Jan 29, 2024

View reviewed changes

Piinks added the a: fidelity Matching the OEM platforms better label Jan 29, 2024

Piinks approved these changes Feb 1, 2024

View reviewed changes

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

Comment on lines 601 to 610

Copy link

Contributor

Piinks Feb 1, 2024

Choose a reason for hiding this comment

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

Thanks for looking into this!

Piinks requested a review from TahaTesser February 1, 2024 20:29

TahaTesser requested changes Feb 2, 2024

View reviewed changes

davidmartos96 requested a review from TahaTesser February 5, 2024 18:48

TahaTesser approved these changes Feb 6, 2024

View reviewed changes

davidmartos96 and others added 4 commits February 6, 2024 16:28

Tab indicator stretch animation

783fd84

review comments

7304cfd

Add early return checking the animation status

ec8a19b

Apply suggestions from code review

4f8223e

Co-authored-by: Taha Tesser <[email protected]>

TahaTesser force-pushed the tab_indicator_curve branch from 657d0ed to 4f8223e Compare February 6, 2024 14:28

Piinks added the autosubmit Merge PR when tree becomes green via auto submit App label Feb 6, 2024

auto-submit bot merged commit 37fd173 into flutter:master Feb 6, 2024

engine-flutter-autoroll mentioned this pull request Feb 7, 2024

Roll Flutter from e6ba809b8a23 to 6a7baf573ec0 (20 revisions) flutter/packages#6072

Closed

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

37fd173 Material 3 - Tab indicator stretch animation (flutter/flutter…

9aa7024

…#141954)

engine-flutter-autoroll mentioned this pull request Feb 7, 2024

Roll Flutter from e6ba809b8a23 to 39d8df4f4fbd (21 revisions) flutter/packages#6073

Closed

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

37fd173 Material 3 - Tab indicator stretch animation (flutter/flutter…

a54ff6e

…#141954)

engine-flutter-autoroll mentioned this pull request Feb 7, 2024

Roll Flutter from e6ba809b8a23 to 900e060a1c0f (22 revisions) flutter/packages#6074

Closed

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

37fd173 Material 3 - Tab indicator stretch animation (flutter/flutter…

ea79ad3

…#141954)

engine-flutter-autoroll mentioned this pull request Feb 7, 2024

Roll Flutter from e6ba809b8a23 to 8431cae8843c (23 revisions) flutter/packages#6075

Merged

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

37fd173 Material 3 - Tab indicator stretch animation (flutter/flutter…

d5c4d5e

…#141954)

HansMuller mentioned this pull request Feb 9, 2024

Flutter Framework Team: Notable Commits #121415

Closed

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

37fd173 Material 3 - Tab indicator stretch animation (flutter/flutter…

b3de7b6

…#141954)

TahaTesser mentioned this pull request Jun 19, 2024

Add ability to customize TabBar indicator animation #150508

Closed

davidmartos96 deleted the tab_indicator_curve branch October 13, 2024 11:10

Material 3 - Tab indicator stretch animation #141954

Material 3 - Tab indicator stretch animation #141954

Uh oh!

Conversation

davidmartos96 commented Jan 22, 2024

Original animation - 300 ms

New animation - 300 ms

Original animation - 700 ms

New animation - 700 ms

Code sample

Pre-launch Checklist

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

Piinks Jan 29, 2024

Choose a reason for hiding this comment

Uh oh!

Piinks Jan 29, 2024

Choose a reason for hiding this comment

Uh oh!

davidmartos96 Jan 29, 2024

Choose a reason for hiding this comment

Uh oh!

davidmartos96 Jan 29, 2024

Choose a reason for hiding this comment

Uh oh!

davidmartos96 Jan 29, 2024

Choose a reason for hiding this comment

Uh oh!

Piinks Feb 1, 2024

Choose a reason for hiding this comment

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

Piinks Feb 1, 2024

Choose a reason for hiding this comment

Uh oh!

TahaTesser left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

TahaTesser left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants