flutter/examples
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
..
api Fix TabBar glitchy elastic Tab animation (#161514) 2025-01-15 11:23:41 +00:00
flutter_view Bump characters, collection, meta (#161066) 2025-01-03 02:23:10 +00:00
hello_world Update package revisions to latest (#161525) 2025-01-14 18:22:42 +00:00
image_list Update package revisions to latest (#161525) 2025-01-14 18:22:42 +00:00
layers Update package revisions to latest (#161525) 2025-01-14 18:22:42 +00:00
platform_channel Update package revisions to latest (#161525) 2025-01-14 18:22:42 +00:00
platform_channel_swift Update package revisions to latest (#161525) 2025-01-14 18:22:42 +00:00
platform_view Bump characters, collection, meta (#161066) 2025-01-03 02:23:10 +00:00
splash Update package revisions to latest (#161525) 2025-01-14 18:22:42 +00:00
texture Update package revisions to latest (#161525) 2025-01-14 18:22:42 +00:00
.clang-format Implement Linux part of examples (#108068) 2022-12-08 08:44:11 +13:00
flutter_gallery.readme Move flutter_gallery to the testing folder (#52532) 2020-03-16 10:31:42 +01:00
README.md Update flutter.dev links from misc packages to more permanent destinations (#150532) 2024-06-20 23:09:08 +00:00

Flutter Examples

This directory contains several examples of using Flutter. To run an example, use flutter run inside that example's directory. See the getting started guide to install the flutter tool.

For additional samples, see the flutter/samples repo.

Available examples include:

Notes

Note on Gradle wrapper files in .gitignore:

Gradle wrapper files should normally be checked into source control. The example projects don't do that to avoid having several copies of the wrapper binary in the Flutter repo. Instead, the Gradle wrapper is injected by Flutter tooling, and the wrapper files are .gitignore'd to avoid making the Flutter repository dirty as a side effect of running the examples.