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