Taha Tesser
2b34d78c23
Fix TabBar
glitchy elastic Tab
animation ( #161514 )
...
Fixes [M3 TabBar indicator animation broken both when swiping or
tapping](https://github.com/flutter/flutter/issues/160631 )
### Description
This refactors the elastic `Tab` animation. Added additional tests that
follows the elastic animation frame by frame and generates a golden
file.
### Code Sample
<details>
<summary>expand to view the code sample</summary>
```dart
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
// timeDilation = 10;
return MaterialApp(
home: ScrollConfiguration(
behavior: ScrollConfiguration.of(context).copyWith(dragDevices: <PointerDeviceKind>{
PointerDeviceKind.touch,
PointerDeviceKind.mouse,
}),
child: Directionality(
textDirection: TextDirection.ltr,
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 (`timeDilation = 10`)
https://github.com/user-attachments/assets/4f69f94b-0bcf-4813-b49f-06ff411435ca
### After (`timeDilation = 10`)
https://github.com/user-attachments/assets/65801c1c-d28f-4b42-870a-7140d5d3c4c3
| Before Test Results | After Test Results |
| --------------- | --------------- |
| <img
src="https://github.com/user-attachments/assets/72ae9fbe-fef9-44a0-9b86-5a4c31fd39cf "
/> | <img
src="https://github.com/user-attachments/assets/2545f35e-ac03-495d-a33b-72b9bc71299b "
/> |
## Pre-launch Checklist
- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [ ] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [ ] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.
If you need help, consider asking for advice on the #hackers-new channel
on [Discord].
<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview
[Tree Hygiene]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md
[test-exempt]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes
[Discord]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md
[Data Driven Fixes]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md
2025-01-15 11:23:41 +00:00
Hans Muller
4464d09db0
Updated TabBar and ToggleButtons examples ( #128088 )
...
Updated the ToggleButtons example and test to M3.
Updated the nested tabs test to avoid warnings like:
```
Warning: A call to tap() with finder "exactly one widget with type "Tab" which is an ancestor of text "Explore": Tab(text: "Explore", icon: Icon)" derived an Offset (Offset(666.7, 92.0)) that would not hit test on the specified widget.
```
2023-06-02 01:05:31 +00:00