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."

Croquette

You have to adjust your aspect ratio. – Orgy

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. – Sinecure

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

Irretrievable

How will we know the itemHeight if it dynamic – Selfoperating

Hi this solved my problem. Been trying to solve it for hours. Thanks. But can you explain how it works? – Cooper

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. – Sinecure

Answer 2

You might try this:

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

Domini

what is 400? is it item height? – Rivulet

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.

Perchloride

Answer 4

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

Waylon

Answer 5

[Screenshot][https://i.sstatic.net/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),
    ),
  ),
);

Bissonnette

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,
    );
  }
}

Determinative

Answer 7

The code below will createGridView which takes up the remaining viewpoert height.

It will not overflow the viewport height.

Set rows and cols aoccordingly to your needs.

The example creates a numpad with 12 widgets.

class PasscodeWidget extends StatelessWidget {
  const PasscodeWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Expanded(child: LayoutBuilder(builder: (context, constraints) {
      const int rows = 4;
      const int cols = 3;

      final double itemHeight = (constraints.maxHeight) / rows;
      final double itemWidth = constraints.maxWidth / cols;

      return Container(
          constraints: BoxConstraints(maxHeight: constraints.maxHeight),
          child: GridView.count(
            shrinkWrap: true,
            childAspectRatio: (itemWidth / itemHeight),
            crossAxisCount: cols,
            children: List<Widget>.generate(
              12,
              (index) => Text(
                index.toString(),
                textAlign: TextAlign.center,
              ),
            ),
          ));
    }));
  }
}

Lalalalage