managed aspect ratio problem

client/lib/HomeScreen.dart

@@ -55,6 +55,8 @@ class HomeScreenState extends State<HomeScreen>{
   final int touchRefreshRate = (1000/30).toInt();  // 30 fps
   // final int touchRefreshRate = (1000/1).toInt();  // 30 fps
 
+   GlobalKey headerKey = GlobalKey(); // to calculate the header's height
+
   @override
   void initState(){
     super.initState();
@@ -71,12 +73,12 @@ class HomeScreenState extends State<HomeScreen>{
 
     Map data={
       "user": {
-      "username": "anne",
+      "username": "enemy",
       "id": "string",
       },
       "position": {
-        "x": 200.0,
-        "y": 200.0,
+        "x": 0.0+touchsize/2,  // top left corner
+        "y": 0.0+touchsize/2,  // top left corner
       },
       "color": "ff2244bb", // Hex value.
       "intensity": 1, // Vibration intensity.
@@ -84,6 +86,15 @@ class HomeScreenState extends State<HomeScreen>{
 
     othersTouchPoints[data['user']['id']]=data;
     
+    // just for debugging
+    // WidgetsBinding.instance.addPostFrameCallback((_){
+    //   ScaffoldMessenger.of(context).hideCurrentSnackBar();
+    //     ScaffoldMessenger.of(context).showSnackBar(
+    //       SnackBar(
+    //         content:Text(getHeaderHeight().toString())
+    //       )
+    //     );
+    // });
   }
 
   @override
@@ -93,6 +104,12 @@ class HomeScreenState extends State<HomeScreen>{
     super.dispose();
   }
 
+  double? getHeaderHeight(){
+    var size=headerKey.currentContext?.size;
+    // print(size?.height);
+    return size?.height;
+  }
+
   void getPreferences() async{
     prefs = await SharedPreferences.getInstance();
 
@@ -192,9 +209,15 @@ class HomeScreenState extends State<HomeScreen>{
         // print(map);
         
         if(map['type']=='enabled'){  // add touch point
+        
+        // static width and height
+        double staticHeight=getHeaderHeight()!+outsidepadding*2;    // this is the extra static height which change with resize
+        double staticWidth=outsidepadding*2;    // this is the extra static height which change with resize
+        
         // rescale point according to the screen
-        map['position']['x']*=width;
-        map['position']['y']*=height;
+        map['position']['x']*=width-staticWidth;
+        map['position']['y']*=height-staticHeight;
+        
         // print(map['position']['x'].toString());
         // print(map['position']['y'].toString());
           setState(() {
@@ -314,6 +337,7 @@ class HomeScreenState extends State<HomeScreen>{
   Widget header(){
     final Color buttoncolor=Color.fromARGB(255, 70, 70, 70);
     return Padding(
+      key:headerKey,
       padding:EdgeInsets.symmetric(vertical:20),
       child:Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -405,6 +429,8 @@ class HomeScreenState extends State<HomeScreen>{
       Duration(milliseconds: touchRefreshRate), (timer) async {
         // send touch to server
         Map data;
+        double staticHeight=getHeaderHeight()!+outsidepadding*2;    // this is the extra static height which change with resize
+        double staticWidth=outsidepadding*2;    // this is the extra static height which change with resize
 
         try{
           await channel.ready;
@@ -420,13 +446,14 @@ class HomeScreenState extends State<HomeScreen>{
           "position": {
             // "x":20,
             // "y":20,
-            "x": touchX/width,  // send ratio x e.g. : x:700, width:800,  then send 0.9
-            "y": touchY/height, // send ratio y e.g. : y:400, height:800 then send 0.5
+            "x": touchX/(width-staticWidth),  // send ratio x e.g. : x:700, width:800,  then send 0.9
+            "y": touchY/(height-staticHeight), // send ratio y e.g. : y:400, height:800 then send 0.5
           },
           "color": profileColor, // Hex value. Default: random
           // "intensity"?: 1 // Vibration intensity. Default: 1
         };
-
+        // print(data['position']['x']);
+        // print(data['position']['y']);
         channel.sink.add(jsonEncode(data));
       }
     );
@@ -450,8 +477,8 @@ class HomeScreenState extends State<HomeScreen>{
       "position": {
         // "x":20,
         // "y":20,
-        "x": touchX/width,  // send ratio x e.g. : x:700, width:800,  then send 0.9
-        "y": touchY/height, // send ratio y e.g. : y:400, height:800 then send 0.5
+        "x": 0,  // send ratio x e.g. : x:700, width:800,  then send 0.9
+        "y": 0, // send ratio y e.g. : y:400, height:800 then send 0.5
       },
       "color": profileColor, // Hex value. Default: random
       // "intensity"?: 1 // Vibration intensity. Default: 1
@@ -562,13 +589,13 @@ class HomeScreenState extends State<HomeScreen>{
 
     // detect Collision
     detectTouchCollision(
-      x:details.globalPosition.dx,
-      y:details.globalPosition.dy,
+      x:details.localPosition.dx,
+      y:details.localPosition.dy,
     );
     
     setState(() {
-      touchX = details.globalPosition.dx;
-      touchY = details.globalPosition.dy;
+      touchX = details.localPosition.dx;
+      touchY = details.localPosition.dy;
       isTouching=true; // show it
     });
     
@@ -590,17 +617,17 @@ class HomeScreenState extends State<HomeScreen>{
 
     // detect Collision
     detectTouchCollision(
-      x:details.globalPosition.dx,
-      y:details.globalPosition.dy,
+      x:details.localPosition.dx,
+      y:details.localPosition.dy,
     );
 
     // print(details.localPosition);
     setState(() {
-      touchX = details.globalPosition.dx;
-      touchY = details.globalPosition.dy;
+      touchX = details.localPosition.dx;
+      touchY = details.localPosition.dy;
     });
     // print(profileColor);
-    // print(details.globalPosition);
+    // print(details.localPosition);
     
   }
 
@@ -610,8 +637,8 @@ class HomeScreenState extends State<HomeScreen>{
     
     // detect Collision end
     detectTouchCollision(
-      x:0,
-      y:0,
+      x:-1000,
+      y:-1000,
     );
 
     setState(() {
@@ -649,8 +676,35 @@ class HomeScreenState extends State<HomeScreen>{
             color:Color.fromARGB(255, 30, 30, 30),
             borderRadius: BorderRadius.circular(50),
           ),
-          // width:width*0.9,
-           
+          clipBehavior: Clip.hardEdge,
+          child:Stack(
+            clipBehavior: Clip.hardEdge,
+            children: [
+              
+              // render received touch points
+              ...othersTouchPoints.values.map<Widget>((map){
+                  return buildTouchPoint(
+                visible:true,
+                x:map['position']['x'],
+                y:map['position']['y'],
+                size:touchsize,
+                color:colorFromHex(map['color'])!,     
+              );
+              }).toList(),
+              
+
+              // our touch point
+              buildTouchPoint(
+                visible:isTouching,
+                x:touchX,
+                y:touchY,
+                size:touchsize,
+                color:colorFromHex(profileColor)!,     
+                // color:Colors.red,     
+              ),
+
+            ],
+          ),
         ),
       ),
     );
@@ -659,8 +713,8 @@ class HomeScreenState extends State<HomeScreen>{
   
 
   Widget build(BuildContext){
-    width=MediaQuery.of(context).size.width-(outsidepadding*2);
-    height=MediaQuery.of(context).size.height-(outsidepadding*2);
+    width=MediaQuery.of(context).size.width;
+    height=MediaQuery.of(context).size.height;
 
     return Scaffold(
       // backgroundColor: Color(0xff0e0e0e),
@@ -737,28 +791,6 @@ class HomeScreenState extends State<HomeScreen>{
           ),
 
 
-          // render received touch points
-          ...othersTouchPoints.values.map<Widget>((map){
-              return buildTouchPoint(
-            visible:true,
-            x:map['position']['x'],
-            y:map['position']['y'],
-            size:touchsize,
-            color:colorFromHex(map['color'])!,     
-          );
-          }).toList(),
-           
-
-          // our touch point
-          buildTouchPoint(
-            visible:isTouching,
-            x:touchX,
-            y:touchY,
-            size:touchsize,
-            color:colorFromHex(profileColor)!,     
-            // color:Colors.red,     
-          ),
-
       ]),
 
     );