CODEWITHSUNDEEP
dartflutter
heyr
heyr

Reputation: 5784

Round CachedNetworkImage in Flutter

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.

Upvotes: 25

Views: 33253

Answers (10)

Rishita Joshi
Rishita Joshi

Reputation: 425

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,
                ),
              ),

Upvotes: 1

Joe
Joe

Reputation: 31

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,
        ),
      ),
    ),
  )

Upvotes: 1

albazel2004
albazel2004

Reputation: 31

You can use ClipOval instead of ClipRRect

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

Upvotes: 0

uriel solis
uriel solis

Reputation: 11

You just need to add clipBehavior: Clip.antiAlias,

Upvotes: 0

Agung
Agung

Reputation: 13813

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,
)

Upvotes: 1

BIS Tech
BIS Tech

Reputation: 19444

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),
                         ),
                       ),

Upvotes: 2

Ramtin
Ramtin

Reputation: 3205

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.

Upvotes: 18

Cenk YAGMUR
Cenk YAGMUR

Reputation: 3451

you should try it

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

Upvotes: 18

ThinkDigital
ThinkDigital

Reputation: 3539

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.

Upvotes: 53

Siavash
Siavash

Reputation: 3598

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),
            ),
          ),
        ),

Upvotes: 20

Related Questions