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

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

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.

To disable swiping you can set:

PageView(physics: NeverScrollableScrollPhysics())