PageView: Disable the default scrolling and replace it with Tap event

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?

Solution 1:

To disable swiping you can set:

PageView(physics: NeverScrollableScrollPhysics())

Solution 2:

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);
          }),
          new Container(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.

Solution 3:

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()

Solution 4:

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

Solution 5:

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
);