Skip to content

Hero should allow specifying a curve and reverseCurve #26150

Description

@marcoms

Currently in heroes.dart:

  Animation<double> get animation {
    return CurvedAnimation(
      parent: (type == HeroFlightDirection.push) ? toRoute.animation : fromRoute.animation,
      curve: Curves.fastOutSlowIn,
    );
  }

Curves.fastOutSlowIn looks decent for an entry curve, however when the hero animation is played in reverse when going to the previous route, you get something like the following:

ezgif-4-8105ac49419e

This could be solved by checking HeroFlightDirection.push/pull and flipping the curve if necessary, but IMO it would make more sense to allow the user to specify curve and reverseCurve like most of the other animation APIs we have. curve would naturally be flipped when going backwards if reverseCurve isn't specified.

When I was working on improving the animations of CupertinoPageRoute, the Hero animation of the title becoming the back button was the one thing I couldn't alter, since there isn't an API to specify a reverse curve. Example (watch the Colors title):

ezgif-4-1260e8ec0452

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work listc: new featureNothing broken; request for a new capabilityf: material designflutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.has partial patchThere is a PR awaiting someone to take it across the finish lineteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions