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

Flutter – How to give specific constraints to the grid items

Problem: The grid item (skill card) does not take a specified height and width. instead, takes the height of the gridview (SizeBox(height:200))/crossAxisCount.

I want to give a specific width and height to the gridview. but it does not work.
I want the SkillCard() to take the specified height and width. How do I do that?

               SizedBox(
                      height: 200,
                      child: GridView.custom(
                        padding: const EdgeInsets.all(20),
                        gridDelegate:
                            const SliverGridDelegateWithFixedCrossAxisCount(
                          // mainAxisExtent: 100,
                          crossAxisCount: 3,
                        ),
                        childrenDelegate: SliverChildBuilderDelegate(
                          (BuildContext context, int index) {
                            return const SkillCard(
                              skill: 'Flutter',
                              percent: 75,
                              icon: flutterLogo,
                              height: 20,
                              width: 20,
                           
                            );
                          },
                          childCount: 9, // Total number of items
                        ),
                      ),
                    ),
Tags:

2

Answers


  1. 0

    • try this code to solve your issues.

          SizedBox(
height: 200,
child: GridView.custom(
  padding: const EdgeInsets.all(20),
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
  ),
  childrenDelegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      return SizedBox(
        height: 100, 
        width: 100,  
        child: SkillCard(
          skill: 'Flutter',
          percent: 75,
          icon: flutterLogo,
          height: 20,
          width: 20,
        ),
      );
    },
    childCount: 9, 
  ),
 ),
),
    Login or Signup to reply.
  2. 0

    Give this code a try:

    SizedBox(
  height: 200,
  child: GridView.custom(
    padding: const EdgeInsets.all(20),
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 3,
      childAspectRatio: (20 / 20),
      crossAxisSpacing: 10,
      mainAxisSpacing: 10,
    ),
    childrenDelegate: SliverChildBuilderDelegate(
      (BuildContext context, int index) {
        return SkillCard(
          skill: 'Flutter',
          percent: 75,
          icon: flutterLogo,
          height: 20,
          width: 20,
        );
      },
      childCount: 9,
    ),
  ),
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search