flutter how to give height to the childrens of GridView.Builder

Question

I am tring to give height to the childrens of gridview.builder but it's not accepting. I tried by using container but its not working... please help

GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
              ),
              itemCount: snapshot.data.length,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  height: 280.0,
                  child: Column(
                    children: <Widget>[
                      Padding(
                        padding:
                            EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Container(
                          height: 208.5,
                          width: 138.75,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10.0),
                              image: DecorationImage(
                                  image: NetworkImage(
                                      "${snapshot.data[index].url}"),
                                  fit: BoxFit.fill)),
                        ),
                      ),
                      Text(
                        snapshot.data[index].title,
                        style: TextStyle(fontSize: 17.0),
                      ),
                    ],
                  ),
                );
              },
            ),`

use GridView.count you can adjust the height – Supun Dewapriya Aug 14 '21 at 08:09 — Supun Dewapriya, Aug 14 '21 at 08:09

score 73 · Answer 1 · answered Dec 04 '18 at 15:01

73

You want to use the childAspectRatio property of the SliverGridDelegate preferably with MediaQuery:

class HomePage extends StatelessWidget {
  final List<String> items = <String>[
    "Item 1",
    "Item 2",
    "Item 3",
    "Item 4",
    "Item 5",
    "Item 6",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: MediaQuery.of(context).size.width /
              (MediaQuery.of(context).size.height / 4),
        ),
        itemCount: items.length,
        itemBuilder: (context, index) {
          return GridTile(child: Text(items[index]));
        },
      ),
    );
  }
}

answered Dec 04 '18 at 15:01

soupjake

3,293
3
17
32

2

I have to show grid in 1:1 (width:height) ratio but height should have additional 100 pixels extra. eg. How can i do? Kindly suggest. Thanks. – Kamlesh May 25 '21 at 15:07
1

Great reponse, haven't found anything better for now – Radzik Jul 08 '21 at 16:35
I had to add shrinkWrap: true to make it work in my case – Laurent Aug 29 '22 at 14:06
What `/4` mean, exaclty? is it necessary? Because i dont use the division and it works fine, because the division make the viewport even smaller.. – Muhammad Faisal Oct 18 '22 at 11:42

score 41 · Answer 2 · answered Nov 15 '21 at 13:49

41

You can use mainAxisExtent instead of childAspectRatio

    GridView.builder(
            physics: BouncingScrollPhysics(),
            itemCount: resumes.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              mainAxisExtent: 256,
            ),
            itemBuilder: (_, index) => Container(),
          ),

answered Nov 15 '21 at 13:49

Furlan

491
5
4

2

The only helpful answer I found. – Shadab Hashmi Dec 16 '21 at 18:49

score 8 · Answer 3 · answered Jan 13 '21 at 14:22

8

By changing childAspectRatio 0 to 1 you can change hight of item

answered Jan 13 '21 at 14:22

harsha.kuruwita

1,315
12
21

1

I don't think so. – Behzod Faiziev Nov 26 '22 at 15:51

score 3 · Answer 4 · answered Jan 29 '21 at 22:53

3

to make the container bigger, aspect ration should be less than 1 but greater than 0. e.g 0.4

answered Jan 29 '21 at 22:53

Samson Austin Dumelo

31
1

score 2 · Answer 5 · edited Dec 10 '21 at 05:54

import 'package:flutter/material.dart';                 

class AllCategories extends StatelessWidget {             
  AllCategories({Key? key}) : super(key: key);          
  
 

  @override
  Widget build(BuildContext context) {                    
    return Scaffold(                     
      backgroundColor: Colors.white,              
      appBar: AppBar(              
        backgroundColor: Colors.white,                
        title: Text('All Categories'),                
        leading: IconButton(              
          icon: Icon(                 
            EvaIcons.arrowIosBack,           
            color: Colors.black,
          ),              
          onPressed: () {
            Navigator.pop(context);            
          },
        ),
      ),                 
      body: GridView.builder(                
          shrinkWrap: true,                    
          itemCount: 6,                   
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(                  
              crossAxisCount: 2, childAspectRatio: 2 / 3),                       
          itemBuilder: (context, index) {                            
            return Container(              
                margin: EdgeInsets.all(8),                         
                decoration: BoxDecoration(                       
                  borderRadius: BorderRadius.circular(2),                       
                ),                           
                child: Column(                          
                  crossAxisAlignment: CrossAxisAlignment.start,                              
                  children: [                          
                    Flexible(            
                      child: Container(                 
                        decoration: BoxDecoration(         
                            image: DecorationImage(           
                                fit: BoxFit.cover,                    
                                image: NetworkImage(             
                                    'https://t3.ftcdn.net/jpg/03/15/59/88/360_F_315598844_WbT1Ix5HL17KN6sDzTBhu1zE4nb7Ry3o.jpg'))),                       
                      ),             
                    ),                       
                    Padding(                      
                      padding: const EdgeInsets.fromLTRB(8, 10, 0, 0),
                      child: Text(            
                        'Nike',                    
                        style: TextStyle(                                
                            fontSize: 18, fontWeight: FontWeight.w900),      
                      ),
                    ),                       
                    Padding(             
                      padding: const EdgeInsets.all(8.0),               
                      child: Text("Just Do It",            
                          style: TextStyle(fontSize: 15, color:  
    Colors.grey)),
                    )    
                  ],               
                ));                      
          }),                        
    );              
  }            
}

Chiisom · Answer 6 · 2022-10-07T12:35:13.873

try the flutter_staggered_grid_view package

Unlike the natural GridView.builder, the MasonryGridView allows the children heights to be sized based on their content size.

                  MasonryGridView.count(
                      mainAxisSpacing: 10,
                      crossAxisSpacing: 10,
                      crossAxisCount: 2,
                    
                      itemCount: 
                      snapshot.data.length,
                      itemBuilder: (BuildContext context, int index) {
                 return Container(
                   height: 280.0,
                   child: Column(
                   children: <Widget>[
                    Padding(
                      padding:
                        EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(
                      height: 208.5,
                      width: 138.75,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10.0),
                          image: DecorationImage(
                              image: NetworkImage(
                                  "${snapshot.data[index].url}"),
                              fit: BoxFit.fill)),
                    ),
                  ),
                  Text(
                    snapshot.data[index].title,
                    style: TextStyle(fontSize: 17.0),
                  ),
                ],
              ),
            );},)

score 1 · Answer 7 · answered Apr 14 '22 at 07:55

1

remove childAspectRatio and use this mainAxisExtent: 256,

answered Apr 14 '22 at 07:55

mohammed Sedky

39
2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 14 '22 at 08:05

score 1 · Answer 8 · answered Apr 18 '22 at 05:32

My workaround was to use a Wrap and then use list.map() to list data in the children. This also gives more control on how you want your list to display.

class MoviesList extends StatelessWidget {
  const MoviesList({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: SingleChildScrollView(
                padding: const EdgeInsets.symmetric(vertical: 20),
                child: SizedBox(
                    width: MediaQuery.of(context).size.width,
                    child: Wrap(
                        alignment: WrapAlignment.spaceEvenly,
                        spacing: 10,
                        runSpacing: 10,
                        direction: Axis.horizontal,
                        children: _data.map((item) {
                          return Column(
                            children: [
                              Container(
                                height: MediaQuery.of(context).size.width * 0.6,
                                width: MediaQuery.of(context).size.width * 0.4,
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(14),
                                    image: DecorationImage(
                                        fit: BoxFit.fitHeight,
                                        image: NetworkImage(item['Poster']))),
                              ),
                              Text(item['Title'])
                            ],
                          );
                        }).toList())))));
  }
}

List _data = [
  {
    "Title": "Batman",
    "Poster":
        "https://images-na.ssl-images-amazon.com/images/M/MV5BMTYwNjAyODIyMF5BMl5BanBnXkFtZTYwNDMwMDk2._V1_.jpg"
  },
  {
    "Title": "The Dark Knight",
    "Poster":
        "https://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_UX182_CR0,0,182,268_AL_.jpg"
  },
  {
    "Title": "Dawn of Justice",
    "Poster":
        "https://ia.media-imdb.com/images/M/MV5BYThjYzcyYzItNTVjNy00NDk0LTgwMWQtYjMwNmNlNWJhMzMyXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_UX182_CR0,0,182,268_AL_.jpg"
  },
  {
    "Title": "The Dark Knight Rises",
    "Poster":
        "https://ia.media-imdb.com/images/M/MV5BMTk4ODQzNDY3Ml5BMl5BanBnXkFtZTcwODA0NTM4Nw@@._V1_UX182_CR0,0,182,268_AL_.jpg"
  },
  {
    "Title": "The LEGO Batman Movie",
    "Poster":
        "https://ia.media-imdb.com/images/M/MV5BMTcyNTEyOTY0M15BMl5BanBnXkFtZTgwOTAyNzU3MDI@._V1_UX182_CR0,0,182,268_AL_.jpg"
  },
  {
    "Title": "Batman & Robin",
    "Poster":
        "https://ia.media-imdb.com/images/M/MV5BMGQ5YTM1NmMtYmIxYy00N2VmLWJhZTYtN2EwYTY3MWFhOTczXkEyXkFqcGdeQXVyNTA2NTI0MTY@._V1_UX182_CR0,0,182,268_AL_.jpg"
  },
  {
    "Title": "Batman Returns",
    "Poster":
        "https://ia.media-imdb.com/images/M/MV5BOGZmYzVkMmItM2NiOS00MDI3LWI4ZWQtMTg0YWZkODRkMmViXkEyXkFqcGdeQXVyODY0NzcxNw@@._V1_UX182_CR0,0,182,268_AL_.jpg"
  }
];

score 0 · Answer 9 · answered Dec 29 '22 at 01:33

0

Fixed by adding shrinkWrap: true to the View.builder.

answered Dec 29 '22 at 01:33

silver daymon

149
1
5

score 0 · Answer 10 · answered Apr 04 '23 at 07:59

You can use mainAxisExtent instead of childAspectRatio :--->>>

GridView.builder(

        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          mainAxisExtent: MediaQuery.of(context).size.width/2 or 3 or

any (according to your need) ), itemBuilder: (_, index) {return Container(),} ),

score 0 · Answer 11 · answered Aug 21 '23 at 12:39

0

Add mainAxisExtent, this is the height of one item

 gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                    mainAxisExtent: 280.0
                  ),

answered Aug 21 '23 at 12:39

user3292624

180
2
10

flutter how to give height to the childrens of GridView.Builder

11 Answers11

Linked