Flutter AnimatedSwitcher not animating with with Getx / Obx?

Question

Has anyone had this issue : I'm trying to animate (fade) the changeover of a background image using a GetX controller and OBX to change the child / rebuild. The change of image works, but the fade animation doesn't. It behaves as if the widgets of same type don't have unique keys. The image is a custom widget of type BackdropImage. All BackdropImage instances have a unique key.

class _BuildBackdrop1 extends StatelessWidget {
  const _BuildBackdrop1({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Obx(
      () {
        print(_sbd.backdropImage1.value.key); //PRINT STATEMENT PROVES UNIQUE KEY ACCESS
        return AnimatedSwitcher(
          duration: KtBackdrop.backDropFadeInTime,
          switchInCurve: KtBackdrop.backDropFadeInCurve,
          switchOutCurve: KtBackdrop.backDropFadeOutCurve,
          child: _sbd.backdropImage1.value, // THIS CHANGES THE IMAGE FINE, BUT DOESNT ANIMATE
        );
      },
    );
  }
}

The Print statement inside the code above proves the key of widgets are unique.

Is this something you've encountered before? If I use a simple AnimatedOpacity it can be triggered fine with a simple opacity change on the controller. I must be missing something simple surely? Cheers

score 0 · Answer 1 · answered Jun 07 '23 at 12:47

You need to set "key" to Animation Widget's child, If they are of a different type.

class _BuildBackdrop1 extends StatelessWidget {
  const _BuildBackdrop1({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Obx(
      () {
        print(_sbd.backdropImage1.value.key); //PRINT STATEMENT PROVES UNIQUE KEY ACCESS
        return AnimatedSwitcher(
          duration: KtBackdrop.backDropFadeInTime,
          switchInCurve: KtBackdrop.backDropFadeInCurve,
          switchOutCurve: KtBackdrop.backDropFadeOutCurve,
          child: Container( 
             // setting child key here
             key:ValueKey(_sbd.backdropImage1.value) 
             child:_sbd.backdropImage1.value
          ), // THIS CHANGES THE IMAGE FINE, BUT DOESNT ANIMATE
        );
      },
    );
  }
}

Flutter AnimatedSwitcher not animating with with Getx / Obx?

1 Answers1