Stabilized UI elements across multiple devices

Synchronized ACs Status functionality

lib/features/dashboard/view/widgets/carbon_emission.dart

@@ -15,11 +15,15 @@ class CarbonEmission extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
+      padding: const EdgeInsets.only(right: 20, left: 20, top: 10),
       decoration: BoxDecoration(
         color: Colors.white,
         borderRadius: BorderRadius.circular(20),
       ),
+      constraints: const BoxConstraints(
+        minHeight: 80,
+        maxHeight: 100,
+      ),
       child: Column(
         mainAxisAlignment: MainAxisAlignment.start,
         crossAxisAlignment: CrossAxisAlignment.start,

lib/features/dashboard/view/widgets/card_title.dart

@@ -14,7 +14,7 @@ class CardTitle extends StatelessWidget {
     return BodySmall(
       text: title,
       fontColor: Colors.grey,
-      fontSize: 12,
+      fontSize: MediaQuery.sizeOf(context).height.ceil() > 680 ? 12 : 8,
     );
   }
 }

lib/features/dashboard/view/widgets/consumption.dart

@@ -14,41 +14,48 @@ class Consumption extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
+      padding: const EdgeInsets.only(right: 20, left: 20, top: 10, bottom: 10),
       decoration: BoxDecoration(
         color: Colors.white,
         borderRadius: BorderRadius.circular(20),
       ),
+      constraints: const BoxConstraints(
+        minHeight: 80,
+        maxHeight: 100,
+      ),
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
-        crossAxisAlignment: CrossAxisAlignment.end,
         children: [
-          const Column(
-            mainAxisAlignment: MainAxisAlignment.end,
+          Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-              CardTitle(
+              const CardTitle(
                 title: StringsManager.ACConsumption,
               ),
-              Gap(10),
+              const Spacer(),
               Row(
                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
                 children: [
                   UnitedText(
                     value: "2",
-                    valueSize: 35,
+                    valueSize: MediaQuery.sizeOf(context).height.ceil() > 680
+                        ? 35
+                        : 24,
                     valueWeight: FontWeight.normal,
                     unit: "Units",
                   ),
-                  Gap(30),
+                  const Gap(30),
                   UnitedText(
-                    value: "720",
-                    valueSize: 35,
+                    value: "${MediaQuery.sizeOf(context).height.ceil()}",
+                    valueSize: MediaQuery.sizeOf(context).height.ceil() > 680
+                        ? 35
+                        : 24,
                     valueWeight: FontWeight.normal,
                     unit: "kWh",
                   ),
                 ],
               ),
+              const Spacer(),
             ],
           ),
           //TODO: Replace with actual pie chart