如何在 flutter 上创建带圆角的方形头像?
How to create square avatar with rounded corners on flutter?
我想创建一个类似于 CircleAvatar 的小部件,但不是圆形的。
这是 CircleAvatar:
这是我要创建的头像:
我想知道是否有默认小部件可以执行此操作,例如圆形头像的 CircleAvatar。
您可以像这样将 ClipRRect
与指定的 BorderRadius
属性 一起使用:
see image here
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10.0)),//add border radius here
child: Image.asset('assets/01.jpg'),//add image location here
),
有很多方法可以实现,但我只会使用一种。
将 ClipRRect() 小部件包裹在 child 小部件周围(这可以是图像或任何其他相关小部件,例如我示例中使用的容器)。然后,将 BorderRadius.circular(20.0)
值传递给 ClipRRect() 的 borderRadius
属性。这是创建效果的活动代码行。
在下面查看我的示例:
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),
),
),
see result here
我想创建一个类似于 CircleAvatar 的小部件,但不是圆形的。 这是 CircleAvatar:
这是我要创建的头像:
我想知道是否有默认小部件可以执行此操作,例如圆形头像的 CircleAvatar。
您可以像这样将 ClipRRect
与指定的 BorderRadius
属性 一起使用:
see image here
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10.0)),//add border radius here
child: Image.asset('assets/01.jpg'),//add image location here
),
有很多方法可以实现,但我只会使用一种。
将 ClipRRect() 小部件包裹在 child 小部件周围(这可以是图像或任何其他相关小部件,例如我示例中使用的容器)。然后,将 BorderRadius.circular(20.0)
值传递给 ClipRRect() 的 borderRadius
属性。这是创建效果的活动代码行。
在下面查看我的示例:
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),
),
),
see result here