Flutter 为什么我的小部件在边框上有第二种颜色？

Question

我有一个小部件作为徽章。但是当我想在它上面添加一个白色边框时，我不知道为什么它也有另一种颜色。我假设它来自堆栈。但是我该如何解决呢？说清楚：

我不想在我的边框上出现蓝色轮廓。

我的小部件：

Stack(
                                children: [
                                  CircleNotification(
                                    backgroundColor: ColorService.purpleHalfOpacityBackground,
                                    icon: SvgPicture.asset(
                                      AssetService.boldChatBubbleIcon,
                                    ),
                                    radius: 32,
                                  ),
                                  Positioned(
                                    left: 30,
                                    top: 25,
                                    child: Stack(children: [
                                      Container(
                                        decoration: BoxDecoration(
                                          borderRadius: BorderRadius.circular(100),
                                          border: Border.all(color: Colors.white, width: 3),
                                        ),
                                    
                                        child: CircleNotification(
                                          backgroundColor: ColorService.halfOpacityBlue,
                                          icon: SvgPicture.asset(
                                            AssetService.cameraSvg,
                                          ),
                                          radius: 32,
                                        ),
                                      ),
                                      Positioned(
                                        child: Container(
                                          padding: const EdgeInsets.all(5),
                                          decoration: BoxDecoration(
                                         //When i add that border its coming with outline
                                    -->        border: Border.all(color: Colors.white, width: 2),
                                            color: ColorService.blueTitleColor,
                                            shape: BoxShape.circle,
                                          ),
                                          child: const Text("1",
                                              style: TextStyle(
                                                fontWeight: FontWeight.w700,
                                                color: Colors.white,
                                                fontSize: 13,
                                              )),
                                        ),
                                        right: 0,
                                        top: 0,
                                      )
                                    ]),
                                  ),
                                ],
                              ),

Answer 1

其实是flutter的bug，见this issue。

你可以做的是用另一个以你的边框颜色作为背景的容器包裹你的容器和边框颜色：

child: DecoratedBox(
  decoration: BoxDecoration(
    border: Border.all(color: Colors.white, width: 2),
    color: Colors.white,  // <- The background is the same color as the border.
    shape: BoxShape.circle,
  ),
  child: Container(
    padding: const EdgeInsets.all(5),
    decoration: BoxDecoration(  // <- You don't need any border here.
      color: ColorService.blueTitleColor,
      shape: BoxShape.circle,
    ),
    child: // ...
  ),
)