如何在 flutter 中将圆圈居中放入卡片中？

Question

我试图在图像中创建非地理围栏图层（google 地图 url）

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

这是我的代码示例：

               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 的对齐方式属性使圆形居中：

 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 2

将您的 Widget 包裹在 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,
            ),
          ),
        ),

Answer 3

像这样使用 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,
              ),
            ),
          ],
        ),
      ),

如何在 flutter 中将圆圈居中放入卡片中？

how to center a circle into a card in flutter ?

stack

center

flutter