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

android dart flutter material-design

5,211

Solution 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}'),
  )
]);

Solution 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}'),
                    )

5,211

Author by

Farhana Naaz Ansari

Farhana... The only way of writing fewer bugs is writing less code.

Updated on December 09, 2022

Comments

Farhana Naaz Ansari over 1 year

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

Farhana Naaz Ansari over 5 years

the code is fitting the image but the card losing its radius and its view.
diegoveloper over 5 years

sorry I forgot the clipBehavior inside the Card, answer updated!
diegoveloper over 5 years

that's weird, try using antiAliasWithSaveLayer , and hot restart .
Farhana Naaz Ansari over 5 years

your code is working but somewhere cards size is small, perhaps you have seen in the image that last two cards is wrapped according to image size but card showing radius too.
dshukertjr over 5 years

@farhana Sorry, can you explain again in what way my code is not working?
Farhana Naaz Ansari over 5 years

i need to set set image width to matchparent.
Farhana Naaz Ansari over 5 years

` ClipRRect` is working but width of the grid cell is wrapped according to image size.
dshukertjr over 5 years

@farhana I added crossAxisAlignment to column. I think this will do what you want to do.
Farhana Naaz Ansari over 5 years

now i applied ` crossAxisAlignment: CrossAxisAlignment.stretch,` it is working
dshukertjr over 5 years

@farhana I'm glad I was able to help. If you don't mind, checkout my other answers in flutter tag.
Farhana Naaz Ansari over 5 years

would you like see my another question on StackOverflow flow
dshukertjr over 5 years

@farhana sure, let me take a look