Weird behaviour with PageView

[theobouwman]

Objective

I just wanted to create a Widget with multiple PageView Widgets in a Column Widget for users to scroll through.

The documentations says:

Each child of a page view is forced to be the same size as the viewport.

Why is this?

Steps to Reproduce

Create a "screen" and start that as the homescreen:

class HomeScreen extends StatefulWidget {
  @override
  State createState() => new HomeScreenState();
}

class HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return new Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          new Flexible(
              child: new PageView.builder(
                  itemBuilder: (BuildContext context, int index) {
                    return new RaisedButton(
                        color: Colors.green,
                        child: new Text(index.toString()),
                        onPressed: () {});
                  },
                  itemCount: 6))
        ]);
  }

Logs

When I remove the Flexible Widget it gives me this error:

I/flutter (19887): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (19887): The following assertion was thrown during performResize():
I/flutter (19887): Horizontal viewport was given unbounded height.
I/flutter (19887): Viewports expand in the cross axis to fill their container and constrain their children to match
I/flutter (19887): their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of
I/flutter (19887): vertical space in which to expand.

Flutter Doctor

[✓] Flutter (on Mac OS X 10.12.5 16F73, locale nl-NL, channel master)
    • Flutter at /development/flutter
    • Framework revision 46b2e88612 (14 hours ago), 2017-07-17 22:51:56 -0700
    • Engine revision c757fc7451
    • Tools Dart version 1.25.0-dev.4.0

[✓] Android toolchain - develop for Android devices (Android SDK 26.0.0)
    • Android SDK at /Users/theobouwman/Library/Android/sdk
    • Platform android-26, build-tools 26.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)

[✓] iOS toolchain - develop for iOS devices (Xcode 8.3.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 8.3.3, Build version 8E3004b
    • ios-deploy 1.9.0
    • CocoaPods version 1.1.1

[✓] Android Studio
    • Android Studio at /Applications/Android Studio 3.0 Preview.app/Contents
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-884-b01)

[✓] Android Studio (version 2.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)

[✓] IntelliJ IDEA Ultimate Edition (version 2017.1.5)
    • Flutter plugin version 15.1
    • Dart plugin version 171.4694.29

[✓] Connected devices
    • Nexus 5X • 0259749fb8c21037 • android-arm • Android 7.1.2 (API 25)

[Hixie]

What is the purpose of the Column in this code?

[theobouwman]

@Hixie well, I want to show multiple PageViews inside a column.

Sent from my Google Nexus 5X using FastHub

[Hixie]

How high do you want each PageView to be?

[theobouwman]

@Hixie the height of the children, Card Widgets

Sent from my Google Nexus 5X using FastHub

[Hixie]

Ah. The problem is that there's no way for the page views to know how high all its children are, because it only renders one at a time. The others aren't even in memory. So it would have no idea how high to be.

[theobouwman]

@Hixie so it's not possible? If so, that would be weird right?

Sent from my Google Nexus 5X using FastHub

[Hixie]

Well you can put the PageViews inside a SizedBox with a height, if you know how high your page views are going to be. But we don't currently have a way to shrink-wrap a PageView around its children, because we don't know what the children are (which is very intentional, it's to get a performance improvement).

[Pushan-Gupta]

@Hixie and if we dont know the height?

[Hixie]

To clarify, you want a PageView that is as high as the highest page's content?

This is not something we currently support. To do that, you'd have to fully lay out every page (which could potentially themselves be infinitely high, e.g. if a page has an infinite scrolling list). That defeats the whole point of PageView which is to only instantiate what's on the screen. It would be potentially very inefficient to do that.

[footurist]

I was just trying to achieve the exact same thing as the author. After failing for stubborn 2 hours I found this issue. Is this still considered unwanted because of performance or might this actually be implemented in the future?

[Hixie]

I recommend filing a new issue that describes (without reference to specific widgets) the precise interface you are trying to implement (ideally with diagrams), and then we can see what advice we can give you. :-)

[sabinbajracharya]

@Hixie I want the child of the pageview to have a fixed width. Right now I am using viewportFraction and some margin to achieve that in portrait mode but sadly it won't work in landscape as shown in the screenshot below.
Is there any alternate way to achieve this?

Potrait Screenshot:

Landscape Screenshot:

[sabinbajracharya]

OK I calculated the "viewportFraction" of PageController as

viewportFraction = widthOfTheFrame/screenWidth

This fixed the issue but will there be built in way to give a fixed height and width to the child of pageview?

[amirrezasalimi]

same problem

[joelbrostrom]

Same here as well.

I get that the height in a horizontal page view can't be calculated, but you should still be able to put a fixed width on each child, right?

Is there a way to preserve the children's width and/or lock the aspect ratio?
Now any picture in the PageView becomes distorted.

[feinstein]

@Hixie I understand PageView can't know the size of all its children, as the children aren't even in memory, but the current actual child that the PageView is showing is known right?

So could the PageView adapt itself to the current page in memory?

I think this is related to my issue #46803

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.