A RenderFlex overflowed by 134 pixels on the bottom. The relevant error-causing widget was Column

Question

I am using a gridview.builder and it is wrapped with an Expanded widget. i want to return a container from this gridview and this container has a child Column.

Column will render some of text widget and after that it will contain some row widget with icon and text (space between)

problem 1: when i place column inside container it shows a fixed height of this container and i can't able to place extra widget in column. it shows :

A RenderFlex overflowed by 134 pixels on the bottom.

how can i create a widget like this? enter image description here

here's my code:

 body: Column(
    children: [
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 48.0),
        child: TextFormField(
          decoration: InputDecoration(
            suffixIcon: Icon(Icons.search),
            // labelText: 'Team Name',
            hintText: 'Search Employee',
          ),
        ),
      ),
      SizedBox(
        height: 30,
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          GestureDetector(
            onTap: () {
              // setState(() {
              print('tapped 1');
              // });
              Center(
                child: Text('HEllo'),
              );
            },
            child: IconRoundCircle(
              hasIcon: false,
              title: 'Member',
              border: Utils.colorPrimary,
              // color: ,
            ),
          ),
          IconRoundCircle(
            hasIcon: false,
            title: 'Maneger',
            border: Utils.colorBlue,
            color: Colors.white,
          ),
          IconRoundCircle(
            hasIcon: false,
            border: Utils.colorYollow,
            color: Utils.colorYollowSecondary,
            title: 'Admin',
          ),
        ],
      ),
      Expanded(
        child: GridView.builder(
          shrinkWrap: true,
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
          ),
          itemCount: 2,
          itemBuilder: (BuildContext context, int index) {
            return Padding(
              padding: EdgeInsets.all(18.0),
              child: Container(
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey, width: 2),
                  borderRadius: BorderRadius.circular(5),
                ),
                child: Expanded(
                  child: Column(
                    children: [
                      Icon(
                        Icons.person,
                        size: 50,
                        color: Colors.black,
                      ),
                      Text('Name'),
                      Text('Designation'),
                      Icon(
                        Icons.person,
                        size: 50,
                        color: Colors.black,
                      ),
                      Text('data'),
                      Text('data'),
                      Text('data'),
                      Text('data'),
                      Text('data'),
                      Text('data'),
                      Text('data'),
                      Text('data'),
                    ],
                  ),
                ),
              ),
            );
          },
        ),
      ),
    ],
  ),

here's how ui error look like:

enter image description here

related error :

Tried to build dirty widget in the wrong build scope. Incorrect use of ParentDataWidget.

Answer 1

You can use childAspectRatio to maintain the item size,

The Incorrect use of ParentDataWidget. is comming because of using Expanded inside itemBuilder, it will be

Expanded(
  child: GridView.builder(
    shrinkWrap: true,
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
      childAspectRatio: 4 / 5, ///based your need, width/height
    ),
    itemCount: 2,
    itemBuilder: (BuildContext context, int index) {
      return Padding(
        padding: EdgeInsets.all(18.0),
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.grey, width: 2),
            borderRadius: BorderRadius.circular(5),
          ),
          child: Column(
            children: [
              Icon(

Or if it is just two item, you can use Row.

Answer 2

You can change mainAxisExtent to solve gridview overflow like:

gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              mainAxisExtent: 300, // <- add this
            ),

or wrap your Column inside GridView.builder with SingleChildScrollView to scroll when items are bigger than size

SingleChildScrollView(
                    child: Column(
                      children: [
                        Icon(
                          Icons.person,
                          size: 50,
                          color: Colors.black,
                        ),
                        Text('Name'),
                        Text('Designation'),
                        Icon(
                          Icons.person,
                          size: 50,
                          color: Colors.black,
                        ),
                        Text('data'),
                        Text('data'),
                        Text('data'),
                        Text('data'),
                        Text('data'),
                        Text('data'),
                        Text('data'),
                        Text('data'),
                      ],
                    ),
                  ),

its good idea to read GridView class again