Correctly fit image with FadeInImage Flutter

Singorenko picture Singorenko · Jan 17, 2019 · Viewed 7.1k times · Source

enter image description here

Hello, I'm using FadeInImage with a placeholder and an image, but the second image do not cover the complete parent, I'm using fit:BoxFit.cover but any way the result is not good. Anyone knows how to make it possible. This is my actual code. The 'document[_newsImage] is an URL took from CloudFirebase.

      Widget _itemCard(BuildContext context, DocumentSnapshot document, int index) {
    return new Padding(
        padding: EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 8.0),
        child: new Card(
            child: Column(children: <Widget>[
          new Container(
              height: 250.0,
              child: new FadeInImage.assetNetwork(
                placeholder: 'assets/images/esperanza.jpg',
                image: document[_newsImage],
                fit: BoxFit.cover,
              )),
          Container(
              height: 150.0,
              child: Padding(
                padding: EdgeInsets.fromLTRB(16.0, 0.0, 16.0, 0.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text(
                            document[_newsTitle],
                            style: TextStyle(
                                color: Colors.black,
                                fontWeight: FontWeight.bold,
                                fontSize: 16),
                          ),
                          Text(document[_newsDate])
                        ]),
                    Text(
                      document[_textShortDescription],
                      style: TextStyle(color: Colors.grey, fontSize: 14),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        FlatButton(
                            onPressed: () => onPressed(context, document),
                            child: Text(
                              _stringShowMore,
                              style: TextStyle(color: Colors.indigo),
                            )),
                        IconButton(icon: Icon(Icons.share), onPressed: null)
                      ],
                    )
                  ],
                ),
              ))
        ])));
  }

Answer

diegoveloper picture diegoveloper · Jan 17, 2019

Try these changes:

  • Size the container to fill the width
  • Add the height inside the FadeInImage

      new Container(
          width: MediaQuery.of(context).size.width,
          child: new FadeInImage.assetNetwork(
            placeholder: 'assets/images/esperanza.jpg',
            image: document[_newsImage],
            fit: BoxFit.cover,
            height: 250.0,
          )),