CODEWITHSUNDEEP
flutter
Sharad
Sharad

Reputation: 103

How to make responsive images in flutter?

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

Upvotes: 5

Views: 25526

Answers (3)

Mohamed Ali
Mohamed Ali

Reputation: 3995

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

Upvotes: 0

Vaibhav Miniyar
Vaibhav Miniyar

Reputation: 773

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

Upvotes: 1

ap14
ap14

Reputation: 4731

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.

Upvotes: 5

Related Questions