Animations & Motion

Fluxy provides a hardware-accelerated motion engine that allows you to animate widgets using chainable modifiers.

Motion Modifiers (.animate)

Standard Flutter animations require AnimationController, Tween, and AnimatedBuilder. In Fluxy, it's a single line.

Fx.box()
  .animate(
    fade: 0.0, 
    slide: Offset(0, 20),
    duration: 500.ms
  )

Chainable Transitions

The .transition(Duration) modifier enables automatic interpolation of style changes. When a state-driven style property changes (e.g., background color), it will animate smoothly over the specified duration.

final isExpanded = flux(false);

Fx.box()
  .bg(isExpanded.value ? Colors.blue : Colors.grey)
  .width(isExpanded.value ? 200 : 100)
  .transition(300.ms)
  .onTap(() => isExpanded.toggle());

Staggered Animations

Create "entry reveal" animations for lists without manual delay math.

Fx.col().children([
  HeroSection(),
  FeaturesSection(),
  PriceCard(),
]).stagger(interval: 0.15) // Every item reveals 150ms after the previous

Looping & Repeating

Fluxy 0.1.7 adds support for continuous motion.

• .loop(): Repeats the animation indefinitely.
• .reverse(): Plays the animation backwards after finishing (yoyo effect).

Fx.icon(Icons.favorite)
  .animate(scale: 1.2, duration: 500.ms)
  .loop(reverse: true) // Pulse effect

Hero Transitions (Fx.hero)

Fx.hero simplifies the standard Flutter Hero widget, allowing you to create seamless shared element transitions between screens with a simple tag.

// Page A
Fx.hero(
  tag: "profile_id_${user.id}",
  child: Fx.img(user.avatar).circle(),
)

// Page B (Target)
Fx.hero(
  tag: "profile_id_${user.id}",
  child: Fx.img(user.avatar).square(200),
)

Pro Tip: Use the unique ID of your data as the tag to ensure stability during list-to-detail transitions.

API Reference