Skip to content

Animation controller

Mattia Crovero edited this page Dec 18, 2018 · 4 revisions

The animation controller is responsible for the state of the bottomsheet and the animations.

_controller = RubberAnimationController(
    vsync: this,
    dismissable: false, // if true, when the bottomsheet reaches the lowerbound the animation stops
    lowerBound: AnimationController(pixels: 100), // The value at which the bottomsheet is collapsed
    halfBound: AnimationController(pixels: 300), // The value when half expanded
    upperBound: AnimationController(percentage: 0.9), // The value when expanded
    duration: Duration(milliseconds: 200), // The animation duration
    springDescription: _mySpringDescription
);

The halfBound parameter is optional, if not defined the bottomsheet will anchor only to the lower and upper bounds. The springDescription, also optional, changes the physics behind the fling animation.

// Default spring description
final SpringDescription _mySpringDescription = SpringDescription.withDampingRatio(
  mass: 1.5, // The weight of the bottomsheet
  stiffness: 300.0, // Defines the spring constant
  ratio: 0.4, // The damping ratio
);

// A possible alternative with no bounce
final SpringDescription _mySpringDescription = SpringDescription.withDampingRatio(
  mass: 1.0,
  stiffness: 500.0,
  ratio: 1.0,
);

...more at Andorid Developers

To interact with the animation controller you can use:

// Animate the bottomsheet with spring animation to a certain state:
// - AnimationState.expanded
// - AnimaitonState.half_expanded
// - AnimaitonState.collapsed
_controller.launchTo(animationState); 

// For linear animation
_controller.expand();
_controller.halfExpand();
_controller.collapse();

// To hide or show the bottomsheet
_controller.visibility = true; //false
Clone this wiki locally