If I have a PageView
, how can I disable the default scroll behavior (swiping) and make it such that the next item is scrolled into view by tapping on a button instead?
5 Answers
To disable swiping you can set:
PageView(physics: NeverScrollableScrollPhysics())
-
Wouldn't this disable the ability to scroll using a
PageController
?– SakchhamDec 16, 2018 at 19:36 -
What if I want to disable swipe and swipe to the next one on a button press? Jan 13, 2019 at 17:32
-
15Just to answer @SakchhamSharma's question: this only disables swiping and you can still animate to other pages programmatically via the controller, for instace
_controller.nextPage()
Jan 23, 2019 at 7:13 -
2Hi @JannieTheunissen, I meant scroll specifically. You can change pages, yes; but animation is restricted due to the underlying
NeverScrollableScrollPhysics
.– SakchhamJan 23, 2019 at 13:58
So I have tried to figure this out as follows, and if anyone has a better solution, please share it with us.
Make a button go to the next item in the PageView
:
Add a PageController
to your PageView
, and the methods animateTo
or jumpTo
to go to the desired item when user presses a button. I have made it such that the entire width of the current view is the offset so the transition to the next item happens successfully.
onPressed: () {
c.animateTo(MediaQuery
.of(context)
.size
.width, duration: new Duration(seconds: 1),
curve: Curves.easeIn);
}
Disable the default swiping behavior:
All I did was to wrap up my PageView
inside IgnorePointer
to ignore any user interaction, I really do not like this solution, it may be working fine in this example, however, in other situations I might want the user to interact with a single widget within the current displayed page.
This is my sample code:
class FirstPage extends StatefulWidget {
@override
_FirstPageState createState() => new _FirstPageState();
}
class _FirstPageState extends State<FirstPage> {
ScrollController c;
@override
void initState() {
super.initState();
c = new PageController();
}
@override
Widget build(BuildContext context) {
return new Scaffold(
floatingActionButton: new Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new FloatingActionButton(
child: new Icon(Icons.navigate_before), onPressed: () {
//c.animateTo(MediaQuery.of(context).size.width, duration: new Duration(seconds: 1), curve: Curves.easeIn);
c.jumpTo(0.0);
}),
SizedBox(width: 15.0,),
new FloatingActionButton(
child: new Icon(Icons.navigate_next), onPressed: () {
c.animateTo(MediaQuery
.of(context)
.size
.width, duration: new Duration(seconds: 1),
curve: Curves.easeIn);
}),
],),
appBar: new AppBar(title: new Text("First Page")),
body: new IgnorePointer(child: new PageView(
controller: c,
children: <Widget>[
new Column (
children: <Widget>[new Container (child: new Text("First Item"))
]),
new Container (child: new Text("Second Item")),
],
),),
);
}
}
Any suggestions or modifications on this solution are welcomed.
-
Is it possible to detect the forward and backward swipe events in a page view ? using listener ?– Shyju MMay 2, 2018 at 8:40
-
@ShyjuMadathil with a
PageViewController
you can add listeners that will trigger on events change. However,PageView.builder()
provides you withonPageChanged
property that triggers when a page is changed forward or backward, which I believe is what you're looking for. Sep 14, 2018 at 14:44 -
I tried just now. I was able to run
MediaQuery.of (context) .size.width * (pageIndex + 1)
on multiple pages this way. Almost I have 70 pages from more. Apr 13, 2020 at 8:32 -
1
The best way to stop scrolling is by changing the physics parameter of the page view
To stop scrolling past edges if the PageView is at the start or end use
physics: ClampingScrollPhysics()
To stop scrolling altogether use
physics: NeverScrollableScrollPhysics()
An additional note that may help some people.
Using PageView(physics:new NeverScrollableScrollPhysics()) is very useful if you have a Dyanmic GoogleMap in one of the pages that that has stopped reacting to gestures. It seems the PageView takes priority and overrides the map.
Adding NeverScrollablePhysics() allows the map to react to gestures again.
thanks
To disable swiping by Gestures, add following property to your PageView:
PageView(physics:new NeverScrollableScrollPhysics())
To navigate to next page/widget in PageView, add following code to your button's onPressed attribute:
_pageController.nextPage(
duration: Duration(milliseconds: 1000),
curve: Curves.easeIn
);