Skip to content

Commit 0830a36

Browse files
authored
Add support for M3 motion (#129942)
## Description This adds support for M3 easing and duration tokens. This PR includes these changes: * Generation of duration and easing constants, in `Durations` and `Easing`, respectively (`Curves` is already taken in the `animation` library) * Add 3 Dart fixes Once this is merged, I'll migrate packages/plugins/customers and then uncomment the deprecation notices for the 3 M2 curves, all of which have 1:1 replacements. ## Related Issues - Fixes flutter/flutter#116525 ## Tests - Added Dart fix tests ## 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] 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/wiki/Tree-hygiene#overview [Tree Hygiene]: https://github.com/flutter/flutter/wiki/Tree-hygiene [test-exempt]: https://github.com/flutter/flutter/wiki/Tree-hygiene#tests [Flutter Style Guide]: https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo [Features we expect every widget to implement]: https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo#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/wiki/Tree-hygiene#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/wiki/Chat
1 parent b54e83e commit 0830a36

File tree

10 files changed

+407
-1
lines changed

10 files changed

+407
-1
lines changed

dev/tools/gen_defaults/bin/gen_defaults.dart

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import 'package:gen_defaults/input_chip_template.dart';
3737
import 'package:gen_defaults/input_decorator_template.dart';
3838
import 'package:gen_defaults/list_tile_template.dart';
3939
import 'package:gen_defaults/menu_template.dart';
40+
import 'package:gen_defaults/motion_template.dart';
4041
import 'package:gen_defaults/navigation_bar_template.dart';
4142
import 'package:gen_defaults/navigation_drawer_template.dart';
4243
import 'package:gen_defaults/navigation_rail_template.dart';
@@ -131,6 +132,7 @@ Future<void> main(List<String> args) async {
131132
ListTileTemplate('LisTile', '$materialLib/list_tile.dart', tokens).updateFile();
132133
InputDecoratorTemplate('InputDecorator', '$materialLib/input_decorator.dart', tokens).updateFile();
133134
MenuTemplate('Menu', '$materialLib/menu_anchor.dart', tokens).updateFile();
135+
MotionTemplate('Motion', '$materialLib/motion.dart', tokens, tokenLogger).updateFile();
134136
NavigationBarTemplate('NavigationBar', '$materialLib/navigation_bar.dart', tokens).updateFile();
135137
NavigationDrawerTemplate('NavigationDrawer', '$materialLib/navigation_drawer.dart', tokens).updateFile();
136138
NavigationRailTemplate('NavigationRail', '$materialLib/navigation_rail.dart', tokens).updateFile();

dev/tools/gen_defaults/generated/used_tokens.csv

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -856,6 +856,31 @@ md.sys.elevation.level2,
856856
md.sys.elevation.level3,
857857
md.sys.elevation.level4,
858858
md.sys.elevation.level5,
859+
md.sys.motion.duration.extra-long1Ms,
860+
md.sys.motion.duration.extra-long2Ms,
861+
md.sys.motion.duration.extra-long3Ms,
862+
md.sys.motion.duration.extra-long4Ms,
863+
md.sys.motion.duration.long1Ms,
864+
md.sys.motion.duration.long2Ms,
865+
md.sys.motion.duration.long3Ms,
866+
md.sys.motion.duration.long4Ms,
867+
md.sys.motion.duration.medium1Ms,
868+
md.sys.motion.duration.medium2Ms,
869+
md.sys.motion.duration.medium3Ms,
870+
md.sys.motion.duration.medium4Ms,
871+
md.sys.motion.duration.short1Ms,
872+
md.sys.motion.duration.short2Ms,
873+
md.sys.motion.duration.short3Ms,
874+
md.sys.motion.duration.short4Ms,
875+
md.sys.motion.easing.emphasized.accelerate,
876+
md.sys.motion.easing.emphasized.decelerate,
877+
md.sys.motion.easing.legacy,
878+
md.sys.motion.easing.legacy.accelerate,
879+
md.sys.motion.easing.legacy.decelerate,
880+
md.sys.motion.easing.linear,
881+
md.sys.motion.easing.standard,
882+
md.sys.motion.easing.standard.accelerate,
883+
md.sys.motion.easing.standard.decelerate,
859884
md.sys.shape.corner.extra-large,
860885
md.sys.shape.corner.extra-large.top,
861886
md.sys.shape.corner.extra-small,
Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
// Copyright 2014 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
import 'template.dart';
6+
import 'token_logger.dart';
7+
8+
class MotionTemplate extends TokenTemplate {
9+
/// Since we generate the tokens dynamically, we need to store them and log
10+
/// them manually, instead of using [getToken].
11+
MotionTemplate(String blockName, String fileName, this.tokens, this.tokensLogger) : super(blockName, fileName, tokens);
12+
Map<String, dynamic> tokens;
13+
TokenLogger tokensLogger;
14+
15+
// List of duration tokens.
16+
late List<MapEntry<String, dynamic>> durationTokens = tokens.entries.where(
17+
(MapEntry<String, dynamic> entry) => entry.key.contains('.duration.')
18+
).toList()
19+
..sort(
20+
(MapEntry<String, dynamic> a, MapEntry<String, dynamic> b) => (a.value as double).compareTo(b.value as double)
21+
);
22+
23+
// List of easing curve tokens.
24+
late List<MapEntry<String, dynamic>> easingCurveTokens = tokens.entries.where(
25+
(MapEntry<String, dynamic> entry) => entry.key.contains('.easing.')
26+
).toList()
27+
..sort(
28+
// Sort the legacy curves at the end of the list.
29+
(MapEntry<String, dynamic> a, MapEntry<String, dynamic> b) => a.key.contains('legacy') ? 1 : a.key.compareTo(b.key)
30+
);
31+
32+
String durationTokenString(String token, dynamic tokenValue) {
33+
tokensLogger.log(token);
34+
final String tokenName = token.split('.').last.replaceAll('-', '').replaceFirst('Ms', '');
35+
final int milliseconds = (tokenValue as double).toInt();
36+
return
37+
'''
38+
/// The $tokenName duration (${milliseconds}ms) in the Material specification.
39+
///
40+
/// See also:
41+
///
42+
/// * [M3 guidelines: Duration tokens](https://m3.material.io/styles/motion/easing-and-duration/tokens-specs#c009dec6-f29b-4503-b9f0-482af14a8bbd)
43+
/// * [M3 guidelines: Applying easing and duration](https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration)
44+
static const Duration $tokenName = Duration(milliseconds: $milliseconds);
45+
''';
46+
}
47+
48+
String easingCurveTokenString(String token, dynamic tokenValue) {
49+
tokensLogger.log(token);
50+
final String tokenName = token
51+
.replaceFirst('md.sys.motion.easing.', '')
52+
.replaceAllMapped(RegExp(r'[-\.](\w)'), (Match match) {
53+
return match.group(1)!.toUpperCase();
54+
});
55+
return '''
56+
/// The $tokenName easing curve in the Material specification.
57+
///
58+
/// See also:
59+
///
60+
/// * [M3 guidelines: Easing tokens](https://m3.material.io/styles/motion/easing-and-duration/tokens-specs#433b1153-2ea3-4fe2-9748-803a47bc97ee)
61+
/// * [M3 guidelines: Applying easing and duration](https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration)
62+
static const Curve $tokenName = $tokenValue;
63+
''';
64+
}
65+
66+
@override
67+
String generate() => '''
68+
/// The set of durations in the Material specification.
69+
///
70+
/// See also:
71+
///
72+
/// * [M3 guidelines: Duration tokens](https://m3.material.io/styles/motion/easing-and-duration/tokens-specs#c009dec6-f29b-4503-b9f0-482af14a8bbd)
73+
/// * [M3 guidelines: Applying easing and duration](https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration)
74+
abstract final class Durations {
75+
${durationTokens.map((MapEntry<String, dynamic> entry) => durationTokenString(entry.key, entry.value)).join('\n')}}
76+
77+
78+
// TODO(guidezpl): Improve with description and assets, b/289870605
79+
80+
/// The set of easing curves in the Material specification.
81+
///
82+
/// See also:
83+
///
84+
/// * [M3 guidelines: Easing tokens](https://m3.material.io/styles/motion/easing-and-duration/tokens-specs#433b1153-2ea3-4fe2-9748-803a47bc97ee)
85+
/// * [M3 guidelines: Applying easing and duration](https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration)
86+
/// * [Curves], for a collection of non-Material animation easing curves.
87+
abstract final class Easing {
88+
${easingCurveTokens.map((MapEntry<String, dynamic> entry) => easingCurveTokenString(entry.key, entry.value)).join('\n')}}
89+
''';
90+
}

packages/flutter/lib/fix_data/fix_material/fix_material.yaml

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -897,4 +897,43 @@ transforms:
897897
oldName: 'showTrackOnHover'
898898
newName: 'trackVisibility'
899899

900+
# Changes made in https://github.com/flutter/flutter/pull/129942
901+
- title: "Migrate to 'Easing.legacy'"
902+
date: 2023-07-04
903+
element:
904+
uris: [ 'material.dart' ]
905+
variable: 'standardEasing'
906+
changes:
907+
- kind: 'replacedBy'
908+
newElement:
909+
uris: [ 'material.dart' ]
910+
field: legacy
911+
inClass: Easing
912+
913+
# Changes made in https://github.com/flutter/flutter/pull/129942
914+
- title: "Migrate to 'Easing.legacyAccelerate'"
915+
date: 2023-07-04
916+
element:
917+
uris: [ 'material.dart' ]
918+
variable: 'accelerateEasing'
919+
changes:
920+
- kind: 'replacedBy'
921+
newElement:
922+
uris: [ 'material.dart' ]
923+
field: legacyAccelerate
924+
inClass: Easing
925+
926+
# Changes made in https://github.com/flutter/flutter/pull/129942
927+
- title: "Migrate to 'Easing.legacyDecelerate'"
928+
date: 2023-07-04
929+
element:
930+
uris: [ 'material.dart' ]
931+
variable: 'decelerateEasing'
932+
changes:
933+
- kind: 'replacedBy'
934+
newElement:
935+
uris: [ 'material.dart' ]
936+
field: legacyDecelerate
937+
inClass: Easing
938+
900939
# Before adding a new fix: read instructions at the top of this file.

packages/flutter/lib/material.dart

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ export 'src/material/menu_button_theme.dart';
122122
export 'src/material/menu_style.dart';
123123
export 'src/material/menu_theme.dart';
124124
export 'src/material/mergeable_material.dart';
125+
export 'src/material/motion.dart';
125126
export 'src/material/navigation_bar.dart';
126127
export 'src/material/navigation_bar_theme.dart';
127128
export 'src/material/navigation_drawer.dart';

packages/flutter/lib/src/animation/curves.dart

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1354,6 +1354,7 @@ class ElasticInOutCurve extends Curve {
13541354
///
13551355
/// * [Curve], the interface implemented by the constants available from the
13561356
/// [Curves] class.
1357+
/// * [Easing], for the Material animation curves.
13571358
abstract final class Curves {
13581359
/// A linear animation curve.
13591360
///
@@ -1741,7 +1742,7 @@ abstract final class Curves {
17411742
///
17421743
/// See also:
17431744
///
1744-
/// * [standardEasing], the name for this curve in the Material specification.
1745+
/// * [Easing.legacy], the name for this curve in the Material specification.
17451746
static const Cubic fastOutSlowIn = Cubic(0.4, 0.0, 0.2, 1.0);
17461747

17471748
/// A cubic animation curve that starts quickly, slows down, and then ends

packages/flutter/lib/src/material/curves.dart

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import 'package:flutter/animation.dart';
66

77
// The easing curves of the Material Library
88

9+
// TODO(guidezpl): deprecate the three curves below once customers (packages/plugins) are migrated
10+
911
/// The standard easing curve in the Material specification.
1012
///
1113
/// Elements that begin and end at rest use standard easing.

0 commit comments

Comments
 (0)