Put table in a expandable view

frontend/lib/devices.dart

@@ -68,7 +68,8 @@ class CategoryWidget extends StatelessWidget {
 
   CategoryWidget({super.key, required this.category});
 
-  String capitalize(String s) {
+  String Name() {
+    var s = category.name;
     return "${s[0].toUpperCase()}${s.substring(1)}";
   }
 
@@ -114,16 +115,10 @@ class CategoryWidget extends StatelessWidget {
                   "Power Draw"),
             ]));
 
-    return Column(children: <Widget>[
-      Text(
-          style: const TextStyle(fontWeight: FontWeight.bold),
-          textScaleFactor: 2.0,
-          capitalize(category.name)),
-      Table(
-          border: TableBorder.all(),
-          defaultVerticalAlignment: TableCellVerticalAlignment.middle,
-          children: list)
-    ]);
+    return Table(
+        border: TableBorder.all(),
+        defaultVerticalAlignment: TableCellVerticalAlignment.middle,
+        children: list);
   }
 }
 

frontend/lib/main.dart

@@ -33,6 +33,8 @@ class MyHomePage extends StatefulWidget {
 }
 
 class _MyHomePageState extends State<MyHomePage> {
+  List<bool> expanded = [];
+
   @override
   Widget build(BuildContext context) {
     return FutureBuilder<List<Category>>(
@@ -42,19 +44,47 @@ class _MyHomePageState extends State<MyHomePage> {
             return const Text("still loading");
           }
 
+          final data = categories.data!;
+          final category_count = data.length;
+
+          if (category_count > expanded.length) {
+            final int diff = category_count - expanded.length;
+
+            final List<bool> diff_list = List<bool>.filled(diff, true);
+            expanded.addAll(diff_list);
+          } else if (category_count < expanded.length) {
+            final int diff = expanded.length - category_count;
+
+            expanded = List<bool>.filled(diff, false);
+          }
+
           return Scaffold(
               appBar: AppBar(
                 backgroundColor: Theme.of(context).colorScheme.inversePrimary,
                 title: Text(widget.title),
               ),
-              body: Center(
-                child: Column(
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  children: categories.data!
-                      .map((category) => CategoryWidget(category: category))
-                      .toList(),
-                ),
-              ));
+              body: Column(children: [
+                ExpansionPanelList(
+                    expansionCallback: (int index, bool isExpanded) {
+                      setState(() {
+                        expanded[index] = isExpanded;
+                      });
+                    },
+                    children: data.asMap().entries.map(
+                      (category) {
+                        final CategoryWidget widget =
+                            CategoryWidget(category: category.value);
+
+                        return ExpansionPanel(
+                            headerBuilder:
+                                (BuildContext context, bool isExpanded) {
+                              return ListTile(title: Text(widget.Name()));
+                            },
+                            body: widget,
+                            isExpanded: expanded[category.key]);
+                      },
+                    ).toList())
+              ]));
         });
   }
 }