How to sync audio with lottie / rive animation in Flutter?

The key to synchronizing audio with Lottie or Rive animations in Flutter is ensuring that the animation plays in sync with the audio. This can be achieved through the following steps:

1. Prepare Audio and Animation Resources

First, ensure you have the correct audio and animation files. For Lottie animations, this is typically a JSON file; for Rive animations, it is a specific binary format. Audio files are usually in MP3 or WAV format.

2. Import Resources into the Flutter Project

Add the audio and animation files to the Flutter project's assets. For example, place them in the project's assets folder and declare these resources in the pubspec.yaml file.

yaml
flutter:
  assets:
    - assets/audio.mp3
    - assets/animation.json

3. Use the Appropriate Library to Load and Play Audio

You can use libraries like audioplayers to load and play audio files.

dart
import 'package:audioplayers/audioplayers.dart';

AudioPlayer audioPlayer = AudioPlayer();
await audioPlayer.play('assets/audio.mp3');

4. Control Synchronization Between Animation and Audio

To synchronize the animation and audio, control the animation based on the audio's playback state. This typically involves listening to the audio's playback position and updating the animation accordingly. This can be achieved using timers or listeners from the audio player.

dart
// Assuming both animation and audio complete in 2 seconds
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
import 'package:audioplayers/audioplayers.dart';

class SyncAnimationWithAudio extends StatefulWidget {
  @override
  _SyncAnimationWithAudioState createState() => _SyncAnimationWithAudioState();
}

class _SyncAnimationWithAudioState extends State<SyncAnimationWithAudio> {
  late AudioPlayer audioPlayer;
  late AnimationController animationController;

  @override
  void initState() {
    super.initState();
    audioPlayer = AudioPlayer();
    audioPlayer.onPlayerStateChanged.listen((state) {
      if (state == PlayerState.PLAYING) {
        animationController.forward();
      } else {
        animationController.stop();
      }
    });

    animationController = AnimationController(vsync: this, duration: Duration(seconds: 2));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Lottie.asset('assets/animation.json', controller: animationController),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          await audioPlayer.play('assets/audio.mp3');
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }

  @override
  void dispose() {
    audioPlayer.dispose();
    animationController.dispose();
    super.dispose();
  }
}

5. Test and Adjust

Finally, test the entire application to ensure perfect synchronization between audio and animation. This may require fine-tuning the duration of the animation or audio, or adjusting the playback speed of the animation.

By following these steps, you should be able to achieve synchronization between audio and Lottie or Rive animations in Flutter. If the durations of the audio and animation do not match, you may need to adjust one of them or consider this during design.