Home > Software design >  How to do page view with cross fade animation
How to do page view with cross fade animation

Time:03-29

I am making a carousel with cross fade animation which I am using AnimatedSwitcher with FadeTransition to achieve such effect. The effect is fine but I want the carousel to be swipeable. I had tried PageView but I do not want the slide animation. Does anyone have any solution to this? Please Help. Thanks in advance.

The custom carousel I currently use.

AnimatedSwitcher(
      duration: const Duration(milliseconds: 500),
      transitionBuilder: (Widget child, Animation<double> animation) {
        return FadeTransition(child: child, opacity: animation);
      },
      child: Image.asset(
        imageList[currentIndex.toInt()],
        key: ValueKey<int>(currentIndex),
      ),

CodePudding user response:

If you do not want slide animation, do not use PageView.

Stick with your current implementation with AnimationSwitcher. If you want to add gesture support, wrap it with GestureDetector and listen on the onHorizontalDrag... or onVerticalDrag... events.

  • Related