Search code examples
flutterdartpageviews

How to make previous and next items visible using PageView in Flutter?


How to make the previous and the next items of a PageView visible at the ends of the screen slightly?

enter image description here


Solution

  • First you need to specify the page controller's viewport fraction which defaults to 1.0 :

    final _controller = PageController(viewportFraction: 0.7);
    

    Then use the custom controller for your page view:

    PageView.builder(
                  itemCount: _pages.length,
                  controller: _controller,
                  itemBuilder: (BuildContext context, int index) {
                    return _pages[index];
                  },
                )