How to set grid view column height?

Question

I am new to flutter and don't have much experience.
I am trying to develop an android app using flutter and this is my previous app design.

And I'm also able to successfully make grid view in flutter but the column height is the problem. Is their anyone who can help me with my flutter code.

 class MyHomePage extends StatelessWidget {

  @override
   Widget build(BuildContext context) {
     hi(){

    }
     return new Scaffold(

         appBar: new AppBar(
           actions: <Widget>[],
                title: new Text("milla"),
              ),
       body: new Container(


         child: new Center(

            child: new GridView.count(
              shrinkWrap: true,
              scrollDirection: Axis.vertical,
              childAspectRatio:1.0,
              crossAxisCount: MediaQuery.of(context).size.width <= 400.0 ? 3 : MediaQuery.of(context).size.width >= 1000.0 ? 5 : 4,

           // Create a grid with 2 columns. If you change the scrollDirection to
           // horizontal, this would produce 2 rows.

           crossAxisSpacing: 2.0,
           // Generate 100 Widgets that display their index in the List
           children: new List.generate(100, (index) {

             return  new Column(
                 crossAxisAlignment: CrossAxisAlignment.stretch,
                 mainAxisSize: MainAxisSize.min,

                 verticalDirection: VerticalDirection.down,
                 children: <Widget>[


                   new Center(

                     child:  new Image(


                         image: new NetworkImage('https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true')
                     )
                   ),
                   new Expanded(child: new Text("apple2")), new Expanded(child: new Text(
                   'Item $index',
                   style: Theme.of(context).textTheme.headline,
                 )),new Expanded(child: new Center(child: new Row(
                     crossAxisAlignment: CrossAxisAlignment.center,

                     children: <Widget>[new Text("+",style: new TextStyle(fontSize: 24.0),),new Text("1"),new Text("-")])))]
             );
           }),
         ),
        ),
      )
     );
   }
 }

And this is my output.

How to set column height?
When i'm trying to add new view, it's showing this error
"Another exception was thrown: A RenderFlex overflowed by 21 pixels on the bottom."

Answer 1

Put this instead of

childAspectRatio:1.0 to  childAspectRatio: (itemWidth / itemHeight)

var size = MediaQuery.of(context).size;
 final double itemHeight = (size.height) / 2;
 final double itemWidth = size.width / 2;

It works fine in my code to set height and width of Gridview

Answer 2

You might try this:

GridView.count(
   crossAxisCount: 2,
   childAspectRatio: MediaQuery.of(context).size.height / 400,
   children: <Widget>[...]
);

Answer 3

Try this

childAspectRatio: mediaQueryData.size.height / 1000,

where

MediaQueryData mediaQueryData = MediaQuery.of(context);

I saw this code somewhere and looks ok to me.

Answer 4

Maintain childAspectRatio: with MediaQuery.of(context).size.height/600 if this didint work change 600 with diffrent but less numbers.

Answer 5

[Screenshot][https://i.stack.imgur.com/h28C2.png]1

This is my code:

final screenWidth = MediaQuery.of(context).size.width/3;
return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: new Container(
    color: Colors.white70,
    padding: EdgeInsets.all(5.0),
    child: new GridView.count(
      childAspectRatio: screenWidth/180.0,          
      crossAxisCount: 3,
      crossAxisSpacing: 5.0,
      mainAxisSpacing: 5.0,
      children: _buildFirdTitles(35),
    ),
  ),
);

Answer 6

If you use GridView.builder

Try this, use gridDelegate section to custom items height

Edit the parameter childAspectRatio

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: crossAxisCount,
  // width / height: fixed for *all* items
  childAspectRatio: 0.75,
)

---

class ItemCardGridView extends StatelessWidget {
  const ItemCardGridView(
      {Key? key,
      required this.crossAxisCount,
      required this.padding,
      required this.items})
      // we plan to use this with 1 or 2 columns only
      : assert(crossAxisCount == 1 || crossAxisCount == 2),
        super(key: key);
  final int crossAxisCount;
  final EdgeInsets padding;
  // list representing the data for all items
  final List<ItemCardData> items;

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      padding: padding,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: crossAxisCount,
        // width / height: fixed for *all* items
        childAspectRatio: 0.75,
      ),
      // return a custom ItemCard
      itemBuilder: (context, i) => ItemCard(data: items[i]),
      itemCount: items.length,
    );
  }
}