Flutter如何为CachedNetworkImage设置绘制在图片外部的边框

问题原因 #

边框与图片配置在同一个Container的BoxDecoration中时，Flutter的BoxDecoration绘制顺序为背景→图片→边框，边框会向容器内部撑开并覆盖在图片上方，因此呈现出边框在图片内部的效果。

解决方案 #

方案1：嵌套容器实现占位式外边框（推荐）

外层容器绘制边框，设置内边距等于边框宽度，将内层图片区域向内缩进，边框会占用实际布局空间，和常规外边框表现一致：

CachedNetworkImage(
    imageUrl:'url_to_image',
    imageBuilder: (context,imageProvider) => Container(
        decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(
                color: const Color(0x24ffffff),
                width: 11
            ),
        ),
        // 内边距和边框宽度保持一致，把图片区域往里推
        padding: const EdgeInsets.all(11),
        child: Container(
            decoration: BoxDecoration(
                shape: BoxShape.circle,
                image: DecorationImage(
                    image: imageProvider,
                    fit: BoxFit.fill
                )
            ),
        ),
    ),
)

方案2：Stack实现悬浮式外边框

如果不需要边框占用额外布局空间，可以用Stack叠加边框层，边框会悬浮在图片外侧：

CachedNetworkImage(
    imageUrl:'url_to_image',
    imageBuilder: (context,imageProvider) => Stack(
        alignment: Alignment.center,
        children: [
            Container(
                decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    image: DecorationImage(
                        image: imageProvider,
                        fit: BoxFit.fill
                    ),
                ),
            ),
            Positioned.fill(
                child: Container(
                    decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        border: Border.all(
                            color: const Color(0x24ffffff),
                            width: 11
                        ),
                    ),
                ),
            )
        ],
    ),
)

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