Stateful Widget嵌套场景下Lottie组件无法正常动画及闪烁问题的解决方案咨询

Hey there! Let's break down how to fix your Lottie animation's stuttering, truncation, and flickering problems—since you're right that repeated reconstruction is almost certainly the culprit. Here's a step-by-step solution tailored to your setup:

1. Prevent Unnecessary Reconstruction with AutomaticKeepAliveClientMixin #

Your child Stateful Widget (the one holding the Lottie animation) is getting rebuilt every time the parent AnimatedContainer animates. To stop this, we'll use Flutter's built-in mixin to keep the widget's state alive even when its parent rebuilds.

Modify your Lottie-containing widget like this:

class AnimatedSuccessCheck extends StatefulWidget {
  final double size;
  final Color color;

  const AnimatedSuccessCheck({
    Key? key,
    required this.size,
    required this.color,
  }) : super(key: key);

  @override
  State<AnimatedSuccessCheck> createState() => _AnimatedSuccessCheckState();
}

class _AnimatedSuccessCheckState extends State<AnimatedSuccessCheck> with AutomaticKeepAliveClientMixin {
  late AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    // Initialize controller ONCE when the widget is first created
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 1500),
    )..forward();
  }

  @override
  void dispose() {
    // Clean up controller when widget is disposed
    _animationController.dispose();
    super.dispose();
  }

  // Tell Flutter to keep this widget's state alive
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    // Required when using AutomaticKeepAliveClientMixin
    super.build(context);
    return Lottie.asset(
      'assets/lottie/success_check.json',
      controller: _animationController,
      width: widget.size,
      height: widget.size,
      color: widget.color,
      fit: BoxFit.contain,
      animate: false, // Disable auto-animation since we're using our controller
      cache: true, // Ensure the Lottie file is cached to avoid reloading
    );
  }
}

2. Optimize the Parent AnimatedContainer #

Make sure the AnimatedContainer only animates necessary properties—avoid passing frequently changing variables that trigger unnecessary rebuilds. For example:

• If you're animating size, ensure the target values aren't being recalculated on every frame
• Use const constructors for static child widgets where possible to prevent rebuilds

3. Verify Lottie Animation Settings #

• Double-check that your Lottie file doesn't have inherent frame issues (you can preview it in the Lottie editor to confirm)
• Ensure the AnimationController duration matches the Lottie animation's native length for smooth playback

Why This Works #

• AutomaticKeepAliveClientMixin tells Flutter not to dispose and recreate the Lottie widget's state during parent animations
• Initializing the controller only in initState ensures the animation doesn't reset or restart unexpectedly
• Disabling animate: false on the Lottie component prevents conflicting animation triggers between the widget and your controller

内容的提问来源于stack exchange，提问作者user15782390