如何在 flutter 上創建帶圓角的方形頭像？

Question

我想創建一個類似於 CircleAvatar 的小部件，但不是四舍五入的。 這是CircleAvatar：

這是我要創建的頭像：

我想知道是否有一個默認的小部件來執行此操作，例如圓形頭像的 CircleAvatar。

Answer 1

有很多方法可以實現它，但我只會使用一種。 將ClipRRect()小部件包裹在子小部件周圍（這可以是圖像或任何其他相關小部件，例如我的示例中使用的 Container）。 然后，將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),
  ),
),

在這里查看結果

Answer 2

您可以將ClipRRect與指定BorderRadius屬性一起使用，如下所示：

在這里看圖片

 ClipRRect(
   borderRadius: BorderRadius.all(Radius.circular(10.0)),//add border radius here
   child: Image.asset('assets/01.jpg'),//add image location here
 ),