如何在颤振上创建带有圆角的方形头像？答案

【问题标题】：How to create square avatar with rounded corners on flutter?如何在颤振上创建带有圆角的方形头像？
【发布时间】：2020-11-15 21:57:58
【问题描述】：

我想创建一个类似于 CircleAvatar 的小部件，但不是圆形的。这是CircleAvatar：

这是我要创建的头像：

我想知道是否有一个默认小部件来执行此操作，例如圆形头像的 CircleAvatar。

【问题讨论】：

标签： flutter widget avatar

【解决方案1】：

有很多方法可以实现它，但我只会使用一种。将 ClipRRect() 小部件包裹在 child 小部件周围（这可以是图像或任何其他相关小部件，例如我的示例中使用的 Container）。然后，将BorderRadius.circular(20.0) 值传递给 ClipRRect() 的borderRadiusproperty。那是创建效果的活动代码行。查看下面的示例：

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

【讨论】：

虽然这对您来说可能是“不言自明的”，但添加一些解释可以更多地帮助 OP 和未来的用户，并提高您回答的质量。

【解决方案2】：

您可以像这样使用 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
 ),

【讨论】：