`AnimatedValue<T>` for implicit animations #154378

nate-thegrate · 2024-08-29T23:38:02Z

This pull request has a few goals:

Improve performance by updating animations each frame without rebuilding the widget tree
Improve code style by factoring out type casts and dynamic annotations
Improve the developer experience with an "implicit animation" API that requires 1 class declaration instead of 2

Before

class AnimatedPadding extends ImplicitlyAnimatedWidget {
  const AnimatedPadding({
    super.key,
    required this.padding,
    super.curve,
    required super.duration,
    super.onEnd,
    this.child,
  });

  final EdgeInsetsGeometry padding;
  final Widget? child;

  @override
  AnimatedWidgetBaseState<AnimatedPadding> createState() => _AnimatedPaddingState();
}

class _AnimatedPaddingState extends AnimatedWidgetBaseState<AnimatedPadding> {
  EdgeInsetsGeometryTween? _padding;

  @override
  void forEachTween(TweenVisitor<dynamic> visitor) {
    _padding = visitor(
      _padding,
      widget.padding,
      (dynamic value) => EdgeInsetsGeometryTween(begin: value as EdgeInsetsGeometry),
    ) as EdgeInsetsGeometryTween?;
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: _padding!
        .evaluate(animation)
        .clamp(EdgeInsets.zero, EdgeInsetsGeometry.infinity),
      child: widget.child,
    );
  }
}

After

class AnimatedPadding extends AnimatedValue<EdgeInsetsGeometry> {
  const AnimatedPadding({
    super.key,
    required EdgeInsetsGeometry padding,
    super.curve,
    super.duration,
    super.onEnd,
    super.child,
  }) : super(value: padding, lerp: EdgeInsetsGeometry.lerp);
  
  @override
  Widget build(BuildContext context, Animation<EdgeInsetsGeometry> animation) {
    return PaddingTransition(padding: animation, child: child);
  }
}

ValueAnimation is essentially "ValueNotifier but with smooth transitions".

Before

class _MyWidgetState extends State<MyWidget> {
  var _alignment = Alignment.bottomCenter;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) {
        setState(() {
          _alignment = Alignment.topCenter;
        });
      },
      onExit: (_) {
        setState(() {
          _alignment = Alignment.bottomCenter;
        });
      },
      child: AnimatedAlign(
        alignment: _alignment,
        duration: Durations.medium2,
        curve: Curves.ease,
        // ...
      ),
    );
  }
}

After

class _MyWidgetState extends State<MyWidget> with SingleTickerProviderStateMixin {
  // Duration and Curve are pulled from an ancestor DefaultAnimationStyle,
  // and `Alignment.lerp()` will be used to transition between values.
  late final _alignment = ValueAnimation(Alignment.bottomCenter, vsync: this);

  @override
  void dispose() {
    _alignment.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) => _alignment.value = Alignment.topCenter,
      onExit: (_) => _alignment.value = Alignment.bottomCenter,
      child: AlignTransition(
        alignment: _alignment,
        // ...
      ),
    );
  }
}

This API comes without an AnimationController's boilerplate. The MouseRegion no longer needs to rebuild at all, and when combined with #159757, the "build" stage of the pipeline can be skipped entirely after each animation tick.

packages/flutter/test/widgets/implicit_animations_test.dart

examples/api/lib/widgets/implicit_animations/animated_value.0.dart

PurplePolyhedron · 2024-08-30T08:39:25Z

I personally think the AnimatedValue.builder is the easiest and suitable for most cases (and TweenAnimationBuilder is more difficult to use).

It could be a bit confusing to have an abstract class named AnimatedValue while all the other AnimatedWidgets are concrete. How do you feel about using a format similar to StreamBuilderBase and StreamBuilder?

nate-thegrate · 2024-08-30T16:46:47Z

Thanks @PurplePolyhedron! $\textcolor{green}{\textsf{+826 }}\textcolor{#d1242f}{\textsf{−153}}$ is a lot of diffs to go through; I appreciate you taking time to give feedback :)

I personally think the AnimatedValue.builder is the easiest and suitable for most cases

100% agree. I've been using this branch to work on my own Flutter project and was surprised at how often I used some variation of that constructor.

a format similar to StreamBuilderBase and StreamBuilder

I understand that this likely won't happen, but my preference would be to change those stream builder classes instead.

The style guide has a rule to encourage grouping constants under a class name rather than having them in the global namespace, and I'm a huge fan, since it makes autofill suggestions much less cluttered.

The disadvantage of turning a generative constructor into a factory is that you're no longer able to extend the class. But for "builder" classes, you'd never want to do it anyway:

class MyWidget extends Builder {
  MyWidget({super.key})
      : super(builder: (context) {
          return Column(children: [
            // ...
          ]);
        });
}

Extending StatelessWidget directly allows having a const constructor, not to mention how much nicer it looks when the build method isn't passed as a super-constructor argument.

I personally feel that organizing builder classes as constructors under the same namespace (like how PageView.builder() and SliverGrid.builder() are set up) is intuitive and also great for de-cluttering autofill suggestions. Perhaps at some point we could switch Builder to Widget.builder(), but it's probably not a huge deal.

goderbauer

AnimatedValue<T> looks like a nice simplification.

examples/api/lib/widgets/implicit_animations/animated_value.0.dart

packages/flutter/lib/animation.dart

packages/flutter/lib/src/widgets/implicit_animations.dart

examples/api/lib/widgets/implicit_animations/animated_value.0.dart

packages/flutter/lib/src/widgets/implicit_animations.dart

nate-thegrate · 2024-09-05T19:53:23Z

Okay, here is a naming scheme that I'm decently happy with:

AnimatedValue	value	initialValue
`.builder()`	—	initial
AnimatedRotation	turns	initialTurns
AnimatedScale	scale	initialScale

I've changed the base AnimatedValue() constructor so that there aren't any positional arguments, and all subclasses follow a foo / initialFoo pattern.

AnimatedValue.builder() is meant to be flexible, so it doesn't have an explicit value name.

nate-thegrate

Thanks for the review!

packages/flutter/lib/src/widgets/implicit_animations.dart

nate-thegrate · 2024-09-09T21:29:01Z

packages/flutter/lib/src/widgets/implicit_animations.dart

+      } else {
+        from = value;
+        target = newTarget;
+        value = widget.lerp(from, target, 0)!;


The existing lerp() methods are set up with nullable parameters and a nullable return type, for example:

class Color { static Color? lerp(Color? a, Color? b, double t) { // ... } }

The idea is that passing a non-null Color to a and b always gives a non-null output, but there's also an option to lerp to/from null, which could cause the output to be null.

Since this widget's value is non-nullable, we're guaranteed that the lerp function won't ever be passed a null argument, so the only way this could fail is with a user-defined callback that can return null based on non-null inputs.

handle the null case gracefully

That's a great idea—rather than a confusing "null-check operator used on a null value", we could have an assert with a useful message. I'll go ahead and add that, thanks!

packages/flutter/lib/src/widgets/implicit_animations.dart

examples/api/lib/widgets/implicit_animations/animated_value.0.dart

packages/flutter/lib/animation.dart

nate-thegrate · 2024-09-20T23:58:13Z

Marking as a draft, since I've made progress on flutter.dev/go/zero-rebuilds that has some overlap with this PR. Will hopefully get it figured out over the weekend!

goderbauer · 2024-12-03T23:41:23Z

@nate-thegrate says he is still looking at this.

nate-thegrate · 2024-12-10T01:07:02Z

An update, finally! 🥳

The plan is to break this addition into multiple PRs, starting with #160005. But feel free to leave any feedback regarding the overall direction here!

flutter-dashboard · 2024-12-19T01:10:02Z

It looks like this pull request may not have tests. Please make sure to add tests before merging. If you need an exemption, contact "@test-exemption-reviewer" in the #hackers channel in Discord (don't just cc them here, they won't see it!).

If you are not sure if you need tests, consider this rule of thumb: the purpose of a test is to make sure someone doesn't accidentally revert the fix. Ask yourself, is there anything in your PR that you feel it is important we not accidentally revert back to how it was before your fix?

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing. The test exemption team is a small volunteer group, so all reviewers should feel empowered to ask for tests, without delegating that responsibility entirely to the test exemption group.

flutter-dashboard · 2024-12-19T01:15:44Z

This pull request has been changed to a draft. The currently pending flutter-gold status will not be able to resolve until a new commit is pushed or the change is marked ready for review again.

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.

preparing for #154378 It'd be nice to clean up the implicitly animated widget logic, especially since it could make the upcoming PR easier to review.

nate-thegrate · 2025-01-30T18:16:53Z

This will likely be implemented as a separate package, unless a maintainer from the Flutter team recommends otherwise.

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. a: animation Animation APIs d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos labels Aug 29, 2024

nate-thegrate commented Aug 30, 2024

View reviewed changes

packages/flutter/test/widgets/implicit_animations_test.dart Show resolved Hide resolved

examples/api/lib/widgets/implicit_animations/animated_value.0.dart Outdated Show resolved Hide resolved

nate-thegrate marked this pull request as ready for review August 30, 2024 04:49

goderbauer reviewed Aug 30, 2024

View reviewed changes

This comment was marked as resolved.

Sign in to view

nate-thegrate force-pushed the animated-value branch 2 times, most recently from 80adf1d to 4302178 Compare August 31, 2024 23:29

PurplePolyhedron reviewed Sep 2, 2024

View reviewed changes

packages/flutter/lib/src/widgets/implicit_animations.dart Show resolved Hide resolved

PurplePolyhedron reviewed Sep 2, 2024

View reviewed changes

packages/flutter/lib/src/widgets/implicit_animations.dart Outdated Show resolved Hide resolved

This comment was marked as resolved.

Sign in to view

nate-thegrate marked this pull request as draft September 5, 2024 14:49

nate-thegrate force-pushed the animated-value branch from 1f04564 to 9bdf679 Compare September 5, 2024 19:53

nate-thegrate marked this pull request as ready for review September 5, 2024 19:53

nate-thegrate commented Sep 9, 2024

View reviewed changes

nate-thegrate force-pushed the animated-value branch 3 times, most recently from 97e8d23 to ace99c1 Compare September 11, 2024 14:27

nate-thegrate requested a review from goderbauer September 11, 2024 14:28

nate-thegrate marked this pull request as draft September 20, 2024 23:58

nate-thegrate removed the request for review from goderbauer September 20, 2024 23:58

nate-thegrate mentioned this pull request Dec 3, 2024

AlignTransition / DecoratedBoxTransition without rebuilds #159757

Closed

nate-thegrate force-pushed the animated-value branch from ace99c1 to 5fd6d1f Compare December 10, 2024 01:04

github-actions bot removed d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos labels Dec 10, 2024

nate-thegrate marked this pull request as ready for review December 10, 2024 01:06

nate-thegrate marked this pull request as draft December 19, 2024 01:11

This was referenced Dec 19, 2024

ImplicitlyAnimatedWidgetState code cleanup #160567

Merged

Introduce DefaultAnimationStyle widget #160568

Closed

nate-thegrate added 13 commits December 18, 2024 19:03

const AnimationStyle

5a47c0c

DefaultAnimationStyle

608af44

animation-style-methods

2767229

migrate implicitly animated widgets

c00a2cd

add test

7b747be

refactor-animation-controller

96bddf5

ValueAnimation

e303b77

add const to AnimationStyle objects

c24de75

rename to AnimationProvider

71836fb

rename to ValueAnimationBase

a1c29ef

Add ValueAnimation, AnimatedValue

4ccae0f

AnimationController.styled()

9227b7c

inherited style for all controllers

1a1e65f

nate-thegrate force-pushed the animated-value branch from 5fd6d1f to 1a1e65f Compare December 19, 2024 02:03

nate-thegrate closed this Jan 30, 2025

AnimatedValue<T> for implicit animations #154378

AnimatedValue<T> for implicit animations #154378

Uh oh!

Conversation

nate-thegrate commented Aug 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Before

After

Before

After

Uh oh!

Uh oh!

Uh oh!

PurplePolyhedron commented Aug 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nate-thegrate commented Aug 30, 2024

Uh oh!

goderbauer left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment was marked as resolved.

Uh oh!

Uh oh!

Uh oh!

This comment was marked as resolved.

nate-thegrate commented Sep 5, 2024

Uh oh!

nate-thegrate left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

nate-thegrate Sep 9, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nate-thegrate commented Sep 20, 2024

Uh oh!

goderbauer commented Dec 3, 2024

Uh oh!

nate-thegrate commented Dec 10, 2024

Uh oh!

flutter-dashboard bot commented Dec 19, 2024

Uh oh!

flutter-dashboard bot commented Dec 19, 2024

Uh oh!

nate-thegrate commented Jan 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

`AnimatedValue<T>` for implicit animations #154378

`AnimatedValue<T>` for implicit animations #154378

nate-thegrate commented Aug 29, 2024 •

edited

Loading

PurplePolyhedron commented Aug 30, 2024 •

edited

Loading