CODEWITHSUNDEEP
dartflutterflutter-layout
Rick
Rick

Reputation: 2271

PageView.builder giving Horizontal viewport was given unbounded height error

I'm very new to flutter and I'm trying to learn how to create views. I tried to create a separate file of the view, or widget if that's what it's called in flutter, and just call it from the main.dart.

I have a separate widget containing this code

class PageEntryWidgetMain extends StatefulWidget {
  final PageViewEntryMain pageViewEntryMain;

  const PageEntryWidgetMain({Key key, this.pageViewEntryMain})
      : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _PageEntryWidgetMainState();
  }
}

class _PageEntryWidgetMainState extends State<PageEntryWidgetMain> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: <Widget>[
          Text(widget.pageViewEntryMain.title)
        ],
      ),
    );
  }
}

and I'm trying to show it by using a view pager with the following code

return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            PageView.builder(
              itemBuilder: (context, position) {
                PageEntryWidgetMain(
                  pageViewEntryMain: pages[position],
                );
              },
              itemCount: pages.length,
              scrollDirection: Axis.horizontal,
            )
          ],
        ),
      ),
    );

but it gives me the following errors

I'm a little confused at what it's actually complaining of. I am able to display just one view, by replacing the PageView.builder with this code

PageEntryWidgetMain(pageViewEntryMain: pages[0])

So I believe that the separate widget, in itself, does not have a problem. It's probably about how I am trying to use the ViewPager that's giving me errors.

I have been searching for PageView implementations but I have not seen one that actually has a separate view to just call for displaying. I need to learn it this way so I would be able to separate the views instead of just writing it all in one file.

Upvotes: 27

Views: 33235

Answers (3)

Justin Timbersaw
Justin Timbersaw

Reputation: 113

Note that if your widget tree is SingleChildSrollView > Column > PageView

Then surrounding PageView by Expanded or Flexible will cause RenderFlex children have non-zero flex but incoming height constraints are unbounded error

You can use Container as wrapper instead.

Upvotes: 0

tahaphuong
tahaphuong

Reputation: 91

You can use any Widget that has a fixed height and width to wrap the PageView.

For example, I use Container():

Column(
  children: <Widget>[
    Container(
      width: double.infinity,
      height: 100.0,
      child: PageView.builder(),
    ),
  ]
)

Upvotes: 7

greyaurora
greyaurora

Reputation: 907

PageView cannot be the direct child of Column. Change your column to add an Expanded between the two, as below: 

Column(
  children: <Widget>[
    Expanded(
      child: PageView.builder(),
    ),
  ]
)

To explain what's going on here, Column has an unbounded horizontal width, ie it'll keep expanding horizontally to take as much space as it's child needs. PageView (and any other horizontally scrolling widget) requires horizontal constraints for the scroll logic to work.

Expanded restricts the horizontal size of the PageView by taking up as much space as possible, which should solve the issue.

Upvotes: 40

Related Questions