如何使圆心在颤动中成卡？

Question

我试图在图像（谷歌地图网址）中创建非地理围栏图层

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

这是我的代码示例：

               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,
              ),
            ),
          ],
        ),
      ),

Answer 2

您可以使用Stack的alignment属性将圆形定中心：

 new Card(
        child: new Stack(
          alignment: AlignmentDirectional.center,//add this line
          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 3

将小部件包装在FractionalTranslation中，并将偏移Y值设置为0.5

        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, // it's my slider variable, to change the size of the circle
              ),
              shape: BoxShape.circle,
            ),
          ),
        ),