In a Flutter, AnimatedPositionedDirectional components used in the Stack, when the position or size changes, the animation effects

  const AnimatedPositionedDirectional({
    Key? key,
    required this.child,
    this.start,
    this.top,
    this.end,
    this.bottom,
    this.width,
    this.height,
    Curve curve = Curves.linear,
    required Duration duration,
    VoidCallback? onEnd,
  })
Copy the code
  • Start left-aligned if the current environment is textdirection.ltr TextDirection from left to right, and right-aligned if not
  • End right-aligned if the current environment is textdirection.ltr TextDirection from left to right, and left-aligned otherwise
  • Width Limits the width of the child component
  • Heght limits the height of child components
  • Curve Animation curve speed
  • Duration Duration of animation execution
  • The onEnd animation executes the completion callback method

Use the Demo

Directionality(
 // textdirection.ltr left to right
  // TextDirection.rtl rtl right to left
  textDirection: TextDirection.ltr,
  child: Stack(
    children: [
      AnimatedPositionedDirectional(
        top: 100,
        start: 100,
        width: 100,
        height: 200,
        duration: Duration(seconds: 2),
        // Perform the end callback
        onEnd: () {},
        // Animate the curve
        curve: Curves.fastOutSlowIn,
        child: Container(
          color: Colors.blue,
          child: Text("Early riser")))))))Copy the code

If you are interested, you can follow the official account BigLead to get the latest learning materials.

  • The Flutter from Introduction to Mastery series is here
  • Of course also must be to have the source code here
  • Github is a little slow to take a look at the code cloud source code
  • The tutorial series is here