Search code examples
flutterdartflutter-layout

Vertical viewport was given unbounded height


This is my code:

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

Exception as follows:

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)

Solution

  • Add this two lines

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

    In this code snippet, have a ListView.builder with the following properties:

    1. scrollDirection: Axis.vertical: This property specifies the scrolling direction of the list. In this case, it is set to Axis.vertical, which means the list will scroll vertically. You can also set it to Axis.horizontal if you want the list to scroll horizontally.

    2. shrinkWrap: true: By default, a ListView takes up as much space as it can along its main axis. However, when you set shrinkWrap to true, the ListView will try to wrap its content and only take up as much space as needed. This can be helpful when you want to include a ListView inside another scrollable view or when the size of the list is not predetermined.