使用 Container 、 ClipRRect 、 CircleAvatar 、 Card 和 PhysicalModel 實現具有視覺吸引力的圖像效果。

在 Flutter 應用 UI 設計中，圓形圖像是常見的視覺元素。本博客探討了使用不同技術實現圓形圖像效果的各種方法。無論是使用網絡圖像、本地文件還是資源，這些方法都可以靈活地創建圓形和圓角形狀。

我們來探討一下Flutter中實現圓形圖像的方法：

圖片

Container

您可以使用 Container 小部件在 Flutter 應用中創建圓形圖像。這是一個簡單的方法：

Container(
  width: 120,
  height: 120,
  clipBehavior: Clip.antiAlias,
  decoration: const BoxDecoration(
    shape: BoxShape.circle,
  ),
  child: Image.network(
    'https://picsum.photos/seed/picsum/200/300',
    fit: BoxFit.cover,
  ),
),

通過將 BoxDecoration 與 BoxShape.circle 一起使用，您可以定義容器的圓形形狀。但是，為了確保圖像完全適合圓圈內，我們添加 clipBehavior: Clip.antiAlias 。這會剪輯圖像以匹配圓形形狀，從而創建無縫的圓形圖像效果。

ClipRRect

ClipRRect(
  borderRadius: BorderRadius.circular(120),
  child: Image.network(
    'https://picsum.photos/seed/picsum/200/300',
    fit: BoxFit.cover,
    width: 120,
    height: 120,
  ),
),

使用 ClipRRect 定義圓角矩形，并通過將 borderRadius 設置為 120 等值，確保角完全圓滑。由于指定的尺寸（寬度和高度），子圖像適合此圓角矩形。fit: BoxFit.cover 屬性確保圖像覆蓋整個區域，同時保持其縱橫比。這會產生平滑的圓形圖像效果。

CircleAvatar

CircleAvatar(
  radius: 60,
  backgroundImage: NetworkImage(
    'https://picsum.photos/seed/904/600',
  ),
),

使用 CircleAvatar 小部件，您所需要做的就是設置 radius 屬性來確定圓形頭像的大小。此外，您可以使用 backgroundImage 屬性指定圖像的 URL，小部件將自動創建圓形圖像效果。

Card

Card(
  shape: const CircleBorder(),
  clipBehavior: Clip.antiAlias,
  elevation: 5,
  child: Image.network(
    'https://picsum.photos/seed/904/600',
    width: 120,
    height: 120,
    fit: BoxFit.cover,
  ),
)

通過將 shape 設置為 CircleBorder() ，您可以為 Card 定義圓形形狀。clipBehavior: Clip.antiAlias 屬性確保子內容被剪裁以匹配圓形形狀。這會產生干凈的圓形圖像效果。除此之外，您還可以指定卡片的不同屬性，例如標高、陰影顏色等。

PhysicalModel

PhysicalModel(
    color: Colors.transparent,
    clipBehavior: Clip.antiAlias,
    elevation: 5.0,
    shape: BoxShape.circle,
    child: Image.network(
      'https://picsum.photos/seed/904/600',
      width: 120,
      height: 120,
      fit: BoxFit.cover,
    ))

通過調整 elevation，可以增加圖像的深度。shape: BoxShape.circle 確保圓形外觀，使用 color: Colors.transparent ，小部件保持半透明。通過設置 borderRadius: BorderRadius.circular(10) ，您可以確定角的曲率。clipBehavior: Clip.antiAlias 確保子內容與圓角對齊。

圖片

原文：https://medium.com/@dudhatkirtan/different-ways-to-creating-rounded-corner-image-and-circular-image-in-flutter-498e0a45b502