How to start different animations based on button clicks

Question

Currently, I'm using five buttons to navigate from my homepage to the subpages. And here's what I want to do: I have five animations of the same book. It's always closed at the beginning but then opens different pages. So, depending on what button I click, I want to show the according animation before actually navigating to that page. Once I return to the homepage, the animatin runs backwards and closes the book again.

It works fine with only one animation but I can't figure out how to implement multiple animations that will start from the same spot on the screen.

This is my code right now, trying to use TickerProviderStateMixin and multiple Animationcontrollers:

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

   @override
   State<OpeningBook> createState() => _OpeningBookState();
   }

   class _OpeningBookState extends State<OpeningBook>
   with TickerProviderStateMixin {
   late final AnimationController page1Controller;
   late final AnimationController page2Controller;
   bool page1open = false;
   bool page2open = false;

   @override
   void initState() {
     page1Controller = AnimationController(
     duration: const Duration(milliseconds: 2000),
     vsync: this,
     );
     page2Controller = AnimationController(
     duration: const Duration(milliseconds: 2000),
     vsync: this,
     );
    super.initState();
   } 

  @override
  Widget build(BuildContext context) {

  // Close page if open
  if (page1open == true) {
    Future.delayed(const Duration(seconds: 1), () {
    page1Controller.reverse();
    page1open = false;
    });
  }
  if (page2open == true) {
    Future.delayed(const Duration(seconds: 1), () {
    page2Controller.reverse();
    page2open = false;
    });
  }

  // Animation
        Container(
          height: 600,
          width: 600,
          alignment: Alignment.center,
          child: Stack(
            children: [
              Lottie.asset(
                'assets/animations/Calendar_Ani.json',
                controller: page1controller,
              ),
              Lottie.asset(
                'assets/animations/LessonPrep_Ani.json',
                controller: page2controller,
              ),
            ],
          ),
        ),

    // NavigationsIcons
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            IconButton(
                onPressed: () {
                  page1open = true;
                  page1controller.forward();
                  Future.delayed(const Duration(milliseconds: 1500), () {
                    context.goNamed(AppRoute.calendar.name);
                  });
                },
                iconSize: 50,
                icon: const Icon(Icons.calendar_month),
                tooltip: context.loc.calendar),
            const SizedBox(
              height: 35,
            ),
            IconButton(
                onPressed: () {
                  bookOpen = true;
                  animationController.forward();
                  Future.delayed(const Duration(milliseconds: 1500), () {
                    context.goNamed(AppRoute.weeks.name);
                  });
                },
                iconSize: 50,
                icon: const Icon(Icons.auto_stories),
                tooltip: context.loc.lessonPlanner),

But how would I put all the animations into one Container? I'm using a Stack right now, but that doesn't work well. The animation of page 2 (probably because it's on top) works alright. But if I open page 1 the animation doesn't show at all.

Answer 1

When you want to use more than one animation, you should have multiple animation controllers (one for each) to start or reverse the animation you want going. I'm guessing you tried that and found it not to work with very little info why? One thing to keep in mind is that the SingleTickerProviderStateMixin assumes only one animation controller is present, you'll probably want to use the more general TickerProviderStateMixin one instead.

Check out the documentation below and see if that helps. If not, please post the code that doesn't work and as much info as you can about what it's doing to help us answer better.

https://api.flutter.dev/flutter/widgets/TickerProviderStateMixin-mixin.html