CODEWITHSUNDEEP
flutterflutter-layout
Dominik Roszkowski
Dominik Roszkowski

Reputation: 2563

How to display more than one page with PageView?

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:

enter image description here

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

Upvotes: 18

Views: 10119

Answers (4)

Eray Hamurlu
Eray Hamurlu

Reputation: 783

PageView.builder(
        controller: PageController(
          viewportFraction: 0.8,
        ),
        padEnds: false,
        itemCount: ...,
        itemBuilder: (context, index) {
          return ...;
        },
      );

is worked for me

Upvotes: 1

romannep
romannep

Reputation: 1

Some addition to accepted answer: if you wand to display two or other even number of pages use padEnds: false

          PageView.builder(
            controller: PageController(
              viewportFraction: 1/2,
            ),
            padEnds: false,
            itemCount: ...,
            itemBuilder: (context, index) {
              return ...;
            },
          );

Upvotes: 0

divyanshu bhargava
divyanshu bhargava

Reputation: 1585

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

Upvotes: 4

R&#233;mi Rousselet
R&#233;mi Rousselet

Reputation: 277587

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,
  ...
),

Upvotes: 31

Related Questions