Jackson Gardner 0a59deb98c
[CP-stable] Fix TabBar glitchy elastic Tab animation (#161783)
Original PR: https://github.com/flutter/flutter/pull/161514
Cherry-pick issue: https://github.com/flutter/flutter/issues/161664

Original PR description below:

Fixes [M3 TabBar indicator animation broken both when swiping or tapping](https://github.com/flutter/flutter/issues/160631)

This refactors the elastic `Tab` animation. Added additional tests that follows the elastic animation frame by frame and generates a golden file.

<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>

https://github.com/user-attachments/assets/4f69f94b-0bcf-4813-b49f-06ff411435ca

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" /> |

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/
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-17 16:11:26 +00:00
..
2024-10-01 22:45:08 +00:00
2024-10-01 22:45:08 +00:00
2024-10-01 22:45: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.