GridView problems with height

Question

I'm trying to build a list using GridView to look like this, but my result looks like this. I've tried to wrap the image with an Expanded which results in this. I assume that the GridView fixed the height of the boxes. How do I fix this?

Here are the actual code

body: GridView.builder(
            itemCount: List_features.length,
            gridDelegate:
                SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
            itemBuilder: (BuildContext context, int index) {
              return Item(
                  List_features[index]["title"],
                  "https://image.tmdb.org/t/p/w200/${List_features[index]["poster_path"]}",
                  List_features[index]["vote_average"].toString());
            })

class Item extends StatelessWidget {
  String title;
  String link;
  String note;

  Item(this.title, this.link, this.note);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(bottom: 8.0),
      child: Column(
        children: <Widget>[
          Flexible(
            child: Card(
                color: Colors.transparent,
                elevation: 5.0,
                child: ClipRRect(
                    borderRadius: BorderRadius.circular(10.0),
                    child: Container(
                      color: Colors.white,
                      height: 240,
                      width: 160,
                      child: Image.network(link),
                    ))),
          ),
          Container(
            width: 180,
            child: Text(
              title,
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 18),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[Icon(Icons.star), Text(note)],
          ),
        ],
      ),
    );
  }
}

Answer 1

I didn't realize structure of you List_features so I wrote this code. Here are Item class changed, also I used GridView.count instead of GridView.builder i hope you will adjust for you purposes here is working code, just copy-paste to see how it works

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Title')),
        body: GridView.count(
          crossAxisCount: 2,
          childAspectRatio: 0.67,
          children: List_features.map((item) {
            return Item(item[0], "${item[1]}", item[2].toString());
          }).toList(),
        ),
      ),
    );
  }
}

final List_features = [
  ['title', 'https://picsum.photos/1000/1500', 9.7],
  ['title', 'https://picsum.photos/1000/1500', 9.7],
  ['title', 'https://picsum.photos/1000/1500', 9.7],
  ['title', 'https://picsum.photos/1000/1500', 9.7],
  ['title', 'https://picsum.photos/1000/1500', 9.7],
  ['title', 'https://picsum.photos/1000/1500', 9.7],
];

class Item extends StatelessWidget {
  String title;
  String link;
  String note;

  Item(this.title, this.link, this.note);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(bottom: 8.0),
      child: Column(
        children: <Widget>[
          Flexible(
            fit: FlexFit.tight,
            child: Container(
              child: Card(
                  child: ClipRRect(
                      borderRadius: BorderRadius.circular(10.0),
                      child: Image.network(link))),
            ),
          ),
          Container(
            child: Text(
              title,
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 18),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[Icon(Icons.star), Text(note)],
          ),
        ],
      ),
    );
  }
}