Kate Lovett
df676dc6e7
Add onHover and onFocusChange callbacks for TabBar ( #164816 )
...
Fixes https://github.com/flutter/flutter/issues/159444
Fixes https://github.com/flutter/flutter/issues/146089
This adds callbacks to TabBar for onHover and onFocusChange.
They pipe through to the underlying Inkwell widget that is wrapped
around each Tab of the TabBar during build.
#### Alternatives
- I did consider adding these callbacks to Tab instead, but felt that
going through TabBar would be better. If implemented in Tab, the user
would need to define callbacks for each tab. This PR makes it so there
is only need for one callback, and the associated Tab index is provided.
Also, since the Inkwell is applied in the TabBar, it's kludgy to have to
extract that from the Tabs _in_ TabBar later to pass on to the Inkwell.
👃
- Digging in to the requests in the linked issues, the user wants to
change various stylings in response to these events.
WidgetStateProperties were considered, but there are so many potential
styling properties that going this route would require greatly
increasing the API surface here. Tab.child allows the user to provide
whatever widget they would like to have as the content. Being able to
modify Tab.child in response to these events is a better way go instead
of exposing a ton of different properties.
## 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.
- [x] 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].
- [x] 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-03-13 01:32:05 +00:00
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
