how to center a circle into a card in flutter ?

Question

I tried to create un geofencing layer in an image ( google map url)

I have a card with a child image , and I add a circle stack over the map image and I use a slider to change the size of the zone. the problem is that I don't succeded to center the map in my container. The only solution currently found is to use margin to go down the circle but when I change the margin limit the top of the circle and not the center, so my center is shifting...

here is my code example:

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

                  ],
                ),
               ),

Solution 1

Either use alignment property of Stack like this

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

or simply wrap your container widget with 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,
              ),
            ),
          ],
        ),
      ),

Solution 2

Wrap your Widget in FractionalTranslation and set the the offset Y value to 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,
            ),
          ),
        ),

Solution 3

You can use Stack's alignment property to center the circle shape:

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