Grid height based on the screen size

Issue

Hi friends I had a problem when setting the card height of the view based on the screen I had tried in it by setting the screen dynamically by using the below code please find the screen as well I need the exact 10 margins below the text, not this much I tried using the dynamic MediaQuery if I don’t use media query it’s getting me the error like extra space below screen like that and I can’t able to use the sized box as well please help friends when I use stagged grid view there is space at the bottom

@override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    final double itemHeight = (size.height - kToolbarHeight - 24) / 2.3;
    final double itemWidth = size.width / 2;
    return livevideolist != null
        ? new GridView.builder(
            itemCount: livevideolist == null ? 0 : livevideolist.length,
            gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
              childAspectRatio: (itemWidth / itemHeight),
                crossAxisCount: 2),
            itemBuilder: (BuildContext context, int index) {
              return new GestureDetector(
                onTap: () {
                  String youtubeid = livevideolist[index]['url'];
                  playYoutubeVideo(youtubeid);
                },
                child: new Card(
                  elevation: 4.0,
                  margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
                  child: new Column(
                    children: <Widget>[
                      new Container(
                        height: 150.0,
                        width: double.infinity,
                        decoration: new BoxDecoration(
                          image: new DecorationImage(
                            image:
                                new NetworkImage(livevideolist[index]['image']),
                            fit: BoxFit.fill,
                          ),
                        ),
                      ),
                      Expanded(
                        child: new Container(
                          child: new Text(livevideolist[index]['title']),
                          margin: EdgeInsets.only(left: 10.0, top: 10.0),
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          )
        : new Center(
            child: new CircularProgressIndicator(),
          );
  }

Solution

You can use a package for this, check this awesome package: https://pub.dartlang.org/packages/flutter_staggered_grid_view

And this is how you can use:

          Widget build(BuildContext context) {
            return livevideolist != null
                ? new StaggeredGridView.countBuilder(
                    crossAxisCount: 2,
                    itemCount: livevideolist == null ? 0 : livevideolist.length,
                    staggeredTileBuilder: (int index) => new StaggeredTile.fit(1),
                    itemBuilder: (BuildContext context, int index) {
                      return new GestureDetector(
                        onTap: () {},
                        child: new Card(
                          elevation: 4.0,
                          margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
                          child: new Column(
                            mainAxisSize: MainAxisSize.min,
                            children: <Widget>[
                              new Container(
                                height: 150.0,
                                width: double.infinity,
                                decoration: new BoxDecoration(
                                  image: new DecorationImage(
                                    image: new NetworkImage(
                                        "https://upload.wikimedia.org/wikipedia/en/thumb/d/d9/ImageFight_arcadeflyer.png/256px-ImageFight_arcadeflyer.png"),
                                    fit: BoxFit.cover,
                                  ),
                                ),
                              ),
                              new Padding(
                                child: new Text(
                                    "Use a very long text here to see how it expands"),
                                padding: EdgeInsets.only(left: 10.0, top: 10.0),
                              ),
                            ],
                          ),
                        ),
                      );
                    },
                  )
                : new Center(child: new CircularProgressIndicator());
          }

Just replace by the attributes that you are using.

Add maxLines to your Text based on what you want:

Text("Your long text....",
        maxLines: 2 )

Use fit: BoxFit.cover, instead of fit: BoxFit.fill , for your image

So looks like your text has different sizes , yo can force the height of the parent container:

new Container(
   height: 80.0, //you can change this value
                            child: new Text(
                                "Use a very long text here to see how it expands"),
                            padding: EdgeInsets.only(left: 10.0, top: 10.0),
                          ),

Answered By – diegoveloper

Answer Checked By – David Goodson (FlutterFixes Volunteer)