fly_to_target #

A Flutter package for animating multiple widgets flying to target positions simultaneously with customizable paths and effects.

Features #

• Animate multiple widgets simultaneously to one or more targets
• Support for various animation paths (linear, parabolic, bezier curve)
• Pre-phase animations (e.g., spread from a point before flying to target)
• Built-in effects (rotation, scale, fade, trail)
• Decorative effects (feathers, particles, sparkles)
• Stagger effect for sequential animation starts
• Fully customizable animation timing and curves
• Easy-to-use API with factory methods and presets

Example #

Basic	Coin	Cart	Multiple

Any Customise is available #

Custom Path	Decoration Effects	Full Effects	Heart Burst	Game Rewards	Spread & Fly

Getting Started #

Add this to your pubspec.yaml:

dependencies:
  fly_to_target: ^1.0.0

Usage #

Basic Usage #

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget>
    with TickerProviderStateMixin {
  final _controller = FlyToTargetController();
  final _targetKey = GlobalKey();
  final List<GlobalKey> _itemKeys = List.generate(5, (_) => GlobalKey());

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    if (!_controller.isAttached) {
      _controller.attach(context, this);
    }
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  Future<void> _flyAll() async {
    final items = _itemKeys.map((key) {
      return FlyItem.fromKey(
        child: Icon(Icons.star),
        key: key,
      );
    }).toList();

    await _controller.flyAll(
      items: items,
      target: FlyTargetFromKey(_targetKey),
    );
  }

  @override
  Widget build(BuildContext context) {
    // Build your UI with _targetKey and _itemKeys
  }
}

Coin Animation with Effects #

await _controller.flyAll(
  items: items,
  target: FlyTargetFromKey(_walletKey),
  config: FlyAnimationConfig.coin(
    duration: Duration(milliseconds: 1000),
    staggerDelay: Duration(milliseconds: 60),
  ),
);

Multiple Targets #

final itemsWithTargets = [
  FlyItemWithTarget(
    item: FlyItem.fromKey(child: widget1, key: key1),
    target: FlyTargetFromKey(target1Key),
  ),
  FlyItemWithTarget(
    item: FlyItem.fromKey(child: widget2, key: key2),
    target: FlyTargetFromKey(target2Key),
  ),
];

await _controller.flyToTargets(
  itemsWithTargets: itemsWithTargets,
  config: FlyAnimationConfig(
    pathConfig: BezierPathConfig.auto(curvature: 0.4),
  ),
);

Custom Animation Config #

FlyAnimationConfig(
  duration: Duration(milliseconds: 800),
  curve: Curves.easeOut,
  staggerDelay: Duration(milliseconds: 80),
  pathConfig: BezierPathConfig.auto(
    curvature: 0.6,
    randomness: 0.2,
  ),
  effects: FlyEffects(
    rotation: RotationEffect(rotations: 4 * pi),
    scale: ScaleEffect(endScale: 0.5),
    fade: FadeEffect(startAt: 0.8),
  ),
  decorations: [
    FeatherDecorationConfig(count: 3),
    SparkleDecorationConfig(count: 5),
  ],
)

Pre-Phase Animation (Spread & Fly) #

Add a pre-phase animation where items first spread from a gather point before flying to the target:

// Simple: using factory method
await _controller.flyAll(
  items: items,
  target: FlyTargetFromKey(_targetKey),
  config: FlyAnimationConfig.spreadAndFly(
    gatherPoint: Offset(centerX, centerY),
  ),
);

// Custom: with full configuration
await _controller.flyAll(
  items: items,
  target: FlyTargetFromKey(_targetKey),
  config: FlyAnimationConfig.spreadAndFly(
    gatherPoint: Offset(centerX, centerY),
    spreadDuration: Duration(milliseconds: 400),
    spreadCurve: Curves.easeOutBack,
    flyDuration: Duration(milliseconds: 800),
    flyCurve: Curves.easeIn,
  ),
);

API Reference #

FlyToTargetController #

Main controller for managing animations.

// Fly multiple items to a single target
Future<void> flyAll({
  required List<FlyItem> items,
  required FlyTarget target,
  FlyAnimationConfig? config,
});

// Fly items to different targets
Future<void> flyToTargets({
  required List<FlyItemWithTarget> itemsWithTargets,
  FlyAnimationConfig? config,
});

// Fly a single item
Future<void> fly({
  required FlyItem item,
  required FlyTarget target,
  FlyAnimationConfig? config,
});

FlyItem #

Defines the widget and starting position.

// From GlobalKey (gets position from widget)
FlyItem.fromKey(child: widget, key: globalKey)

// From Offset (explicit position)
FlyItem.fromOffset(child: widget, offset: Offset(100, 200), size: Size(40, 40))

FlyTarget #

Defines the destination.

// From GlobalKey
FlyTargetFromKey(globalKey)

// From Offset
FlyTargetFromOffset(Offset(300, 50))

Path Configurations #

Effects #

Decorations #

Pre-Phase Configurations #

SpreadPhaseConfig(
  gatherPoint: Offset(x, y),  // Center point where items gather
  duration: Duration(milliseconds: 400),
  curve: Curves.easeOutBack,
)

Presets #

FlyAnimationConfig.simple()        // Linear with fade
FlyAnimationConfig.parabolic()     // Arc trajectory
FlyAnimationConfig.bezier()        // Smooth curve
FlyAnimationConfig.coin()          // Full effects for coins
FlyAnimationConfig.cart()          // Add to cart (parabolic + scale + fade)
FlyAnimationConfig.heart()         // Like/burst (bezier + rotation + particles)
FlyAnimationConfig.gameReward()    // Game rewards (bezier + rotation + sparkles)
FlyAnimationConfig.spreadAndFly()  // Spread from point then fly to target

Example #

Check the example folder for a complete demo app with:

• Basic Animation
• Coin Collection
• Add to Cart
• Multiple Targets
• Spread & Fly (Pre-phase animation)

License #

MIT License - see LICENSE for details.