Image inside a container in flutter

Question

I want to display a network image inside a card widget. I want the image to have the width of the card and some fixed height. Below is the code.

ListView.builder(
              itemCount: events.length,
              padding: const EdgeInsets.all(8.0),
              itemBuilder: (BuildContext context, int index) {
                return Card(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      FadeInImage.assetNetwork(
                        placeholder: placeholder,
                        image: events[index].image,
                        fit: BoxFit.fitWidth,
                        height: 300,
                      )
                    ],
                  ),
                );
              })

When I give a fixed height to the image it behaves weird. The image centers itself inside the card with some padding on the top and the bottom. I want the image be aligned to the top.

Answer 1

I think we need to give a width and height to the image before we can make the box fit work. The box fit property will fit the box but for that we have to define the box. Below code is working for me. I have tried it with different sized images and it always takes the max width of the card and the specified height.

The above solutions might not work for every kind of images.

         Card(
                  elevation: 4.0,
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
                  clipBehavior: Clip.antiAlias,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      FadeInImage.assetNetwork(
                        alignment: Alignment.topCenter,
                        placeholder: 'images/placeholder.png',
                        image: events[index].image,
                        fit: BoxFit.fill,
                        width: double.maxFinite,
                        height: 200,
                      ),
                    ],
                  ),
                )

The above answer is my own understanding by trial and error. Please correct me if I am wrong about my understanding

Answer 2

try this code. Call this method from itemBuilder it will return a card per item. In this Image.network() is used, you can use FadeInImage.assetNetwork(), also you can customize this card as per your need.

/*
  Get card per item
 */
  getCard(BuildContext context, int index) {
    return Card(
        child: Container(
      height: 300,
      child: Column(
        children: <Widget>[
          Container(
            height: 200,
            width: double.infinity,
            child: Image.network(
              "url",
              fit: BoxFit.fill,
            ),
          )
        ],
      ),
    ));
  }