Question 207734 in Flutter Question posted in
The official Flutter documentation can be found here.

how to set height of gridview based on its content in flutter

I am trying to create a same screen like android app note,

here i am getting unexpected extra space as i have given expanded to GridView builder,

how to make gridview’s height based on its content height,

if i remove Expanded its showing unbounded height

i have atteched an image what i am getting from below code ….

enter image description here

Container(
          width: 350,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            color: Colors.white,
          ),
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0,
            horizontal: 16),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                buildCreatAccountText(),
                buildTextField(),
                buildAccountColorTitle(),
                Expanded(
                  child: GridView.builder(
                    itemCount: colorlist.length,
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 8,
                      mainAxisSpacing: 4,
                        crossAxisSpacing: 4,
                      ), itemBuilder: (context,index){
                        return DotContainer();
                  }),
                ),
                SizedBox(height: 16,),
                buildActionButtons(),
              ],
            ),
          ),
        )
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    i was mistaking that i used shrinkWrap with expanded...

    i think shrikWrap does not work with Expanded....

    I got what i wanted....

    Container(
          width: 350,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            color: Colors.white,
          ),
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0,
            horizontal: 16),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                buildCreatAccountText(),
                buildTextField(),
                buildAccountColorTitle(),
                GridView.builder(
shrikWrap:true,
                    itemCount: colorlist.length,
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 8,
                      mainAxisSpacing: 4,
                        crossAxisSpacing: 4,
                      ), itemBuilder: (context,index){
                        return DotContainer();
                  }),
               
                SizedBox(height: 16,),
                buildActionButtons(),
              ],
            ),
          ),
        )

  2. 0

    Remove Expanded and make shrinkWrap: true (GridView.builder):

    Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            Container(
              alignment: Alignment.center,
              height: 100,
              color: Colors.blueGrey.shade200,
              child: const Text("Upper UI"),
            ),

            const SizedBox(height: 20),

            GridView.builder(
                itemCount: colorList.length,
                shrinkWrap: true,
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 8,
                  mainAxisSpacing: 4,
                  crossAxisSpacing: 4,
                ),
                itemBuilder: (context,index){
                    return CircleAvatar(backgroundColor: colorList[index]);
              },
            ),
            const Spacer(),
            Row(
              children: [
                TextButton(
                  onPressed: (){},
                  child: const Text("Button 1"),
                ),
                TextButton(
                  onPressed: (){},
                  child: const Text("Button 2"),
                ),
              ],
            ),
            const SizedBox(height: 30),
          ],
        ),
      ),

    demo

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search