CODEWITHSUNDEEP
flutterflutter-gridview
BomberBus
BomberBus

Reputation: 1235

Flutter GridView item wrap_content height

I am an android developer and new to flutter.

I would like to create a GridView with wrap content item height (I draw it with pen in the screenshot). But I have tried with the following code and it gave me only square grid item. I would like how to get height wrap content grid item and I have no idea and can't find how to get it. Please help. Thank you.

enter image description here

class CategoryItem extends StatelessWidget {
  final Category category;
  CategoryItem({Key key, @required this.category})
      : assert(category != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Text(
        category.name,
        style: TextStyle(fontSize: 34.0, fontWeight: FontWeight.bold),
      ),
      color: Colors.amberAccent,
    );
  }
}


class CategoryGrid extends StatefulWidget {

  final List<Category> items;

  const CategoryGrid({Key key, this.items}) : super(key: key);

  @override
  _CategoryGridState createState() => _CategoryGridState();
}

class _CategoryGridState extends State<CategoryGrid> {

  @override
  Widget build(BuildContext context) {
    final Orientation orientation = MediaQuery.of(context).orientation;
    return Column(
      children: <Widget>[
        Expanded(
          child: SafeArea(
            top: false,
            bottom: false,
            child: GridView.builder(
              itemCount: widget.items.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: (orientation == Orientation.portrait) ? 2 : 3,),
              itemBuilder: (BuildContext context, int index) {
                return CategoryItem(category: widget.items[index],);
              },
            ),
          ),
        ),
      ],
    );
  }
}

Upvotes: 14

Views: 23370

Answers (5)

e-info128
e-info128

Reputation: 4072

GridView component use a static fixed width and height, you can not change height to fit of the content, only can set a static height value using childAspectRatio, Why did Google developers decide that a grid must have a static height? I don't know, nobody knows, they probably don't know how to make grids.

The best solution is to create a custom grid with Row and Column, this way the height of the rows will be equal to the height of the block with the most content.

Upvotes: 0

Nikhat Shaikh
Nikhat Shaikh

Reputation: 3685

For height you can use "childAspectRatio"

For example-

GridView.count(
    childAspectRatio: 4.0,
    crossAxisCount: 2,

    padding: EdgeInsets.all(5.0),
    children: <Widget>[
        Container(
            margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
            child: Text(
                '10:00 AM - 12:00 PM',
                style: new TextStyle( color: Colors.black87, fontSize: 14.0, 
                    fontWeight: FontWeight.normal,
                ),
            ), 
        );
    ],
    shrinkWrap: true,
    // todo comment this out and check the result
    physics: ClampingScrollPhysics(),
)

Upvotes: 15

MustaqAhmed Saiyed
MustaqAhmed Saiyed

Reputation: 37

In GridView use this line 

the childAspectRatio as per yor need 
childAspectRatio: double,

Upvotes: 0

Harsh Bhikadia
Harsh Bhikadia

Reputation: 10865

You need to set childAspectRatio attribute of SliverGridDelegateWithFixedCrossAxisCount delegate to control the height with respect to width of the grid item.

If you just want to "shrink" the height (and something like match_parent for widhth) of the text widget wrap it around a Column, Row and Expanded like this

class CategoryItem extends StatelessWidget {
  final Category category;

  CategoryItem({Key key, @required this.category})
      : assert(category != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Expanded(
              child: Card(
                child: Text(
                  category.name,
                  style: TextStyle(fontSize: 34.0, fontWeight: FontWeight.bold),
                ),
                color: Colors.amberAccent,
              ),
            ),
          ],
        ),
      ],
    );
  }
}

Upvotes: 0

user4571931
user4571931

Reputation:

To wrap content grid item you can use the childAspectRatio property of gridview

Ex.

GridView.builder(
  itemCount: widget.items.length,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: (orientation == Orientation.portrait) ? 2 : 3, childAspectRatio:(MediaQuery.of(context).size.height * 0.006)),
  itemBuilder: (BuildContext context, int index) {
     return CategoryItem(category: widget.items[index],);
  },
)

you can set childAspectRatio 0.006 instead of according to your content size

Upvotes: 0

Related Questions