Widget - Fade & Move Animations

Declarative, chainable animations for widgets. Instantly apply smooth fade, slide, and bounce entrance effects using simple method calls.

1. 👻 Basic Fade Effects

   fadeIn · Widget

   Applies a simple opacity fade-in animation from transparent to opaque.

   Show Parameters

   delay · int · default: "0"

   The duration to wait before starting the animation (in milliseconds).

   begin · double · default: "0.0"

   The initial opacity value (0.0 = transparent)

   duration · int · default: "500"

   The length of the animation (in milliseconds).

   repeat · bool · default: "false"

   If true, the animation loops indefinitely.

   reverse · bool · default: "false"

   If true, reverses direction when repeating (fade in, then fade out).

   autoPlay · bool · default: "true"

   If true, the animation starts automatically.

   curve · Curve? · default: "Curves.easeIn"

   The curve to use for the animation speed.

   onInit · void Function(AnimationController)? · default: "null"

   A callback fired when the AnimationController is initialized.

   Text("Hello").fadeIn(duration: 800);
   

   fadeOut · Widget

   Applies a simple opacity fade-out animation from opaque to transparent.

   Show Parameters

   delay · int · default: "0"

   The duration to wait before starting the animation (in milliseconds).

   begin · double · default: "1.0"

   The initial opacity value (1.0 = opaque).

   duration · int · default: "500"

   The length of the animation (in milliseconds).

   repeat · bool · default: "false"

   If true, the animation loops indefinitely.

   reverse · bool · default: "false"

   If true, reverses direction when repeating (fade out, then fade in).

   autoPlay · bool · default: "true"

   If true, the animation starts automatically.

   curve · Curve? · default: "Curves.easeIn"

   The curve to use for the animation speed.

   onInit · void Function(AnimationController)? · default: "null"

   A callback fired when the AnimationController is initialized.

   // Fade out over 1 second
   Widget().fadeOut(duration: 1000);
   

2. ⬇️ Vertical Entrance (Move Y)

   fadeInMoveInBottom · Widget

   Combined fade-in and slide-up entrance. The widget moves up from the bottom edge by verticalOffset pixels.

   Show Parameters

   verticalOffset · double · default: "50"

   The starting distance (in pixels) the widget moves up from.

   delay · int · default: "0"

   The duration to wait before starting the animation (in milliseconds).

   duration · int · default: "500"

   The length of the animation (in milliseconds).

   repeat · bool · default: "false"

   If true, the animation loops indefinitely.

   reverse · bool · default: "false"

   If true, reverses direction when repeating.

   autoPlay · bool · default: "true"

   If true, the animation starts automatically.

   curve · Curve? · default: "Curves.ease"

   The curve to use for the animation speed.

   onInit · void Function(AnimationController)? · default: "null"

   A callback fired when the AnimationController is initialized.

   const Card().fadeInMoveInBottom(verticalOffset: 100);
   

   fadeInMoveInBottomBouncy · Widget

   Slide-up entrance with a quick, light overshoot and settlement (a light bounce).

   Show Parameters

   verticalOffset · double · default: "50"

   The starting distance (in pixels) the widget moves up from.

   delay · int · default: "0"

   The duration to wait before starting the animation (in milliseconds).

   duration · int · default: "500"

   The length of the animation (in milliseconds).

   repeat · bool · default: "false"

   If true, the animation loops indefinitely.

   reverse · bool · default: "false"

   If true, reverses direction when repeating.

   autoPlay · bool · default: "true"

   If true, the animation starts automatically.

   onInit · void Function(AnimationController)? · default: "null"

   A callback fired when the AnimationController is initialized.

   Text("Bouncy").fadeInMoveInBottomBouncy();
   

   fadeInMoveInBottomStickyBouncy · Widget

   Slide-up entrance with a strong, oscillating bounce using Curves.elasticOut.

   Show Parameters

   verticalOffset · double · default: "50"

   The starting distance (in pixels) the widget moves up from.

   delay · int · default: "0"

   The duration to wait before starting the animation (in milliseconds).

   duration · int · default: "500"

   The length of the animation (in milliseconds).

   repeat · bool · default: "false"

   If true, the animation loops indefinitely.

   reverse · bool · default: "false"

   If true, reverses direction when repeating.

   autoPlay · bool · default: "true"

   If true, the animation starts automatically.

   onInit · void Function(AnimationController)? · default: "null"

   A callback fired when the AnimationController is initialized.

   Image.asset("path/to/logo").fadeInMoveInBottomStickyBouncy();
   

   fadeInMoveInTop({double verticalOffset, ...}) · Widget

   Combined fade-in and slide-down entrance. The widget moves down from the top edge by verticalOffset pixels.

   Show Parameters

   verticalOffset · double · default: "50"

   The starting distance (in pixels) the widget moves down from.

   delay · int · default: "0"

   The duration to wait before starting the animation (in milliseconds).

   duration · int · default: "500"

   The length of the animation (in milliseconds).

   repeat · bool · default: "false"

   If true, the animation loops indefinitely.

   reverse · bool · default: "false"

   If true, reverses direction when repeating.

   autoPlay · bool · default: "true"

   If true, the animation starts automatically.

   curve · Curve? · default: "Curves.ease"

   The curve to use for the animation speed.

   onInit · void Function(AnimationController)? · default: "null"

   A callback fired when the AnimationController is initialized.

   const AppBar().fadeInMoveInTop();
   

   fadeInMoveInTopBouncy · Widget

   Slide-down entrance with a quick, light overshoot and settlement (a light bounce).

   Show Parameters

   verticalOffset · double · default: "50"

   The starting distance (in pixels) the widget moves down from.

   delay · int · default: "0"

   The duration to wait before starting the animation (in milliseconds).

   duration · int · default: "500"

   The length of the animation (in milliseconds).

   repeat · bool · default: "false"

   If true, the animation loops indefinitely.

   reverse · bool · default: "false"

   If true, reverses direction when repeating.

   autoPlay · bool · default: "true"

   If true, the animation starts automatically.

   onInit · void Function(AnimationController)? · default: "null"

   A callback fired when the AnimationController is initialized.

   Text("Title").fadeInMoveInTopBouncy();
   

   fadeInMoveInTopStickyBouncy · Widget

   Slide-down entrance with a strong, oscillating bounce using Curves.elasticOut.

   Show Parameters

   verticalOffset · double · default: "50"

   The starting distance (in pixels) the widget moves down from.

   delay · int · default: "0"

   The duration to wait before starting the animation (in milliseconds).

   duration · int · default: "500"

   The length of the animation (in milliseconds).

   repeat · bool · default: "false"

   If true, the animation loops indefinitely.

   reverse · bool · default: "false"

   If true, reverses direction when repeating.

   autoPlay · bool · default: "true"

   If true, the animation starts automatically.

   onInit · void Function(AnimationController)? · default: "null"

   A callback fired when the AnimationController is initialized.

   Image.network(url).fadeInMoveInTopStickyBouncy();
   

3. ➡️ Horizontal Entrance (Move X)

   fadeInMoveInLeft · Widget

   Combined fade-in and slide-in entrance from the left edge.

   Show Parameters

   horizontalOffset · double · default: "50"

   The starting distance (in pixels) the widget moves from the left.

   delay · int · default: "0"

   The duration to wait before starting the animation (in milliseconds).

   duration · int · default: "500"

   The length of the animation (in milliseconds).

   repeat · bool · default: "false"

   If true, the animation loops indefinitely.

   reverse · bool · default: "false"

   If true, reverses direction when repeating.

   autoPlay · bool · default: "true"

   If true, the animation starts automatically.

   curve · Curve? · default: "Curves.ease"

   The curve to use for the animation speed.

   onInit · void Function(AnimationController)? · default: "null"

   A callback fired when the AnimationController is initialized.

   const Text("Menu").fadeInMoveInLeft();
   

   fadeInMoveInLeftBouncy · Widget

   Slide-in from the left with a quick, light overshoot and settlement.

   Show Parameters

   horizontalOffset · double · default: "50"

   The starting distance (in pixels) the widget moves from the left.

   delay · int · default: "0"

   The duration to wait before starting the animation (in milliseconds).

   duration · int · default: "500"

   The length of the animation (in milliseconds).

   repeat · bool · default: "false"

   If true, the animation loops indefinitely.

   reverse · bool · default: "false"

   If true, reverses direction when repeating.

   autoPlay · bool · default: "true"

   If true, the animation starts automatically.

   onInit · void Function(AnimationController)? · default: "null"

   A callback fired when the AnimationController is initialized.

   const Text("Menu").fadeInMoveInLeftBouncy();
   

   fadeInMoveInLeftStickyBouncy · Widget

   Slide-in from the left with a strong, oscillating bounce using Curves.elasticOut.

   Show Parameters

   horizontalOffset · double · default: "50"

   The starting distance (in pixels) the widget moves from the left.

   delay · int · default: "0"

   The duration to wait before starting the animation (in milliseconds).

   duration · int · default: "500"

   The length of the animation (in milliseconds).

   repeat · bool · default: "false"

   If true, the animation loops indefinitely.

   reverse · bool · default: "false"

   If true, reverses direction when repeating.

   autoPlay · bool · default: "true"

   If true, the animation starts automatically.

   onInit · void Function(AnimationController)? · default: "null"

   A callback fired when the AnimationController is initialized.

   const Text("Menu").fadeInMoveInLeftStickyBouncy();
   

   fadeInMoveInRight · Widget

   Combined fade-in and slide-in entrance from the right edge.

   Show Parameters

   horizontalOffset · double · default: "50"

   The starting distance (in pixels) the widget moves from the right.

   delay · int · default: "0"

   The duration to wait before starting the animation (in milliseconds).

   duration · int · default: "500"

   The length of the animation (in milliseconds).

   repeat · bool · default: "false"

   If true, the animation loops indefinitely.

   reverse · bool · default: "false"

   If true, reverses direction when repeating.

   autoPlay · bool · default: "true"

   If true, the animation starts automatically.

   curve · Curve? · default: "Curves.ease"

   The curve to use for the animation speed.

   onInit · void Function(AnimationController)? · default: "null"

   A callback fired when the AnimationController is initialized.

   const Icon(Icons.close).fadeInMoveInRight();
   

   fadeInMoveInRightBouncy · Widget

   Slide-in from the right with a quick, light overshoot and settlement.

   Show Parameters

   horizontalOffset · double · default: "50"

   The starting distance (in pixels) the widget moves from the right.

   delay · int · default: "0"

   The duration to wait before starting the animation (in milliseconds).

   duration · int · default: "500"

   The length of the animation (in milliseconds).

   repeat · bool · default: "false"

   If true, the animation loops indefinitely.

   reverse · bool · default: "false"

   If true, reverses direction when repeating.

   autoPlay · bool · default: "true"

   If true, the animation starts automatically.

   onInit · void Function(AnimationController)? · default: "null"

   A callback fired when the AnimationController is initialized.

   const Icon(Icons.close).fadeInMoveInRightBouncy();
   

   fadeInMoveInRightStickyBouncy · Widget

   Slide-in from the right with a strong, oscillating bounce using Curves.elasticOut.

   Show Parameters

   horizontalOffset · double · default: "50"

   The starting distance (in pixels) the widget moves from the right.

   delay · int · default: "0"

   The duration to wait before starting the animation (in milliseconds).

   duration · int · default: "500"

   The length of the animation (in milliseconds).

   repeat · bool · default: "false"

   If true, the animation loops indefinitely.

   reverse · bool · default: "false"

   If true, reverses direction when repeating.

   autoPlay · bool · default: "true"

   If true, the animation starts automatically.

   onInit · void Function(AnimationController)? · default: "null"

   A callback fired when the AnimationController is initialized.

   const Image().fadeInMoveInRightStickyBouncy();