lottie_pro 0.0.1

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

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:lottie_pro/lottie_pro.dart';

void main() {
  runApp(const LottieProExampleApp());
}

class LottieProExampleApp extends StatelessWidget {
  const LottieProExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'LottiePro Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const LottieProExamplePage(),
    );
  }
}

class LottieProExamplePage extends StatefulWidget {
  const LottieProExamplePage({super.key});

  @override
  State<LottieProExamplePage> createState() => _LottieProExamplePageState();
}

class _LottieProExamplePageState extends State<LottieProExamplePage> {
  late LottieProController controller;
  double currentSpeed = 1.0;
  double currentFrame = 0.0;

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

    // Listen to frame changes
    controller.events.listen((event) {
      if (event == LottieProEvent.frameChanged) {
        setState(() {
          currentFrame = controller.currentFrame;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('LottiePro Example'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // Animation display area
            Container(
              width: 300,
              height: 300,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.grey),
                borderRadius: BorderRadius.circular(8),
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(8),
                child: LottiePro.asset(
                  'assets/animations/example.json',
                  controller: controller,
                  width: 300,
                  height: 300,
                  repeat: true,
                  onLoaded: () {
                    debugPrint('Animation loaded successfully');
                  },
                  onComplete: () {
                    debugPrint('Animation completed');
                  },
                  onFrameChanged: (frame) {
                    setState(() {
                      currentFrame = frame;
                    });
                  },
                ),
              ),
            ),

            const SizedBox(height: 20),

            // Animation info
            Card(
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  children: [
                    Text(
                      'Current Frame: ${currentFrame.toStringAsFixed(1)}',
                      style: Theme.of(context).textTheme.titleMedium,
                    ),
                    const SizedBox(height: 8),
                    Text(
                      'Speed: ${currentSpeed.toStringAsFixed(1)}x',
                      style: Theme.of(context).textTheme.titleMedium,
                    ),
                    const SizedBox(height: 8),
                    Text(
                      'State: ${controller.state.name}',
                      style: Theme.of(context).textTheme.titleMedium,
                    ),
                  ],
                ),
              ),
            ),

            const SizedBox(height: 20),

            // Control buttons
            Wrap(
              spacing: 8,
              runSpacing: 8,
              children: [
                ElevatedButton(
                  onPressed: () => controller.play(),
                  child: const Text('Play'),
                ),
                ElevatedButton(
                  onPressed: () => controller.pause(),
                  child: const Text('Pause'),
                ),
                ElevatedButton(
                  onPressed: () => controller.stop(),
                  child: const Text('Stop'),
                ),
                ElevatedButton(
                  onPressed: () => controller.reverse(),
                  child: const Text('Reverse'),
                ),
              ],
            ),

            const SizedBox(height: 16),

            // Speed control
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text('Speed: '),
                Slider(
                  value: currentSpeed,
                  min: 0.1,
                  max: 3.0,
                  divisions: 29,
                  label: '${currentSpeed.toStringAsFixed(1)}x',
                  onChanged: (value) {
                    setState(() {
                      currentSpeed = value;
                    });
                    controller.setSpeed(value);
                  },
                ),
              ],
            ),

            const SizedBox(height: 16),

            // Frame navigation
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () => controller.previousFrame(),
                  child: const Text('⏮ Previous'),
                ),
                const SizedBox(width: 16),
                ElevatedButton(
                  onPressed: () => controller.goToStart(),
                  child: const Text('⏪ Start'),
                ),
                const SizedBox(width: 16),
                ElevatedButton(
                  onPressed: () => controller.goToEnd(),
                  child: const Text('⏩ End'),
                ),
                const SizedBox(width: 16),
                ElevatedButton(
                  onPressed: () => controller.nextFrame(),
                  child: const Text('Next ⏭'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

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