[flutter] 수직 뷰포트의 높이가 제한되지 않았습니다.

Program / 글쓴이

이것은 내 코드입니다.

  @override
  Widget build(BuildContext context) {
    return new Material(
      color: Colors.deepPurpleAccent,
      child: new Column(
       mainAxisAlignment: MainAxisAlignment.center,
          children:<Widget>[new GridView.count(crossAxisCount: _column,children: new List.generate(_row*_column, (index) {
            return new Center(
                child: new CellWidget()
            );
          }),)]
      )
    );
  }

다음과 같은 예외 :

I/flutter ( 9925): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 9925): The following assertion was thrown during performResize():
I/flutter ( 9925): Vertical viewport was given unbounded height.
I/flutter ( 9925): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter ( 9925): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter ( 9925): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter ( 9925): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter ( 9925): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter ( 9925): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter ( 9925): the height of the viewport to the sum of the heights of its children.
I/flutter ( 9925):
I/flutter ( 9925): When the exception was thrown, this was the stack:
I/flutter ( 9925): #0      RenderViewport.performResize.<anonymous closure> (package:flutter/src/rendering/viewport.dart:827:15)
I/flutter ( 9925): #1      RenderViewport.performResize (package:flutter/src/rendering/viewport.dart:880:6)
I/flutter ( 9925): #2      RenderObject.layout (package:flutter/src/rendering/object.dart:1555:9)

답변

이 두 줄 추가

ListView.builder(
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
...

답변

당신이 사용하려고 할 때 일반적으로 발생 ListView/ GridView내부를 Column, 그것을 해결하는 여러 가지 방법이 있습니다, 여기 몇 가지 나열하고있다.

  1. 랩 ListView에서Expanded 

    Column(
  children: <Widget>[
    Expanded( // wrap in Expanded
      child: ListView(...),
    ),
  ],
)

  2. Wrap ListView in SizedBox and give a bounded height

    Column(
  children: <Widget>[
    SizedBox(
      height: 400, // fixed height
      child: ListView(...),
    ),
  ],
)

  3. Use shrinkWrap: true in ListView.

    Column(
  children: <Widget>[
    ListView(
      shrinkWrap: true, // use this
    ),
  ],
)

답변

So, everyone posted answers but no one cared to explain why:
I’ll copy the documentation about shrinkWrap:

Whether the extent of the scroll view in the [scrollDirection] should be
determined by the contents being viewed.

If the scroll view does not shrink wrap, then the scroll view will expand
to the maximum allowed size in the [scrollDirection]. If the scroll view
has unbounded constraints in the [scrollDirection], then [shrinkWrap] must
be true.

Shrink wrapping the content of the scroll view is significantly more
expensive than expanding to the maximum allowed size because the content
can expand and contract during scrolling, which means the size of the
scroll view needs to be recomputed whenever the scroll position changes.

Defaults to false.

So, taking the vocabulary of the docs, what’s happening here is that our ListView is in a situation of unbounded constraints (in the direction that we are scrolling), thus the ListView will complain that:

… a vertical viewport was given an unlimited amount of vertical space in
which to expand.

By simply setting shrinkWrap to true will make sure that it wraps its size defined by the contents. A sample code to illustrate:

// ...
  ListView(
    // Says to the `ListView` that it must wrap its
    // height (if it's vertical) and width (if it's horizontal).
    shrinkWrap: true,
  ),
// ...

That’s what is going with your code, nonetheless, @Rémi suggestion is the best for this case, using Align instead of a Column.

답변

put grid view inside Flexible or Expanded widget

return new Material(
    color: Colors.deepPurpleAccent,
    child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children:<Widget>[
         Flexible(
          child:  GridView.count(crossAxisCount: _column,children: new List.generate(_row*_column, (index) {
          return new Center(
             child: new CellWidget(),
          );
        }),))]
    )
);

답변

This situation typically happens when a scrollable widget is nested inside another scrollable widget.

In my case i use GridView inside of Column and that error throws.

GridView widget has shrinkWrap property/named parameter, to set it true my problem is fixed.

GridView.count(
  shrinkWrap: true,
  // rest of code
)

답변

Don’t use Column for single child alignment. Use Align instead. 

    new Align(
      alignment: Alignment.topCenter,
      child: new GridView(),
    )

답변

Although shrinkWrap do the thing, but you can’t scroll in ListView.

If you want scrolling functionality, you can add physics property:

ListView.builder(
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
    physics: ScrollPhysics(),
...