animate cupertino time picker hour label #172850

MaironLucas · 2025-07-28T14:17:18Z

This PR adds the buildAnimatedLabel function to the CupertinoTimePicker widget, allowing the creation of a label with a FadeTransition in this component. It also uses this new function to build de hour label, because this label has this animation in the native implementation, as can be seen in the below visual reference:

trim.D05A047A-23D4-482B-A85D-A84FE2FD725F.MOV

Closes #27515

Before	After
time-picker-before.mp4	time-picker-after.mp4

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
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.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

MaironLucas · 2025-07-30T19:20:55Z

Some time ago, I opened a PR related to this(#164292), but my implementation differed from the native one. Now I'm bringing a new implementation that replicates the native behavior and will work for any suffix, supporting languages beyond English. I still need to make a few adjustments to the golden test, but overall, I believe it's ready for review.

dkwingsmt · 2025-08-06T18:30:11Z

Awesome! I'll take a look.

victorsanni

Hi, @MaironLucas, thanks for the PR. Can you run dart format packages/flutter/lib/src/cupertino/date_picker.dart to fix the CI failures?

packages/flutter/lib/src/cupertino/date_picker.dart

flutter-dashboard · 2025-08-13T21:12:54Z

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #172850 at sha 1b990f0

victorsanni · 2025-08-13T21:42:02Z

packages/flutter/lib/src/cupertino/date_picker.dart

@@ -53,6 +53,10 @@ const double _kTimerPickerLabelFontSize = 17.0;
 // The width of each column of the countdown time picker.
 const double _kTimerPickerColumnIntrinsicWidth = 106;

+// Value derived using a video captured from the Clock app and a video editor to
+// analyze animation duration.
+const Duration _kTimePickerLabelAnimationDuration = Duration(milliseconds: 200);


Can you specify what iOS device and version this value was observed on?

@dkwingsmt, could you help me with that? I used the video that you put in this comment to find this value.

Sure! It's an iPhone 16 pro running iOS 18.

packages/flutter/lib/src/cupertino/date_picker.dart

- Add AnimatedSwitcher to animate the label of hour when the picker changes ref flutter#27515

flutter-dashboard · 2025-08-14T13:12:07Z

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #172850 at sha 025b118

dkwingsmt

Sorry for the late review!

In general looks great (I love the findAnimatedLabelWithText util function and how the text is shown after splitting).

dkwingsmt · 2025-08-20T03:50:39Z

packages/flutter/lib/src/cupertino/date_picker.dart

@@ -53,6 +53,10 @@ const double _kTimerPickerLabelFontSize = 17.0;
 // The width of each column of the countdown time picker.
 const double _kTimerPickerColumnIntrinsicWidth = 106;

+// Value derived using a video captured from the Clock app and a video editor to
+// analyze animation duration.
+const Duration _kTimePickerLabelAnimationDuration = Duration(milliseconds: 200);


Sure! It's an iPhone 16 pro running iOS 18.

dkwingsmt · 2025-08-22T07:42:02Z

packages/flutter/lib/src/cupertino/date_picker.dart

+  ///
+  /// [labelBuilder] is a function that takes a value and returns the full label text.
+  /// [currentValue] is the current value to display.
+  /// [baseValue] is the value used to split the label into prefix and suffix.


Since baseValue is always 1, i recommend removing it from _buildAnimatedLabel's parameters and just say final String baseLabel = labelBuilder(1); with a short comment.

dkwingsmt · 2025-08-22T08:03:53Z

packages/flutter/lib/src/cupertino/date_picker.dart

+  }) {
+    final String baseLabel = labelBuilder(baseValue);
+    final String currentLabel = labelBuilder(currentValue);
+    final List<String> parts = currentLabel.split(baseLabel);


Instead of split, use currentLabel.substring(baseLabel.length), which is IMO clearer and also avoids a (not-yet-existing) problem where baseLabel appears for multiple times.

Also, add a comment that we only support the case where baseLabel is a prefix of (or equal to) currentLabel, since we haven't observed other cases.

Also, if you want to be super safe, instead of showing baseLabel as the prefix, show currentLabel.substring(0, baseLabel.length) to avoid the (not-yet-existing) problem where baseLabel is not a prefix.

dkwingsmt · 2025-08-22T08:12:46Z

packages/flutter/lib/src/cupertino/date_picker.dart

+                      child: AnimatedSwitcher(
+                        duration: _kTimePickerLabelAnimationDuration,
+                        transitionBuilder: (Widget child, Animation<double> animation) {
+                          return FadeTransition(opacity: animation, child: child);


Can you explain why you need the custom transition builder to remove the key from the FadeTransition?

dkwingsmt · 2025-08-22T08:13:44Z

packages/flutter/test/cupertino/date_picker_test.dart

@@ -2636,6 +2657,66 @@ void main() {
    lastOffset = tester.getTopLeft(find.text('11'));
    expect(tester.getTopLeft(find.text('2022')).dy, lastOffset.dy);
  });
+
+  group('CupertinoTimerPicker hour label animation', () {
+    testWidgets('animates from plural to singular when scrolling from 2 to 1', (


It seems to me that these tests would also pass if the text is not animated. If so, can you think of a way to test it? Maybe find the FadeTransition / RenderAnimatedOpacity around the s text and verify its opacity?

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: cupertino flutter/packages/flutter/cupertino repository labels Jul 28, 2025

MaironLucas force-pushed the 27515 branch from 3b44d14 to ddc5c79 Compare July 30, 2025 14:27

MaironLucas marked this pull request as ready for review July 30, 2025 19:21

dkwingsmt self-requested a review August 6, 2025 18:29

dkwingsmt requested a review from victorsanni August 6, 2025 18:30

victorsanni reviewed Aug 7, 2025

View reviewed changes

packages/flutter/lib/src/cupertino/date_picker.dart Outdated Show resolved Hide resolved

packages/flutter/lib/src/cupertino/date_picker.dart Outdated Show resolved Hide resolved

packages/flutter/lib/src/cupertino/date_picker.dart Outdated Show resolved Hide resolved

MaironLucas force-pushed the 27515 branch 2 times, most recently from d7712fb to 1b990f0 Compare August 13, 2025 20:40

MaironLucas requested a review from victorsanni August 13, 2025 20:41

flutter-dashboard bot added the will affect goldens Changes to golden files label Aug 13, 2025

victorsanni reviewed Aug 13, 2025

View reviewed changes

feat: animate cupertino time picker label

025b118

- Add AnimatedSwitcher to animate the label of hour when the picker changes ref flutter#27515

MaironLucas force-pushed the 27515 branch from 1b990f0 to 025b118 Compare August 14, 2025 12:38

dkwingsmt reviewed Aug 22, 2025

View reviewed changes

animate cupertino time picker hour label #172850

Are you sure you want to change the base?

animate cupertino time picker hour label #172850

Conversation

MaironLucas commented Jul 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-launch Checklist

Uh oh!

MaironLucas commented Jul 30, 2025

Uh oh!

dkwingsmt commented Aug 6, 2025

Uh oh!

victorsanni left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

flutter-dashboard bot commented Aug 13, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

flutter-dashboard bot commented Aug 14, 2025

Uh oh!

dkwingsmt left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

MaironLucas commented Jul 28, 2025 •

edited

Loading

dkwingsmt left a comment •

edited

Loading