mirror of
https://github.com/flutter/flutter
synced 2024-08-24 18:36:03 +00:00
37fd173e03
Fixes #128696 (Motion checkbox) This PR updates the Material 3 tab indicator animation, so that it stretches, as it can be seen in the showcase videos in the specification https://m3.material.io/components/tabs/accessibility#13ed756b-fb35-4bb3-ac8c-1157e49031d8 One thing to note is that the Material 3 videos have a tab transition duration of 700 ms, whereas currently in Flutter the duration is 300 ms. I recorded 4 comparison videos to see the difference better (current animation vs stretch animation and 300 ms vs 700 ms) @Piinks You mentioned the other day that the default tab size could be updated in the future to better reflect the new size in M3. Maybe the `kTabScrollDuration` constant is another one that could end up being updated, as 300 ms for this animation feels too fast. Here are the comparison videos (Material 3 spec showcase on the left and Flutter on the right) ## Original animation - 300 ms https://github.com/flutter/flutter/assets/22084723/d5b594fd-52ea-4328-b8e2-ddb597c81f69 ## New animation - 300 ms https://github.com/flutter/flutter/assets/22084723/c822f7ab-3fc4-4403-a53b-872d047f6227 --- ## Original animation - 700 ms https://github.com/flutter/flutter/assets/22084723/fe39a32d-3d10-4c0d-98df-bd5e1c9336d0 ## New animation - 700 ms https://github.com/flutter/flutter/assets/22084723/8d4b0628-6312-40c2-bd99-b4bcb8e23ba9 --- ## Code sample ```dart void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return const MaterialApp( debugShowCheckedModeBanner: false, home: TabExample(), ); } } class TabExample extends StatelessWidget { const TabExample({super.key}); @override Widget build(BuildContext context) { return DefaultTabController( initialIndex: 1, length: 3, child: Scaffold( appBar: AppBar( title: const Text('My saved media'), bottom: const TabBar( tabs: <Widget>[ Tab( icon: Icon(Icons.videocam_outlined), text: "Video", ), Tab( icon: Icon(Icons.photo_outlined), text: "Photos", ), Tab( icon: Icon(Icons.audiotrack), text: "Audio", ), ], ), ), body: const TabBarView( children: <Widget>[ Center( child: Text("Tab 1"), ), Center( child: Text("Tab 2"), ), Center( child: Text("Tab 3"), ), ], ), ), ); } } ``` *If you had to change anything in the [flutter/tests] repo, include a link to the migration guide as per the [breaking change policy].* |
||
|---|---|---|
| .. | ||
| flutter | ||
| flutter_driver | ||
| flutter_goldens | ||
| flutter_localizations | ||
| flutter_test | ||
| flutter_tools | ||
| flutter_web_plugins | ||
| fuchsia_remote_debug_protocol | ||
| integration_test | ||
| analysis_options.yaml | ||