Search code examples
sizeflutterresolution

how to have same size ratio of circle between different screen resolution in flutter


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

Solution

  • Get width of the mobile screen using MediaQuery.of(context).size.width And set whatever ratio you want to set