Vertical viewport was given unbounded height when i try to add a gridview

Issue

Here is my code:

return Scaffold(
      body: SingleChildScrollView(
        child: Container(
          child: Stack(
            children: [
              Container(
                width: size.width,
                height: size.height * 0.40 ,
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        colors: [Colors.blue.shade900,Colors.blue.shade800,Colors.blue.shade600,]
                    )
                ),
              ),
              Container(
                alignment: Alignment.center,
                margin: EdgeInsets.only(top: 40),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    CircleAvatar(backgroundImage: AssetImage("assets/images/ampoule.jpg"),radius: 30),
                    SizedBox(height: 10.0),
                    Text("Menu principal",style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold,color: Colors.white)),
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 160),
                padding: EdgeInsets.all(20),
                height: size.height*0.60,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(topLeft: Radius.circular(60),topRight: Radius.circular(60)),
                  color: Colors.white
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      padding: EdgeInsets.only(top:20,left:20,right:20),
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10.0),
                          boxShadow: [
                            BoxShadow(color: Color.fromRGBO(225, 95, 27, .3),blurRadius: 20.0)
                          ]
                      ),
                      child: GridView.builder(
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
                        itemBuilder: (context, index){
                          return buildMenuCard(menus[index].titre, menus[index].icon); ---> line 77:39
                        },
                      )
                    ),
                  ],
                )
              )
            ],
          ),
        ),
      ),
    );
  }

======== Exception caught by rendering library ===================================================== The following assertion was thrown during performResize(): Vertical viewport was given unbounded height.

Viewports expand in the scrolling direction to fill their container. In this case, a vertical viewport was given an unlimited amount of vertical space in which to expand. This situation typically happens when a scrollable widget is nested inside another scrollable widget.

If this widget is always nested in a scrollable widget there is no need to use a viewport because there will always be enough vertical space for the children. In this case, consider using a Column instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size the height of the viewport to the sum of the heights of its children.

The relevant error-causing widget was: GridView GridView:file:///F:/xxxxxx/lib/general/menu_screen.dart:77:39

The following assertion was thrown during performLayout(): RenderBox was not laid out: RenderViewport#0e283 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1929 pos 12: 'hasSize'

Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause. thanks in advance

Solution

That's because the GridView is inside a Container inside a Column. The Column has no size constraints. The Container has no size constraints. GridView has no size constraints. Because, of these Flutter doesn't know how to draw the GridView inside the Column, since it can have an infinite height. Give your Container a height property, so the GridView knows its possible height.

Container(
   height: //some height
                  padding: EdgeInsets.only(top:20,left:20,right:20),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10.0),
                      boxShadow: [
                        BoxShadow(color: Color.fromRGBO(225, 95, 27, .3),blurRadius: 20.0)
                      ]
                  ),
                  child: GridView.builder(
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
                    itemBuilder: (context, index){
                      return buildMenuCard(menus[index].titre, menus[index].icon); ---> line 77:39
                    },
                  )
                ),

Answered By - Scott Godfrey