M3 TabBar indicator animation broken both when swiping or tapping #160631
Description
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
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
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.Metadata
Metadata
Assignees
Labels
Important issues not at the top of the work listAnimation APIsIt was better in the past than it is nowflutter/packages/flutter/material repository.Found to occur in 3.27Found to occur in 3.28flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onIssue is closed as already fixed in a newer versionOwned by Design Languages teamTriaged by Design Languages team
Type
Projects
Status