I tried to make a custom geofencing, to do this, I display an Url of googlemap and I add a stack with a circle, I had adjust the size with a coefficient to have the good representation. problem my coefficient isn't dynamic with any screen device
Container ( padding: const EdgeInsets.only(top :160.0),
child : new Card(
elevation: 2.0,
child: new Stack(
alignment: AlignmentDirectional.center,
children: <Widget>[
new Container(
child: new Image.network(statichomeMapUri.toString()),
),
FractionalTranslation(
translation: Offset(0.0, 0.0),
child: new Container(
alignment: new FractionalOffset(0.0, 0.0),
decoration: new BoxDecoration(
border: new Border.all(
color: Colors.orangeAccent.withOpacity(0.5),
width: perimetre/3.4, // need to be dynamic
),
shape: BoxShape.circle,
),
),
),
new Container(
//padding: const EdgeInsets.only(bottom:10.0),
margin: new EdgeInsets.all(140.0),
child : Icon(Icons.home, color: Colors.white, size: 25.0),
),
],
),
),
)
Get width of the mobile screen using MediaQuery.of(context).size.width And set whatever ratio you want to set