CODEWITHSUNDEEP
flutterflutter-widgetflutter-pageview
Omid Fast
Omid Fast

Reputation: 303

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

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?

Upvotes: 0

Views: 3209

Answers (1)

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63559

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);
            }
          },
        )
      ],
    ));
  }
}

Upvotes: 3

Related Questions