如何让 ListView 在滑动时滚动到下一个元素？

Question

I'm trying to make ListView swipe work in a way similar to the scroll_navigation library. I want each swipe to scroll to the next 100%-wide element without stopping in any place between. Is it possible or should I use another widget?

class HorizontalScroll extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Container(
          width: 400,
          color: Colors.purple[600],
          child: const Center(
              child: Text(
            'Item 1',
            style: TextStyle(fontSize: 18, color: Colors.white),
          )),
        ),
        Container(
          width: 400,
          color: Colors.purple[500],
          child: const Center(
              child: Text(
            'Item 2',
            style: TextStyle(fontSize: 18, color: Colors.white),
          )),
        ),
        Container(
          width: 400,
          color: Colors.purple[400],
          child: const Center(
              child: Text(
            'Item 3',
            style: TextStyle(fontSize: 18, color: Colors.white),
          )),
        ),
        Container(
          width: 400,
          color: Colors.purple[300],
          child: const Center(
              child: Text(
            'Item 4',
            style: TextStyle(fontSize: 18, color: Colors.white),
          )),
        ),
      ],
    );
  }
}

Answer 1

You can use PageView

PageView(
      children: [
        Center(child: Text('Page 1')),
        Center(child: Text('Page 2')),
        Center(child: Text('Page 3')),
        Center(child: Text('Page 4')),
      ],
    )

Answer 2

To achieve this, the easiest method is to use a PageView instead of a ListView . It will by default do what you want, scroll to the next 100% wide element. Here is an example:

PageView(
  children: <Widget>[
    Container(
      color: Colors.amber,
    ),
    Container(
      color: Colors.black,
    ),
    Container(
      color: Colors.white,
    ),
  ],
)