How to set fixed height of children in Flutter PageView?

1.1k Views Asked by At

By default the children of PageView will take 100% height of PageView. What i want is to set fixed height for each child (let's say 100px). I know that you can set viewportFraction but that doesn't help because the height of ListView is dynamic (2/3 of screen) which makes the children height dynamic as well.

What I've tried so far...

PageView(
      scrollDirection: Axis.vertical,
      controller: PageController(
        initialPage: 0,
      ),
      children: <Widget>[
        SizedBox(
          height: 100,
          child: Container(
            color: Colors.red,
          ),
        ),
        SizedBox(
          height: 100,
          child: Container(
            color: Colors.green,
          ),
    ),
    SizedBox(
      height: 100,
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
)

I was hoping that SizedBox will give each child height of 100.

EDIT: Detailed explanation of what I want. enter image description here

The list takes 2/3 of screen size with every item in list having fixed height. The top item that is visible is "selected" (at index 0 by default).
When user scrolls up the first item gets hidden and now the second item is "selected" (that's why I need snapping).

So the list needs to have ability to get the current index, be able to snap (this is why I went with PageView) and most importantly that the top item is "selected", not the middle one.

3

There are 3 best solutions below

0
On
SizedBox(
  height: 100,
  child: PageView(
  children: [

  ]),
);
5
On

Wrap the Sizedbox widget with "Align" like this :

        Align(
          child: SizedBox(
            height: 100,
            child: Container(
              color: Colors.red,
            ),
          ),
        )
3
On

How about swapping container and sizedbox? Make Container the parent of SizedBox with height 100.