M3 TabBar indicator animation broken both when swiping or tapping

Steps to reproduce

1.- Tap on a tab or swipe to one, the farther the tab is from the current index, the more the animation will break.

Expected results

TabBar indictator should smoothly go from one tab to another.

Actual results

1.- If going back to a tab on the left , for example index 3 to 0, the indicator moves for a few frames to the right as if it would transition to the next tab (index 4) then suddenly jumps around between tabs until it reaches the destination (index 0).

2.- If going forward to a tab on the right, for example index 0 to 3, the animation jumps around the tabs until it reaches the right beside the target tab (index 2), only then it starts lerping smoothly to the target tab. (index 3)

3.- Going from, for example, index 0 to 1 or 1 to 0, works just fine.

Code sample

import 'package:flutter/material.dart';
//time dilation
import 'package:flutter/scheduler.dart' show timeDilation;

void main() {
  timeDilation = 15.0;
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          // This is the theme of your application.
          //
          // TRY THIS: Try running your application with "flutter run". You'll see
          // the application has a purple toolbar. Then, without quitting the app,
          // try changing the seedColor in the colorScheme below to Colors.green
          // and then invoke "hot reload" (save your changes or press the "hot
          // reload" button in a Flutter-supported IDE, or press "r" if you used
          // the command line to start the app).
          //
          // Notice that the counter didn't reset back to zero; the application
          // state is not lost during the reload. To reset the state, use hot
          // restart instead.
          //
          // This works for code too, not just values: Most code changes can be
          // tested with just a hot reload.
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: DefaultTabController(
          length: 6,
          child: Scaffold(
            appBar: AppBar(
              bottom: const TabBar(
                indicatorSize: TabBarIndicatorSize.label,
                tabs: [
                  Tab(icon: Icon(Icons.directions_car)),
                  Tab(icon: Icon(Icons.directions_transit)),
                  Tab(icon: Icon(Icons.directions_bike)),
                  Tab(icon: Icon(Icons.directions_car)),
                  Tab(icon: Icon(Icons.directions_transit)),
                  Tab(icon: Icon(Icons.directions_bike)),
                ],
              ),
            ),
            body: const TabBarView(
              children: [
                Icon(Icons.directions_car),
                Icon(Icons.directions_transit),
                Icon(Icons.directions_bike),
                Icon(Icons.directions_car),
                Icon(Icons.directions_transit),
                Icon(Icons.directions_bike),
              ],
            ),
          ),
        ));
  }
}

Screenshots or Video

Screenshots / Video demonstration

Screen.Recording.2024-12-19.at.6.29.23.p.m.mov

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

oscarsaenz@mac flutter_application_1 % flutter doctor -v
[✓] Flutter (Channel stable, 3.27.1, on macOS 15.2 24C101 darwin-arm64, locale en-MX)
    • Flutter version 3.27.1 on channel stable at /Users/oscarsaenz/Developer/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 17025dd882 (3 days ago), 2024-12-17 03:23:09 +0900
    • Engine revision cb4b5fff73
    • Dart version 3.6.0
    • DevTools version 2.40.2

[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/oscarsaenz/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/to/macos-android-setup for more details.

[✓] Xcode - develop for iOS and macOS (Xcode 16.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16C5032a
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)

[✓] VS Code (version 1.96.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.102.0

[✓] Connected device (5 available)
    • Oscar’s iPhone (mobile)         • 00008130-001C38821A91001C            • ios            • iOS 18.2 22C152
    • iPhone 16 Pro Max (mobile)      • 8142E2CA-7553-425F-8473-34CF31EF1030 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-18-2 (simulator)
    • macOS (desktop)                 • macos                                • darwin-arm64   • macOS 15.2 24C101 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad                • darwin         • macOS 15.2 24C101 darwin-arm64
    • Chrome (web)                    • chrome                               • web-javascript • Google Chrome 131.0.6778.205

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

Reproducible using the sample and steps outlined above. This appears to be a regression as this seems to work as expected on 3.24.5 but not 3.27 onwards

Latest stable & master	3.24.5
Screen.Recording.2024-12-20.at.9.13.12.AM.mov	Screen.Recording.2024-12-20.at.9.14.24.AM.mov

flutter doctor -v

[!] Flutter (Channel [user-branch], 3.24.5, on macOS 15.1.1 24B91 darwin-arm64, locale en-US)
    ! Flutter version 3.24.5 on channel [user-branch] at /Users/deanli/dev/switcher
      Currently on an unknown channel. Run `flutter channel` to switch to an official channel.
      If that doesn't fix the issue, reinstall Flutter by following instructions at
      https://flutter.dev/setup.
    • Framework revision dec2ee5c1f (5 weeks ago), 2024-11-13 11:13:06 -0800
    • Engine revision a18df97ca5
    • Dart version 3.5.4
    • DevTools version 2.37.3

[✓] Flutter (Channel stable, 3.27.1, on macOS 15.1.1 24B91 darwin-arm64, locale en-US)
    • Flutter version 3.27.1 on channel stable at /Users/deanli/dev/stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 17025dd882 (4 days ago), 2024-12-17 03:23:09 +0900
    • Engine revision cb4b5fff73
    • Dart version 3.6.0
    • DevTools version 2.40.2

[!] Flutter (Channel master, 3.28.0-2.0.pre.38549, on macOS 15.1.1 24B91 darwin-arm64, locale en-US)
    • Flutter version 3.28.0-2.0.pre.38549 on channel master at /Users/deanli/dev/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision a45ecdcd02 (5 hours ago), 2024-12-19 20:29:36 -0800
    • Engine revision a45ecdcd02
    • Dart version 3.7.0 (build 3.7.0-260.0.dev)
    • DevTools version 2.41.0

It appears the issue only shows up on the elastic animation (TabBar widget property 'indicatorAnimation' set to TabIndicatorAnimation.elastic), linear appears to work just fine.

Thanks for the report! I've a fix and updated method to test to test this and prevent such bug in the future. I'll file the PR first thing on Monday morning.

Fix `TabBar` glitchy elastic `Tab` animation (#161514)

Fix `TabBar` glitchy elastic `Tab` animation (flutter#161514)

[CP-stable] Fix `TabBar` glitchy elastic `Tab` animation (flutter#161514

[CP-stable] Fix `TabBar` glitchy elastic `Tab` animation (#161783)

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

M3 TabBar indicator animation broken both when swiping or tapping #160631

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

M3 TabBar indicator animation broken both when swiping or tapping #160631

Description

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Activity

danagbemava-nc commented on Dec 20, 2024

ofsp6070 commented on Dec 20, 2024

TahaTesser commented on Jan 10, 2025

github-actions commented on Jan 29, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions