stack - 如何将一个圆圈中心化为一张卡片？

Question

我尝试在图像中创建非地理围栏层(谷歌地图网址)

我有一张带有子图像的卡片，我在 map 图像上添加了一个圆形堆栈，并使用 slider 来更改区域的大小。问题是我没有成功地将 map 放在我的容器中。目前找到的唯一解决方案是使用边距沿着圆圈向下，但是当我改变边距时限制了圆圈的顶部而不是中心，所以我的中心正在移动......

这是我的代码示例:

               new Card (

                child :new Stack(
                  children: <Widget>[

                new Container(

                  width: 200.0,
                  height: 200.0,
                ),

                    new Container(
                    alignment: new FractionalOffset(0.0, 0.0),   
                      decoration: new BoxDecoration(
                        border: new Border.all(
                          color: Colors.blue.withOpacity(0.5),
                          width: val,  // it's my slider variable, to change the size of the circle
                        ),
                        shape: BoxShape.circle,
                      ),
                    ),

                  ],
                ),
               ),

Answer 1

像这样使用 Stack 的 alignment 属性

new Card(
        child: new Stack(
          alignment: AlignmentDirectional.center,
          children: <Widget>[
            new Container(
              width: 200.0,
              height: 200.0,
            ),
            new Container(
              alignment: new FractionalOffset(0.0, 0.0),
              decoration: new BoxDecoration(
                border: new Border.all(
                  color: Colors.blue.withOpacity(0.5),
                  width: 50.0,
                ),
                shape: BoxShape.circle,
              ),
            ),
          ],
        ),
      ),

或者简单地用 FractionalOffsetSet

包装你的容器小部件

 new Card(
            child: new Stack(
              alignment: AlignmentDirectional.center,
              children: <Widget>[
                new Container(
                  width: 200.0,
                  height: 200.0,
                ),
                FractionalTranslation(  
                translation: Offset(0.0, 0.5),
                child: new Container(
                     alignment: new FractionalOffset(0.0, 0.0),
                     decoration: new BoxDecoration(
                     border: new Border.all(
                     color: Colors.blue.withOpacity(0.5),
                     width: 50.0, 
                   ),
                shape: BoxShape.circle,
              ),
            ),
          ],
        ),
      ),