From 9d9f58c269a569054f5c2a08a728e0e063397849 Mon Sep 17 00:00:00 2001
From: Peter Kyeyune <peterkayk@gmail.com>
Date: Thu, 19 Dec 2024 12:32:58 +0300
Subject: [PATCH] Refactor container expansion logic and update UI to toggle
 arrow icon

---
 .../widgets/analytics_specifics.dart          | 51 ++++++++++++-------
 1 file changed, 34 insertions(+), 17 deletions(-)

diff --git a/mobile-v3/lib/src/app/dashboard/widgets/analytics_specifics.dart b/mobile-v3/lib/src/app/dashboard/widgets/analytics_specifics.dart
index 761e222835..e3f2a47016 100644
--- a/mobile-v3/lib/src/app/dashboard/widgets/analytics_specifics.dart
+++ b/mobile-v3/lib/src/app/dashboard/widgets/analytics_specifics.dart
@@ -17,10 +17,15 @@ class _AnalyticsSpecificsState extends State<AnalyticsSpecifics> {
   double containerHeight = 90;
   bool expanded = false;
 
-  void expandContainer() {
+  void toggleContainer() {
     setState(() {
-      containerHeight = 180;
-      expanded = true;
+      if (expanded) {
+        containerHeight = 90;
+        expanded = false;
+      } else {
+        containerHeight = 180;
+        expanded = true;
+      }
     });
   }
 
@@ -139,26 +144,38 @@ class _AnalyticsSpecificsState extends State<AnalyticsSpecifics> {
           ),
           SizedBox(height: 8 + 4),
           InkWell(
-            onTap: () => this.expandContainer(),
+            onTap: () => toggleContainer(),
             child: AnimatedContainer(
                 duration: Duration(milliseconds: 300),
-                padding:
-                    const EdgeInsets.symmetric(vertical: 16, horizontal: 8),
+                padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 8),
                 height: containerHeight,
                 color: Theme.of(context).highlightColor,
                 child: Container(
                   padding: const EdgeInsets.symmetric(horizontal: 16),
-                  child: Row(
-                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                      crossAxisAlignment: CrossAxisAlignment.center,
-                      children: [
-                        Text(
-                          "🚨 Air Quality Alerts",
-                          style: TextStyle(
-                              fontSize: 16, fontWeight: FontWeight.w600),
-                        ),
-                        Icon(Icons.arrow_drop_down)
-                      ]),
+                  child: Column(
+                    children: [
+                      Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        crossAxisAlignment: CrossAxisAlignment.center,
+                        children: [
+                          Text(
+                            "🚨 Air Quality Alerts",
+                            style: TextStyle(
+                                fontSize: 16, fontWeight: FontWeight.w600),
+                          ),
+                          Icon(
+                            expanded 
+                                ? Icons.arrow_drop_up 
+                                : Icons.arrow_drop_down
+                          )
+                        ],
+                      ),
+                      if (expanded) ...[
+                        SizedBox(height: 16),
+                        Text(""),
+                      ],
+                    ],
+                  ),
                   decoration: BoxDecoration(
                       color: Theme.of(context).scaffoldBackgroundColor,
                       borderRadius: BorderRadius.circular(44)),