Having difficulty rendering my animation properly

[8Gitbrix]

Here is my animation file: https://www.2dimensions.com/a/8Gitbrix/files/flare/image_button/preview

I'm trying to render an animation on a Card widget when the icon is pressed, but it doesn't look like the 'onPressed' animation I have on my flare file.

Here is my code where I'm selecting an animation when I click on flare actor wrapped inside a gesture detector:

class _ImageChooserState extends State<ImageChooser> {
  
  final FlareControls _controls = FlareControls();
  String curAnimation = 'idle';

  @override
  Widget build(BuildContext context) {
    return ReusableCard(
      color: kPinkColor,
      childPadding: 10,
      cardChild: Container(
        width: 340,
        child: GestureDetector(
          onTap: _onTap,
          child: FlareActor(
            'assets/image_button.flr',
            animation: curAnimation,
            fit: BoxFit.contain,
            shouldClip: true,
            alignment: Alignment.bottomRight,
            controller: _controls,
          ),
        ),
      ),
    );
  }

  void _onTap() {
    setState(() {
      curAnimation = curAnimation == 'idle' ? 'onPressed' : 'idle';
    });
  }

}

And just for context, here is my ReusableCard code:

class ReusableCard extends StatelessWidget {
  ReusableCard({this.color, this.childPadding, this.cardChild});

  final Color color;
  final double childPadding;
  final Widget cardChild;

  @override
  Widget build(BuildContext context) {
    return Card(
      color: color,
      elevation: 25,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(30),
      ),
      child: Padding(
        padding: EdgeInsets.all(childPadding),
        child: cardChild,
      ),
    );
  }
}

My final 'onPressed' animation comes out looking like this:

instead of:

In case it helps, My full repo is at: https://github.com/8Gitbrix/memtrix

Thank you!

[luigi-rosso]

Hi @8Gitbrix, what's the condition/environment in which it works (like the second picture)?

This could be a few different things including a bug we've been tracking in Flutter stable seems to only shows up on certain Android devices, how the animation is keyed (when mixing animations you need to be sure the keys are set in all the animations you are mixing), or possibly a new issue you've found :)

Let me know how you took the second shot!

[8Gitbrix]

@luigi-rosso
The second picture result only happens if I re-render a new widget wrapping the FlareActor widget. For instance, if I change the outer Container to a different widget or remove it, and reload, then that animation will play. But once I press the button, the animation looks messy.