How to set Custom height for Widget in GridView in Flutter?

Question

Even after specifying the height for Container GridView, my code is producing square widgets.

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key         


        

Answer 1

Few days ago I came here to find a way to dynamically change height when images are loaded from internet and using childAspectRatio cannot do that because its apply to all widget in GridView(same height for each).

This answer may help someone who want different height according to each and every widget content:

I found a package called Flutter Staggered GridView by Romain Rastel. Using this package we can do so many things check examples here.

To get what we want we can use StaggeredGridView.count() and its property staggeredTiles: and for its value you can map all widget and apply StaggeredTile.fit(2).

Example code:

StaggeredGridView.count(
    crossAxisCount: 4, // I only need two card horizontally
    padding: const EdgeInsets.all(2.0),
    children: yourList.map((item) {
      //Do you need to go somewhere when you tap on this card, wrap using InkWell and add your route
      return new Card(
        child: Column(
          children: [
             Image.network(item.yourImage),
             Text(yourList.yourText),//may be the structure of your data is different
          ],
        ),
      );
    }).toList(),

    //Here is the place that we are getting flexible/ dynamic card for various images
    staggeredTiles: yourList.map((_) => StaggeredTile.fit(2))
        .toList(),
    mainAxisSpacing: 3.0,
    crossAxisSpacing: 4.0, // add some space
  ),
);

You can find complete example(copy,paste and run) here.