Flutter UI breaks when "smallest width" is changed in developer options - flutter

Question

I am new into flutter programming. I have been working on a certain UI as shown below.
If I attempt to change the "smallest width" option in the developer options and set to some other value than the default, the whole UI breaks as shown.
I must add that the middle area which got completely broken was a stack widget.
#override
Widget build(BuildContext context) {
return Consumer<SinglePlayerGameState>(
builder: (context, gameState, child) => Expanded(
flex: 48,
child: Container(
color: gameState.getGameColor(),
child: Center(
child: Stack(
overflow: Overflow.visible,
children: <Widget>[
Positioned(
child: Transform.rotate(
angle: 45,
child: UNOcard(UNOcardData(CardTypes.BACK)),
),
top: -30,
left: 90,
),
Positioned(
child: Transform.rotate(
angle: 65,
child: UNOcard(UNOcardData(CardTypes.BACK)),
),
top: 20,
left: 50,
),
Positioned(
child: Transform.rotate(
angle: 180,
child: UNOcard(UNOcardData(CardTypes.BACK)),
),
top: 100,
left: 65,
),
Positioned(
child: Transform.rotate(
angle: 45,
child: UNOcard(UNOcardData(CardTypes.BACK)),
),
top: 10,
right: 10,
),
Positioned(
child: Transform.rotate(
angle: 65,
child: UNOcard(UNOcardData(CardTypes.BACK)),
),
top: 120,
right: 50,
),
Positioned(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.black),
child: Text(
"${gameState.playingCards.length}",
style: TextStyle(
fontSize: 20,
fontFamily: 'Frijole',
color: Colors.white),
),
padding: EdgeInsets.all(7),
),
top: 10,
left: 10,
),
Positioned(
child: SizedBox(
child: Center(
child: FlatButton(
onPressed: () {
gameState.nextTurn();
},
child: Icon(
FontAwesomeIcons.undoAlt,
size: 25,
),
color: Colors.white,
)),
height: 35,
width: 60,
),
bottom: 10,
left: 10,
),
Positioned(
child: DragTarget<UNOcardData>(
onWillAccept: (UNOcardData data) {
var res = isValidMove(
data, gameState.onGoingCards.last, gameState);
if(res){
print(res);
return true;
}else{
vibrate();
return false;
}
},
onAccept: (UNOcardData data) {
print(data);
performAction(data, gameState);
},
builder: (context, candidateData, rejectedData) =>
Transform.rotate(
angle: 0,
child: gameState.onGoingCards.last,
),
),
top: 60,
right: 100,
),
],
),
),
),
),
);
}
}
Like we use units like "vmin , vmax , vh " etc in html/css for responsive texts and sizes, what are the alternatives in flutter ? How do we responsive apps in flutter exactly ? I am not talking about scaling to other screen sizes, but to slightly different resolutions and logical pixel densities.
Thanks for your time.

Answer 1

That's because you are using margins from the edges with
Positioned(
child: Transform.rotate(
angle: 180,
child: UNOcard(UNOcardData(CardTypes.BACK)),
),
top: 100,
left: 65,
),
This top means that it's going to position itself 100 units from the top. What you actually want is some percentage offset from the center. You can do it like this:
Positioned.fill(
child: Align(
// (0, 0) is the center, (1, 1) is right bottom, (-1, -1) is left top and so on
alignment: Alignment(0.25, 0.25),
child: YOUR_WIDGET
)
);
For more responsive UI you can get screen_sizes with MediaQuery.of(context) or use a package like flutter_screenutil to scale your UI according to a sample, like for example 1080x1920 screen.