Commit Graph

5 Commits

Author SHA1 Message Date
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
Michael Goderbauer
5491c8c146
Auto-format Framework (#160545)
This auto-formats all *.dart files in the repository outside of the
`engine` subdirectory and enforces that these files stay formatted with
a presubmit check.

**Reviewers:** Please carefully review all the commits except for the
one titled "formatted". The "formatted" commit was auto-generated by
running `dev/tools/format.sh -a -f`. The other commits were hand-crafted
to prepare the repo for the formatting change. I recommend reviewing the
commits one-by-one via the "Commits" tab and avoiding Github's "Files
changed" tab as it will likely slow down your browser because of the
size of this PR.

---------

Co-authored-by: Kate Lovett <katelovett@google.com>
Co-authored-by: LongCatIsLooong <31859944+LongCatIsLooong@users.noreply.github.com>
2024-12-19 20:06:21 +00:00
Taha Tesser
bba6ea9a2d
Introduce TabBar.indicatorAnimation to customize tab indicator animation (#151746)
fixes [Add ability to customize `TabBar` indicator animation](https://github.com/flutter/flutter/issues/150508)

Similar option exist on Android
https://developer.android.com/reference/com/google/android/material/tabs/TabLayout#setTabIndicatorAnimationMode(int)

### Dartpad Example Preview
<img width="874" alt="Screenshot 2024-07-12 at 17 36 08" src="https://github.com/user-attachments/assets/e349c5aa-ee5d-46ce-9e44-4f02346603bd">

### Linear vs Elastic tab indicator animation

https://github.com/user-attachments/assets/d7ae3ae4-ae52-4ccd-89b1-75908bf8a34d
2024-07-26 11:54:28 +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
Pierre-Louis
02d5c7595b
Add support for secondary tab bar (#122756)
Add support for secondary tab bar
2023-03-23 22:49:59 +00:00