Network image fit to card without loosing card shape with grid view in flutter

Question

In the wanted view, there is a grid list with two columns and its items design needs to set an image in the card's background and cards have some radius, Image is network image but card size is fluctuating according to the network image. I tried this too but not working.

Here is the code

Container(
  child: Column(
  children: <Widget>[
       Expanded(
                    child: Card(
                        clipBehavior: Clip.antiAlias,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10.0),
                        ),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(10.0),
                          child: Image.network(
                            event_response.imageLogoUrl +
                                event_response.eventList[position].event_logo,
                            fit: BoxFit.cover,
                          ),
                        )),
                  ),
                          Container(
                           padding: const EdgeInsets.all(5.0),
                           child  :Text('${event_response.eventList[position].eventName}'),
                        )
                      ],

                );},),),],),);

Here I want but in 2 columns.

here I'm getting

Answer 1

In order to round the corners of the images, you have to wrap it in ClipRRect widget and give it border radius same as your card.

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
  Expanded(
    child: Card(
        clipBehavior: Clip.antiAlias,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(10.0),
                      child: Image.network(
            event_response.imageLogoUrl +
                event_response.eventList[position].event_logo,
            fit: BoxFit.cover,
          ),
        )),
  ),
  Container(
    padding: const EdgeInsets.all(5.0),
    child: Text('${event_response.eventList[position].eventName}'),
  )
]);

Answer 2

Wrap your Card into Expanded and use BoxFit.cover for your Image.

                Column(children: <Widget>[
                     Expanded(
                        child: Card(
                             clipBehavior: Clip.antiAlias,
                             shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0),),
                             child: Image.network(event_response.imageLogoUrl+event_response.eventList[position].event_logo, fit: BoxFit.cover,
                             )
                             ),
                         ),
                      Container(
                       padding: const EdgeInsets.all(5.0),
                       child  :Text('${event_response.eventList[position].eventName}'),
                    )