How to display more than one page with PageView?

Question

I have an app that use PageView and I want to make it responsive – such that on a tablet, it shows 3 pages and with a smartphone, it shows only one:

How can I change the number of pages shown in a PageView?

Answer 1

You can control how many pages are displayed in a PageView through a PageController

var controller = PageController(viewportFraction: 1 / 3);

Then pass it to your PageView:

PageView(
  controller: controller,
  ...
), 

Answer 2

You have to use LayoutBuilder to check the max width and then you can set the PageController(viewportFraction: ); accordingly.

Here is an example:

  PageController pageController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(builder: (context, constrains) {
        if (constrains.maxWidth < 600) {
          pageController = PageController(viewportFraction: 1.0);
        } else {
          pageController = PageController(viewportFraction: 0.3);
        }
        return PageView.builder(
          controller: pageController,
          itemCount: places.length,
          itemBuilder: (context, index) {
            // return your view for pageview
          },
        );
      }),
    );
  }