Search code examples
flutterflutter-animationflutter-swiper

Use Flutter Swiper to fade-out text in different area


How can I combine a swiper action with a fade-in/fade-out action in another area of the screen?

My screen is divided into two halves: The Top is a text widget and the bottom is a swiper widget with two pages. My goal is to fade-out the text in the top half when I swipe to the second page in the bottom half.

I'm using this dependency for the swiper widget in the bottom half: https://pub.dev/packages/flutter_swiper


Solution

  • I solved it by using GestureDetector widget and updated the opacity via the state.

    The GestureDetector needed two functions: onDragUpdate and onDragEnd. Both changed the state of the progress which is also used to update the opacity in the other half.

    Quite some work for such a small interaction, however, it works.