WindAnimationWrapper

WindAnimationWrapper wraps any widget in a looping animation driven by WindAnimationType: spin, ping, pulse, or bounce. It is the underlying engine behind animate-* utility classes; you can also use it directly when you need programmatic control over the type, duration, or curve.

Table of Contents

• Basic Usage
• Constructor
• Props
• Animation Types
• Styling Examples
• Related Documentation

Basic Usage

WindAnimationWrapper(
  animationType: WindAnimationType.spin,
  child: WIcon(Icons.refresh_outlined, className: 'text-blue-500 dark:text-blue-400 text-3xl'),
)

Use animate-* className tokens for most cases. Reach for WindAnimationWrapper directly when you need to vary duration or curve at runtime, or when wrapping a widget that does not accept a className prop.

Constructor

const WindAnimationWrapper({
  Key? key,
  required Widget child,
  required WindAnimationType animationType,
  Duration duration = const Duration(milliseconds: 1000),
  Curve curve = Curves.linear,
})

Props

Animation Types

Styling Examples

Custom duration

Slow a pulse down to a 2-second cycle for a calmer skeleton effect:

WindAnimationWrapper(
  animationType: WindAnimationType.pulse,
  duration: const Duration(milliseconds: 2000),
  child: WDiv(
    className: 'h-4 w-48 bg-gray-200 dark:bg-gray-700 rounded',
  ),
)

Ping badge

Combine with Stack + Positioned for a notification badge:

Stack(
  children: [
    WIcon(Icons.notifications_outlined, className: 'text-gray-600 dark:text-gray-300 text-3xl'),
    Positioned(
      right: 2,
      top: 2,
      child: WindAnimationWrapper(
        animationType: WindAnimationType.ping,
        child: WDiv(className: 'w-3 h-3 bg-red-500 dark:bg-red-400 rounded-full'),
      ),
    ),
  ],
)

Spin with fast duration

Reduce the cycle time for a snappier loading indicator:

WindAnimationWrapper(
  animationType: WindAnimationType.spin,
  duration: const Duration(milliseconds: 600),
  child: WIcon(Icons.sync_outlined, className: 'text-indigo-500 dark:text-indigo-400 text-2xl'),
)

Via className (most common)

For typical use the animate-* className token is the shorter path:

WIcon(
  Icons.refresh_outlined,
  className: 'text-blue-500 dark:text-blue-400 text-2xl animate-spin',
)

Related Documentation

• WDiv: Universal container; supports animate-* via className.
• WIcon: Icon widget; wraps automatically in WindAnimationWrapper when className contains animate-*.
• Animation: Full reference for the animate-* tokens.
• Transition: Reference for transition-*, duration-*, and ease-* tokens.