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

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
– Kamlesh, Commented May 25, 2021 at 15:08

Abhijith Konnayil · Accepted Answer · 2020-05-27 22:26:03Z

15

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

edited May 27, 2020 at 22:26

Abhijith Konnayil

4,8367 gold badges27 silver badges57 bronze badges

answered Dec 21, 2018 at 4:34

Google

2,2113 gold badges28 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Slick Slime Over a year ago

How will we know the itemHeight if it dynamic

Radhika Gokani Over a year ago

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

Kamlesh Over a year ago

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.

Emma Marcier · Accepted Answer · 2019-07-12 20:08:37Z

8

You might try this:

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

edited Jul 12, 2019 at 20:08

Emma Marcier

27.8k12 gold badges49 silver badges71 bronze badges

answered Jun 16, 2019 at 14:27

Abdurahman Popal

3,0591 gold badge26 silver badges18 bronze badges

1 Comment

Balaji Over a year ago

what is 400? is it item height?

stuckedunderflow · Accepted Answer · 2018-12-21 04:03:56Z

2

Try this

childAspectRatio: mediaQueryData.size.height / 1000,

where

MediaQueryData mediaQueryData = MediaQuery.of(context);

I saw this code somewhere and looks ok to me.

answered Dec 21, 2018 at 4:03

stuckedunderflow

3,8078 gold badges48 silver badges65 bronze badges

Comments

Joe Rush · Accepted Answer · 2020-04-22 05:24:17Z

2

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

answered Apr 22, 2020 at 5:24

Joe Rush

1371 silver badge4 bronze badges

Comments

Nhon Le · Accepted Answer · 2020-05-06 03:41:05Z

1

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

answered May 6, 2020 at 3:41

Nhon Le

112 bronze badges

Comments

Shredder · Accepted Answer · 2022-07-16 06:33:08Z

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

Dabbel · Accepted Answer · 2024-02-29 08:46:50Z

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

Collectives™ on Stack Overflow

How to set grid view column height?

7 Answers 7

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related