Make FadeInImage.memoryNetwork render circular cropped image

Question

I am trying to create something like CircleAvatar, but with a Stacked widget having a CircularProgressIndicator and a FadeInImage.memoryNetwork as children so that I get a nice loading animation (bonus: placeholder image) when I fetch the image on slow Internet.

Everything else is working fine but I am not being able to figure out how to crop the fetched image into a circular form. I read here that I can use a ClipOval, but I couldn't find any tutorial on how to use it.

Stack(children: <Widget>[
          Center(child: CircularProgressIndicator(valueColor: new AlwaysStoppedAnimation<Color>(Colors.lightBlue))),
          Center(
            child: FadeInImage.memoryNetwork(
              placeholder: kTransparentImage,
              image:
                  'https://s3-media2.fl.yelpcdn.com/bphoto/7BlRoSOG3AsAWHMPOaG7ng/ls.jpg',
            ),
          ),
        ],
      ),
    ));

Note: I am using transparent_image library for the placeholder to get a transparent placeholder while displaying the loading animation.

@KavinRajuS Its just a simple transparent image. https://pub.dev/packages/transparent_image — Anindya Manna, Jul 15 '19 at 07:12

score 2 · Accepted Answer · answered Sep 26 '18 at 19:35

This is what I am using in one of my projects, I guess you can create something similar, then instead of using FadeInImage directly use the custom widget.

class AvatarFadeImage extends StatelessWidget {
  final String imageUrl;

  AvatarFadeImage(this.imageUrl);

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: FadeInImage.memoryNetwork(
        placeholder: kTransparentImage,
        image: imageUrl,
        fit: BoxFit.contain,
      ),
    );
  }
}

Use it like this:

Stack(children: <Widget>[
          Center(child: CircularProgressIndicator(valueColor: new AlwaysStoppedAnimation<Color>(Colors.lightBlue))),
          Center(
            child: AvatarFadeImage("https://s3-media2.fl.yelpcdn.com/bphoto/7BlRoSOG3AsAWHMPOaG7ng/ls.jpg"),
          ),
        ],
      ),
    ));

PS: You may also look at https://pub.dartlang.org/packages/cached_network_image and https://flutter.io/cookbook/images/cached-images/

Plugin might just do the trick for you.

Thanks a lot. I modified the code bit more and it works. My key takeaway here was `fit: BoxFit.contain` — Anindya Manna, Sep 28 '18 at 16:39

score 1 · Answer 2 · edited Jul 16 '19 at 09:21

Just in case this helps anyone, the modified code which worked for me:

Stack(
  fit: StackFit.passthrough,
    children: <Widget>[
      Center(
          child: CircularProgressIndicator(
              valueColor: AlwaysStoppedAnimation<Color>(Colors.lightBlue))),
      Center(
        child: ClipOval(
          child: FadeInImage.memoryNetwork(
            fit: BoxFit.contain,
            placeholder: kTransparentImage,
            image: 'https://s3-media2.fl.yelpcdn.com/bphoto/7BlRoSOG3AsAWHMPOaG7ng/ls.jpg',
          ),
        ),
      ),
    ],
),
));

Make FadeInImage.memoryNetwork render circular cropped image

2 Answers2