I have created circularimage widget for rounded curve image,
when i placed inside gridview builter it was showing perfect rounded with same height and width…now i want to add favourite icon so i wrapped it inside stack , and image fit is changed and some images in tall and some images in wide…how to make this image in same height and same width…
Container(
color: Colors.green,
child: Stack(
children: [
CircularImage(
imageUrl: video.videoUrl,
isNetworkImage: true,
fit: BoxFit.cover,
onTap: () {
},
),
IconButton(onPressed: (){}, icon: Icon(Icons.favorite)),
],
),
)
here is my custom widget for circular image
class CircularImage extends StatelessWidget {
final String imageUrl;
final bool showBorder;
final Color borderColor;
final bool isNetworkImage;
final VoidCallback? onTap;
final BoxFit? fit;
final double? height;
final double? width;
const CircularImage({
Key? key,
required this.imageUrl,
this.showBorder=false,
this.borderColor=Colors.black,
this.isNetworkImage=false,
this.onTap,
this.fit=BoxFit.cover,
this.height,
this.width,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final mySize=MediaQuery.of(context).size.width;
return InkWell(
onTap: onTap,
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: isNetworkImage?
CachedNetworkImage(
imageUrl: imageUrl,
fit: fit,
errorWidget: (context,url,error)=>const Icon(Icons.error),
progressIndicatorBuilder: (context,url,downloadProgress)=> Center(child: SizedBox(
height: height,
width: width,
child: const CircularProgressIndicator())),
) :
Image(
image: AssetImage(imageUrl),
fit: BoxFit.cover,
height: height,
width: width,
),
),
);
}
}