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?
CodePudding user response:
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);
}
},
)
],
));
}
}