Round CachedNetworkImage in Flutter

Question

new Container(

                  width: 80.0,
                  height: 80.0,
                  decoration: new BoxDecoration(

                      shape: BoxShape.circle,
                      image: new DecorationImage(
                          fit: BoxFit.fill,
                          image: new NetworkImage(widget.profile_picture)))),

At the moment I have a NetworkImage however I wold like to have a round CachedNetworkImage instead.

If you want to use Container you can put Container inside imageBuilder of CachedNetworkImage as shown here: (github.com/Baseflow/flutter_cached_network_image/issues/…) — temirbek
– temirbek, Commented Sep 4, 2020 at 6:03

ThinkDigital · Accepted Answer · 2018-11-03 05:55:29Z

53

You can use

ClipRRect(borderRadius: BorderRadius.circular(10000.0),
child: CachedNetworkImage(...))

Since CachedNetworkImageProvider is not a Widget, it doesn't work in place of a CachedNetworkImage. Meaning it won't have the placeholder widget option.

answered Nov 3, 2018 at 5:55

ThinkDigital

3,5674 gold badges31 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adrian Kalbarczyk Over a year ago

This should be accepted answer since it preserves all CachedNetworkImage functionality.

ThinkDigital Over a year ago

@heyab-redda :)

Siavash · Accepted Answer · 2018-06-14 10:29:25Z

20

You can use the CachedNetworkImageProvider like this:

new Container(
    width: 80.0,
    height: 80.0,
    decoration: new BoxDecoration(
        shape: BoxShape.circle,
        image: new DecorationImage(
            fit: BoxFit.fill,
            image: new CachedNetworkImageProvider(widget.profile_picture),
            ),
          ),
        ),

answered Jun 14, 2018 at 10:29

Siavash

3,6183 gold badges18 silver badges19 bronze badges

2 Comments

heyr Over a year ago

Great, thank you! Also, is there any chance to use with it: placeholder: new CircularProgressIndicator(), ?

Siavash Over a year ago

You can use a FadeInImage and set the CachedNetworkImageProvider as its image. It will provide placeholder and fading options for you.

Ramtin · Accepted Answer · 2019-09-18 02:38:07Z

19

You can use the imageBuilder of the CachedNetworkImage:

CachedNetworkImage(
    imageUrl: imageUrl,
    imageBuilder: (context, imageProvider) => Container(
        height: 100,
        width: 100,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(50)),
            image: DecorationImage(
                image: imageProvider,
                fit: BoxFit.cover,
            ),
        ),
    ),
    placeholder: (context, url) => placeholder,
    errorWidget: (context, url, error) => errorWidget,
)

In order to have a rounded image, set the width and height to the same value and set the borderRadius to half the height.

answered Sep 18, 2019 at 2:38

Ramtin

3,2241 gold badge25 silver badges25 bronze badges

1 Comment

haydar M.Al-samawe Over a year ago

this is the correct answer rendering the Container before the image ,

Cenk YAGMUR · Accepted Answer · 2019-05-14 15:29:41Z

18

you should try it

ClipOval(
   child: CachedNetworkImage(
       imageUrl: url,
       fit: BoxFit.cover
   ),
)

edited May 14, 2019 at 15:29

answered May 14, 2019 at 13:25

Cenk YAGMUR

3,4912 gold badges31 silver badges50 bronze badges

Comments

BIS Tech · Accepted Answer · 2020-09-18 17:30:39Z

BorderRadius and Border Color

1st way

Container(
   decoration: BoxDecoration(
     border: Border.all(color: Palette.greyTextColor),
     borderRadius: BorderRadius.all(Radius.circular(8.0)),),
                  child:  ClipRRect(
                    borderRadius: BorderRadius.all(Radius.circular(8.0)),
                    child: CachedNetworkImage(

2nd way

CachedNetworkImage(
                       imageBuilder: (context, imageProvider) => Container(
                         width: width,
                         decoration: BoxDecoration(
                           border: Border.all(color: Palette.greyTextColor),
                           borderRadius: BorderRadius.all(Radius.circular(8.0)),
                           image: DecorationImage(image: imageProvider),
                         ),
                       ),

Agung · Accepted Answer · 2021-06-03 02:37:56Z

I use this to create a circular cached image network with border color

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

class CircularCachedNetworkImage extends StatelessWidget {
  final String imageURL;
  final double size;
  final Color borderColor;
  final BoxFit fit;
  final double borderWidth;

  const CircularCachedNetworkImage({
    required this.imageURL,
    required this.size,
    required this.borderColor,
    this.fit = BoxFit.fill,
    this.borderWidth = 2,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: size,
      height: size,
      decoration: BoxDecoration(
        color: borderColor,
        shape: BoxShape.circle,
      ),
      child: Padding(
        padding: EdgeInsets.all(borderWidth),
        child: Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.white, // inner circle color
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.all(Radius.circular(300.0)),
            child: CachedNetworkImage(
              imageUrl: imageURL,
              fit: fit,
            ),
          ),
        ),
      ),
    );
  }
}

usage

CircularCachedNetworkImage(
   imageURL: "your image URL in here",
   size: 100,
   borderColor: Colors.green,
)

Joe · Accepted Answer · 2022-12-18 21:18:01Z

1

I needed an avatar widget that kept the circular shape whether the CachedNetworkImage was square or not, and was not fixed to one size but used the available space. My solution was this:

CircleAvatar(
    child: AspectRatio(
      aspectRatio: 1,
      child: ClipOval(
        child: CachedNetworkImage(
          imageUrl: imgUrl,
          fit: BoxFit.fill,
        ),
      ),
    ),
  )

answered Dec 18, 2022 at 21:18

Joe

315 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Rishita Joshi · Accepted Answer · 2023-12-05 16:11:30Z

this is worked for me i use following code navigation drawer for display the profile image.

Center(
                child: CachedNetworkImage(
                  width: 90,
                  height: 90,
                  imageUrl:
                      "https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=2874&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
                  imageBuilder: (context, imageProvider) => Container(
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      image: DecorationImage(
                        image: imageProvider,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  //     placeholder: (context, url) => placeholder,
                  //     errorWidget: (context, url, error) => errorWidget,
                ),
              ),

uriel solis · Accepted Answer · 2021-12-13 12:52:08Z

0

You just need to add clipBehavior: Clip.antiAlias,

answered Dec 13, 2021 at 12:52

uriel solis

111 bronze badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

albazel2004 · Accepted Answer · 2022-09-27 21:58:05Z

0

You can use ClipOval instead of ClipRRect

 child: ClipOval(
          child: CachedNetworkImage(imageUrl : url),
 fit: BoxFit.cover,
        ),

answered Sep 27, 2022 at 21:58

albazel2004

313 bronze badges

Collectives™ on Stack Overflow

Round CachedNetworkImage in Flutter

10 Answers 10

2 Comments

2 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

2 Comments

2 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related