How to make FadeInImage Circular?
Set the width and height property of FadeInImage and it should work.
ClipOval(
child: CachedNetworkImage(
fit: BoxFit.cover,
width: 50,
height: 50,
placeholder: AssetImage("images/alex.jpg"),
imageUrl:"https://cdn1.thr.com/sites/default/files/imagecache/scale_crop_768_433/2018/02/gettyimages-862145286_copy_-_h_2018.jpg",
),
)
I created a custom widget for this:
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
class CircleCachedNetworkAvatar extends StatelessWidget {
final String url;
final double size;
CircleCachedNetworkAvatar({@required this.url, this.size = 50.0});
@override
Widget build(BuildContext context) {
return Container(
height: size,
width: size,
child: url != null
? ClipOval(
child: CachedNetworkImage(
fadeInDuration: const Duration(seconds: 0),
fadeOutDuration: const Duration(seconds: 0),
imageUrl: url,
placeholder: Container(
color: Colors.greenAccent, child: Icon(Icons.person)),
fit: BoxFit.cover,
),
)
: CircleAvatar(
backgroundColor: Colors.greenAccent,
child: Icon(Icons.person)));
}
}
What do you think about this code?
Wrap FadeInImage
widget with ClipOval
then wrao ClipOval
widget with AspectRatio
:
AspectRatio(
aspectRatio: 1/1,
child: ClipOval(
child: FadeInImage.assetNetwork(
fit: BoxFit.cover,
placeholder: "Your-placeholder-path",
image: "Your-Image-Url"),
),
);