flutter - Flutter：圆形边框显示不需要的轮廓

Question

在开发通知程序 UI 之类的聊天气泡时，我遇到了圆形上不需要的轮廓的问题。

 Stack(
   overflow: Overflow.visible,
   children: <Widget>[
         Positioned(
             child: Image.asset(
                      "assets/v2/small/messenger-icon.png",
                      width: 28,
                      fit: BoxFit.cover,
         )),
         Positioned(
             top: -2,
             right: -2,
             child: Container(
                       width: 12,
                       height: 12,
                       decoration: BoxDecoration(
                              color: MyColors.accentColor,
                              borderRadius: BorderRadius.circular(8),
                              border: Border.all(
                                  color: Colors.white,
                                  width: 1,
                                  style: BorderStyle.solid)),
                        ),
              )
   ],
)

一切正常，但在白色轮廓上有一条不需要的 MyColors.accentColor 圆形线。

标签： flutter

Answer 1

两个大小相差 1px 的容器是一种解决方案

Stack(
    overflow: Overflow.visible,
    children: <Widget>[
      Positioned(
          child: Image.asset(
        "assets/mes1.png",
        width: 280,
        fit: BoxFit.cover,
      )),
      Positioned(
        top: -2,
        right: -2,
        child: Container(
          width: 121,
          height: 121,
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(121),
              border: Border.all(
                  color: Colors.white, width: 1, style: BorderStyle.solid)),
          child: Container(
            width: 120,
            height: 120,
            decoration: BoxDecoration(
                color: Colors.deepOrange,
                borderRadius: BorderRadius.circular(120),
                border: Border.all(
                    color: Colors.deepOrange,
                    width: 1,
                    style: BorderStyle.solid)),
          ),
        ),
      )
    ],
  )