How to make responsive images in flutter? - flutter

Question

I am using Gridview.builder to make a grid of cards. I didn't find any attribute inside Gridview.builder to decide the size of a single card also inside the Card widget I didn't find any attribute to decide the size of the card.
Further to that, I want to make the image and a text inside the card responsive, here is the code of the method which returns me the card -
Card myCard(String houseName, String houseImageUrl) {
return new Card(
elevation: 5.0,
child: new InkWell(
child: new Container(
alignment: Alignment.center,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Image.network(
houseImageUrl,
height: 180.0,
width: 180.0,
),
new Padding(
padding: const EdgeInsets.all(8.0),
child: new Center(
child: new Text(
houseName,
style: new TextStyle(fontSize: 16.0),
textAlign: TextAlign.center,
),
),
),
],
),
),
));
I have used Gridview.builder as follows ("data" is the data coming from API)
new GridView.builder(
itemCount: data == null ? 0 : data.length,
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
itemBuilder: (BuildContext context, int index) {
var housename = data.keys.toList()[index].toString();
return myCard(
housename, data[housename]['image'].toString());
})));
The output of this code shows cards like this
Screenshot of above code output

Answer 1

You can use the fit property.
new Image.network(
houseImageUrl,
fit: BoxFit.contain,
height: 180.0,
width: 180.0,
),
The propertyfit: BoxFit.containwill limit the whole image to defined height.

Answer 2

For the Card Size you can use the childAspectRatio attribute inside gridDelegate as follows ->
new GridView.builder(
itemCount: data == null ? 0 : data.length,
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: (1 / 1),
crossAxisCount: 2),
itemBuilder: (BuildContext context, int index) {
var housename = data.keys.toList()[index]
.toString();
return myCard(
housename, data[housename]['image'].toString());
}
)
In above code 1/1 indicates that your cards will have the square shape
further, for image responsiveness, you can use a fit property as #ap14, The code will be like ->
Card myCard(String charName, String charImageUrl) {
return new Card(
elevation: 5.0,
child: new InkWell(
child: new Container(
alignment: Alignment.center,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Padding(
padding:const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
child: new Image.network(
charImageUrl,
fit: BoxFit.contain,
height: 150.0,
width: 150.0,
),
),
new Padding(
padding: const EdgeInsets.all(8.0),
child: new Center(
child: new Text(
charName,
style: new TextStyle(fontSize: 16.0),
textAlign: TextAlign.center,
),
),
),
],
),
),
)
);
}

Answer 3

use ResponsiveGridList from the responsive_grid package
you only specify your desired width and it chooses how many image to fit in a row, you can also set squareCells to true so that images will be forced to layout equal width and height