mirror of
https://github.com/flutter/flutter.git
synced 2026-02-20 02:29:02 +08:00
de2dbf4eae
fixes [[Material3] TabBar indicator stretch effect behaving weirdly with long tabs](https://github.com/flutter/flutter/issues/149662)
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.
20f92dfb51/lib/java/com/google/android/material/tabs/ElasticTabIndicatorInterpolator.java (L46-L78)
### Code sample
<details>
<summary>expand to view the code sample</summary>
```dart
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')),
],
),
),
),
),
);
}
}
```
</details>
### Before
https://github.com/flutter/flutter/assets/48603081/618d0ba9-40a5-458f-9fdc-5330505a6711
### After
https://github.com/flutter/flutter/assets/48603081/b7fa851e-e7a6-4b66-b77d-f88c7f4381da
Flutter
Flutter is a new way to build high-performance, cross-platform mobile, web, and desktop apps. Flutter is optimized for today's — and tomorrow's — mobile and desktop devices. We are focused on low-latency input and high frame rates on all platforms.
See the getting started guide for information about using Flutter.