如何将图标小部件在具有圆形边界的容器内居中

Question

我面临的问题最终其他人已经有了解决方案。

我想要 Flutter Container 圆形盒子形状，边框大小 >=1 且图标作为子项完美地居中于容器的中间。

然而 Flutter 做了各种奇怪的事情，搞乱了图标的中心位置。 Alignment.center 和 Center 小部件都没有帮助。

我尝试使用堆栈和位置，但我认为这不是这样做的方法，因为必须有一种直接的方法来使容器中的图标完美居中，并强制 Flutter 不要更改图标的大小或添加填充或把孩子转移过来。

这是一个代码片段

if (widget.selected) {
      return Container(
        width: widget.size,
        height: widget.size,
        constraints: BoxConstraints.tightFor(width: widget.size, height: widget.size),
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          border: Border.all(color: Colors.blue, width: 5),
          color: Colors.yellow,
        ),
        alignment: Alignment.center,
        child: Icon(Icons.check_circle, size: widget.size-5, color: Colors.lightGreen),
      );
    }
    else
      return Container(
        width: widget.size,
        height: widget.size,
        constraints: BoxConstraints.tightFor(width: widget.size, height: widget.size),
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          border: Border.all(color: Colors.blue, width: 5),
          color: Colors.transparent,
        ),
      );

我还检查了小部件树，发现发生了我不希望发生的事情。

Answer 1

使用

Stack

代替

Column

，并将

Icon

和

Container

分开。

        Stack(
            children: [
              Align(
                alignment: Alignment.center,
                child: Container(
                  height: 100,
                  width: 100,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    border: Border.all(color: Colors.blue, width: 5),
                    color: Colors.yellow,
                  ),
                ),
              ),
              Align(
                  alignment: Alignment.center,
                  child: Icon(Icons.check_circle,
                      size: 190, color: Colors.lightGreen)),
            ],
          ),

Answer 2

在图标内填充0：

padding: EdgeInsets.zero,