How to create square avatar with rounded corners on flutter?
7,447
There are so many ways to achieve it but I will only make use one.
Wrap a ClipRRect() widget around a child widget(this could be an image or any other relevant widget like a Container used in my example). Then, pass BorderRadius.circular(20.0)
value to borderRadius
property of ClipRRect(). That is the active lines of code that create the effect.
Check below for my example:
ClipRRect(
borderRadius: BorderRadius.circular(20.0),//or 15.0
child: Container(
height: 70.0,
width: 70.0,
color: Color(0xffFF0E58),
child: Icon(Icons.volume_up, color: Colors.white, size: 50.0),
),
),
Author by
dam034
Updated on December 22, 2022Comments
-
dam034 over 1 year
I want to create a widget similar to CircleAvatar, but not rounded. This is CircleAvatar:
And this is the avatar I want to create:
I want to know if there is a default widget to do this, as CircleAvatar for rounded avatars.
-
Christopher Moore almost 4 yearsWhile this may be "self-explanatory" to you, adding some explanation could help the OP & future users more and would increase the quality of your answer.