Stabilized UI elements across multiple devices

Synchronized ACs Status functionality

lib/features/dashboard/view/dashboard_view.dart

@@ -1,4 +1,6 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
 import 'package:gap/gap.dart';
 import 'package:syncrow_app/features/dashboard/view/widgets/carbon_emission.dart';
 import 'package:syncrow_app/features/dashboard/view/widgets/consumption.dart';
@@ -13,31 +15,33 @@ class DashboardView extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return const Column(
+    return Column(
       mainAxisAlignment: MainAxisAlignment.start,
       crossAxisAlignment: CrossAxisAlignment.stretch,
       children: [
-        TitleMedium(
+        const TitleMedium(
           text: StringsManager.dashboard,
           style: TextStyle(
             fontSize: 32,
             fontWeight: FontWeight.bold,
           ),
         ),
-        LiveMonitorTab(),
-        Gap(10),
-        EnergyUsage(),
-        Expanded(
-          child: Padding(
-            padding: EdgeInsets.only(top: 20),
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.start,
-              children: [
-                Consumption(),
-                Gap(20),
-                CarbonEmission(),
-              ],
-            ),
+        const LiveMonitorTab(),
+        const Gap(10),
+        const EnergyUsage(),
+        Container(
+          padding: const EdgeInsets.only(top: 20),
+          constraints: const BoxConstraints(
+            minHeight: 220,
+            maxHeight: 240,
+          ),
+          child: const Column(
+            mainAxisAlignment: MainAxisAlignment.start,
+            children: [
+              Consumption(),
+              Gap(20),
+              CarbonEmission(),
+            ],
           ),
         ),
       ],

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