lottie_pro #

Enhanced Lottie animations with custom controls and interactions. Supports all 6 platforms with WASM compatibility.

Example #

Features #

✨ Enhanced Animation Controls

• Advanced playback control (play, pause, stop, reverse)
• Speed control and frame-by-frame navigation
• Custom animation sequences
• Event-driven animation management

🎯 Interactive Elements

• Touch interactions
• Hover effects
• Drag and drop support
• Custom gesture recognition
• Interactive animation areas

🚀 Cross-Platform Support

• ✅ iOS
• ✅ Android
• ✅ Web
• ✅ Windows
• ✅ macOS
• ✅ Linux

🌐 WASM Compatibility

• Optimized for web performance
• Efficient memory usage
• Smooth animations across browsers

Getting Started #

Installation #

Add lottie_pro to your pubspec.yaml:

dependencies:
  lottie_pro: ^0.1.0

Basic Usage #

import 'package:lottie_pro/lottie_pro.dart';

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

class _MyWidgetState extends State<MyWidget> {
  late LottieProController controller;

  @override
  void initState() {
    super.initState();
    controller = LottieProController();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        LottiePro.asset(
          'assets/animations/example.json',
          controller: controller,
          width: 200,
          height: 200,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton(
              onPressed: () => controller.play(),
              child: Text('Play'),
            ),
            ElevatedButton(
              onPressed: () => controller.pause(),
              child: Text('Pause'),
            ),
            ElevatedButton(
              onPressed: () => controller.stop(),
              child: Text('Stop'),
            ),
            ElevatedButton(
              onPressed: () => controller.reverse(),
              child: Text('Reverse'),
            ),
          ],
        ),
      ],
    );
  }

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

Advanced Features #

Custom Animation Sequences #

final animation = LottieProAnimation(controller: controller);

// Create a custom sequence
final sequence = AnimationSequence(
  name: 'Bounce and Fade',
  commands: [
    AnimationCommand.setSpeed(2.0),
    AnimationCommand.play(),
    AnimationCommand.wait(1000), // Wait 1 second
    AnimationCommand.reverse(),
  ],
);

animation.addSequence(sequence);
animation.playSequence(0);

Interactive Elements #

// Create touch interaction
final touchInteraction = TouchInteraction(
  interactionArea: Rect.fromLTWH(0, 0, 100, 100),
  onTouch: (controller, position) {
    controller.play();
  },
);

// Create hover interaction
final hoverInteraction = HoverInteraction(
  interactionArea: Rect.fromLTWH(0, 0, 200, 200),
  onHoverEnter: (controller, position) {
    controller.setSpeed(2.0);
  },
  onHoverExit: (controller, position) {
    controller.setSpeed(1.0);
  },
);

// Use with LottiePro widget
LottiePro.asset(
  'assets/animations/interactive.json',
  controller: controller,
  interactions: [touchInteraction, hoverInteraction],
)

Frame Control #

// Navigate to specific frame
controller.goToFrame(50);

// Navigate to specific time
controller.goToTime(Duration(milliseconds: 1000));

// Frame-by-frame navigation
controller.nextFrame();
controller.previousFrame();

// Jump to start/end
controller.goToStart();
controller.goToEnd();

Speed Control #

// Set animation speed (1.0 = normal, 2.0 = double speed)
controller.setSpeed(2.0);

// Slow motion
controller.setSpeed(0.5);

Platform-Specific Features #

Web (WASM) #

• Optimized rendering for web browsers
• Efficient memory management
• Smooth animations across different devices

Mobile (iOS/Android) #

• Native performance optimization
• Touch gesture support
• Platform-specific animations

Desktop (Windows/macOS/Linux) #

• Mouse and keyboard interaction support
• High-resolution display optimization
• Desktop-specific controls

API Reference #

LottiePro Widget #

The main widget for displaying enhanced Lottie animations.

Constructors:

• LottiePro.asset() - Load from asset file
• LottiePro.network() - Load from network URL
• LottiePro.composition() - Use existing composition

Properties:

• controller - Animation controller
• width/height - Dimensions
• fit - Box fit behavior
• repeat - Whether to repeat
• reverse - Whether to reverse
• animate - Whether to animate
• frameRate - Custom frame rate
• interactions - Interactive elements

LottieProController #

Manages animation state and playback.

Methods:

• play() - Start playing
• pause() - Pause animation
• stop() - Stop and reset
• reverse() - Play in reverse
• setSpeed(double) - Set playback speed
• goToFrame(double) - Jump to frame
• goToTime(Duration) - Jump to time

Properties:

• state - Current animation state
• speed - Current speed
• currentFrame - Current frame
• totalFrames - Total frame count
• duration - Animation duration

LottieProAnimation #

Manages custom animation sequences.

Methods:

• playSequence(int) - Play specific sequence
• playNextSequence() - Play next sequence
• playPreviousSequence() - Play previous sequence
• stopSequence() - Stop current sequence

LottieProInteraction #

Base class for interactive elements.

Types:

• TouchInteraction - Touch/tap interactions
• HoverInteraction - Mouse hover effects
• DragInteraction - Drag and drop
• ScaleInteraction - Pinch to zoom
• CustomInteraction - Custom behavior

Examples #

Check out the example directory for complete working examples:

• Basic animation playback
• Interactive animations
• Custom sequences
• Platform-specific features

Development Requirements #

Quality Standards #

• Pana score: 160/160
• Flutter analyze: 0 issues
• Dart analysis: 0 issues
• Test coverage: >90%
• Documentation: Comprehensive with examples

Platform Support #

• ✅ iOS
• ✅ Android
• ✅ Web
• ✅ Windows
• ✅ macOS
• ✅ Linux
• ✅ WASM compatible

Package Structure #

• Username: Dhia-Bechattaoui
• Dart SDK: >=3.8.0
• Flutter: >=3.32.0
• .gitignore: Configured
• CHANGELOG: Maintained following Keep a Changelog
• Pub.dev guidelines: Followed

Package Topics #

• flutter
• lottie
• animation
• interactive
• ui

Funding #

This project is supported by sponsors. If you find this package useful, please consider sponsoring the maintainer.

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

License #

This project is licensed under the MIT License - see the LICENSE file for details.

Support #

If you encounter any issues or have questions, please:

1. Check the documentation
2. Search existing issues
3. Create a new issue

Dependencies #

• Flutter: >=3.32.0
• Dart: >=3.8.0
• lottie: ^3.0.0

Changelog #

See CHANGELOG.md for a list of changes and version history.