Flutter中如何为高度不固定的椭圆形图片添加边框？

我需要为一张高度不固定的椭圆形图片添加边框颜色，当前代码使用BoxShape.circle时会生成圆形边框（不符合椭圆需求），不设置边框形状则是矩形边框，无法贴合图片的椭圆圆角。尝试使用BoxShape.value但找不到示例，且Container的height设为null增加了设置难度。

当前代码示例 #

Align(
  child: ConstrainedBox(
    constraints: const BoxConstraints(
      maxHeight: 220.0,
    ),
    child: Container(
      height: null,
      width: 150.0,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        border: Border.all(
          color: Colors.blueAccent,
          width: 2.0,
        ),
      ),
      child: ClipOval(
        child: Image.network(
          'https://images.unsplash.com/photo-1606122017369-d782bbb78f32?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cG9ydHJhaXRzfGVufDB8fDB8fA%3D%3D&w=1000&q=80',
        ),
      ),
    ),
  ),
),

现有效果 #

• 使用BoxShape.circle的效果：
  
• 不设置边框形状的效果：
  

解决方案 #

不需要使用BoxShape.value，可以通过ShapeDecoration配合EllipseBorder实现自适应图片高度的椭圆边框，代码如下：

Align(
  child: ConstrainedBox(
    constraints: const BoxConstraints(maxHeight: 220.0),
    child: Container(
      width: 150.0,
      // 用ShapeDecoration替代BoxDecoration实现椭圆边框
      decoration: ShapeDecoration(
        shape: EllipseBorder(
          side: BorderSide(
            color: Colors.blueAccent,
            width: 2.0,
          ),
        ),
      ),
      child: ClipOval(
        child: Image.network(
          'https://images.unsplash.com/photo-1606122017369-d782bbb78f32?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cG9ydHJhaXRzfGVufDB8fDB8fA%3D%3D&w=1000&q=80',
          fit: BoxFit.cover,
          width: double.infinity,
          height: double.infinity,
        ),
      ),
    ),
  ),
)

原理说明 #

• EllipseBorder会根据Container的实际宽高自动生成对应的椭圆边框，完美适配高度不固定的场景；
• 给Image添加fit: BoxFit.cover和宽高设为double.infinity，可以让图片充满Container并被ClipOval裁剪为椭圆；
• Container无需设置height，会自动根据图片高度自适应。

内容的提问来源于stack exchange，提问作者Texv