For your Instagram clone or your member app: Here is how to make rounded profile pictures in Flutter.
In this article, I am going to show you how to make rounded profile pictures in Flutter apps. Why? Because it’s state of the art on many well-known websites. Even Medium uses them, just take a look here:
And it’s so simple to accomplish. Look at this small code example:
@override
Widget build(BuildContext context) {
return Center(
child: SizedBox(
width: 256,
height: 256,
child: ClipOval(
child: Image.asset(
"resources/images/loc2.jpg",
fit: BoxFit.cover,
))));
}
The ClipOval widget will crop your image the way you want it. If you don’t want a circle, you can play around with the width and height properties. Also consider using a different fit setting in case you want your image to show only a portion of the entire image.
My example image is slightly higher than wider. That’s why there is a flat spot at the top of the circle. When you want a nicely-shaped circle, you need an image with identical width and height.
Here is another code example:
Widget _buildImageButtonWithFallback(String base64Image) {
final bytes = base64Decode(base64Image);
return Container(
width: 70,
height: 70,
decoration: const ShapeDecoration(
shape:
CircleBorder(side: BorderSide(color: Colors.black, width: 1))),
child: ClipOval(
child: Image.memory(bytes,
fit: BoxFit.cover,
errorBuilder: (context, error, stackTrace) =>
const Icon(Icons.person)),
));
}
In this approach, we even have a CircleBorder around the picture and the image is loaded from a base64 string. When you want to go really fancy, use FadeInImage with a placeholder while the actual image loads. This works for image resources and network downloads.
And if you are not into circle shapes, try ClipRect to crop your image in a rectangular or square shape.
Conclusion
In this article, we learned how to make rounded profile pictures in Flutter apps. In addition, I gave you further tips on how to work with images and cropping them.
Related articles
