Swipe in PageView when a widget is in front of it in flutter

Issue

i have a Stack and a PageView inside it. there is some other widgets in front of my PageView in Stack. something like this:

Stack(
  PageView(...),
  Container(...),
  Text(...),
  ....
),

now if i try to swipe PageView if my finger touches other widgets swiping stopes and dosent work.

how can i make it work?

Solution

The UI priority on Widget tree is bottom to top, means while rendering the Stack widget, PageView widget is placed the last layer, that’s why you are facing with swipe issue. You may have good reason to put other’s widget before PageView. To solve this, you can use another GestureDetector as the last Widget on Stack children and use PageController to switch between pages.

Stack(
  PageView(...),
  Container(...),
  Text(...),
///  .... 
    GestureDetector(),///* you can test and set animation, direction, duration etc
),  

Full widget

class SwapPV extends StatefulWidget {
  const SwapPV({Key? key}) : super(key: key);

  @override
  _SwapPVState createState() => _SwapPVState();
}

class _SwapPVState extends State<SwapPV> {
  PageController controller = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
      alignment: Alignment.center,
      children: [
        PageView(
          controller: controller,
          children: [
            Container(
              color: Colors.red,
            ),
            Container(
              color: Colors.amber,
            ),
            Container(
              color: Colors.green,
            ),
          ],
        ),
        Container(
          color: Colors.pink.withOpacity(.2),
          child: Text("OverLap Container"),
        ),
        Align(alignment: Alignment(0, .1), child: Text("Another OverLapText")),

        ///THis will controll the PageView
        GestureDetector(
          onTap: () {},
          onPanUpdate: (details) {
            // Swiping in right direction.
            if (details.delta.dx > 0) {
              controller.nextPage(
                  duration: Duration(milliseconds: 200), curve: Curves.easeIn);
            }

            // Swiping in left direction.
            if (details.delta.dx < 0) {
              controller.previousPage(
                  duration: Duration(milliseconds: 200),
                  curve: Curves.easeInOut);
            }
          },
        )
      ],
    ));
  }
}

Answered By – Yeasin Sheikh

Answer Checked By – Mary Flores (FlutterFixes Volunteer)