Icons and Color switch

trackeroo/lib/frontend/views/edit_category_view.dart

@@ -15,12 +15,24 @@ class EditCategoryPage extends StatefulWidget {
 class _EditCategoryPageState extends State<EditCategoryPage> {
   TextEditingController _nameController = TextEditingController();
   Color _selectedColor = Colors.red;
+  IconData _selectedIcon = Icons.star;
 
   @override
   void initState() {
     super.initState();
     _nameController.text = widget.category.title;
     _selectedColor = Color(widget.category.colorValue);
+    _selectedIcon = _getValidIconData(widget.category.iconCodePoint);
+  }
+
+  IconData _getValidIconData(int codePoint) {
+    if (codePoint == Icons.star.codePoint) {
+      return Icons.star;
+    } else if (codePoint == Icons.favorite.codePoint) {
+      return Icons.favorite;
+    } else {
+      return Icons.star;
+    }
   }
 
   @override
@@ -34,8 +46,8 @@ class _EditCategoryPageState extends State<EditCategoryPage> {
     Category updatedCategory = Category(
       id: widget.category.id,
       title: newName,
-      iconCodePoint: widget.category.iconCodePoint,
-      iconFontFamily: widget.category.iconFontFamily,
+      iconCodePoint: _selectedIcon.codePoint,
+      iconFontFamily: 'MaterialIcons',
       colorValue: _selectedColor.value,
       spendings: widget.category.spendings,
       budget: widget.category.budget,
@@ -85,6 +97,27 @@ class _EditCategoryPageState extends State<EditCategoryPage> {
     );
   }
 
+  void _onIconChanged(IconData? newIcon) {
+    if (newIcon != null) {
+      setState(() {
+        _selectedIcon = newIcon;
+      });
+    }
+  }
+
+  Widget _buildIconContainer(IconData iconData) {
+    return Container(
+      decoration: BoxDecoration(
+        color: _selectedColor,
+        shape: BoxShape.circle,
+      ),
+      child: Icon(
+        iconData,
+        color: Colors.white,
+      ),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -108,37 +141,94 @@ class _EditCategoryPageState extends State<EditCategoryPage> {
               controller: _nameController,
               decoration: const InputDecoration(
                 labelText: 'Name',
+                
               ),
             ),
             const SizedBox(height: 16.0),
             Row(
               children: [
                 const Text(
-                  'Farbe:',
-                  style: TextStyle(fontSize: 16.0),
+                  'Farbe',
+                  style: TextStyle(
+                    fontSize: 19.0,
+                    fontWeight: FontWeight.bold,
+                  ),
                 ),
-                const SizedBox(width: 8.0),
+                const SizedBox(width: 16.0),
                 GestureDetector(
                   onTap: _showColorPicker,
                   child: Container(
-                    width: 30.0,
-                    height: 30.0,
+                    width: 32.0,
+                    height: 32.0,
                     decoration: BoxDecoration(
                       color: _selectedColor,
-                      border: Border.all(color: Colors.black),
+                      shape: BoxShape.circle,
                     ),
                   ),
                 ),
               ],
             ),
             const SizedBox(height: 16.0),
-            ElevatedButton(
-              onPressed: _updateCategoryName,
-              child: const Text('Speichern'),
+Row(
+  children: [
+    const Text(
+      'Icon',
+      style: TextStyle(
+        fontSize: 19.0,
+        fontWeight: FontWeight.bold,
+      ),
+    ),
+    const SizedBox(width: 16.0),
+    Expanded(
+      child: GridView.count(
+        shrinkWrap: true,
+        crossAxisCount: 6,
+        childAspectRatio: 1.0,
+        children: [
+          Icons.star,
+          Icons.favorite,
+          Icons.attach_money,
+          Icons.shopping_cart,
+          Icons.home,
+          Icons.work,
+          Icons.school,
+          Icons.pets,
+          Icons.luggage,
+          Icons.savings,
+          Icons.liquor,
+          Icons.celebration,
+        ].map((iconData) {
+          return GestureDetector(
+            onTap: () {
+              _onIconChanged(iconData);
+            },
+            child: Container(
+              decoration: BoxDecoration(
+                border: Border.all(
+                  color: _selectedIcon == iconData
+                      ? Colors.blue
+                      : Colors.transparent,
+                  width: 2.0,
+                ),
+              ),
+              child: _buildIconContainer(iconData),
             ),
+          );
+        }).toList(),
+      ),
+    ),
+  ],
+),
+const SizedBox(height: 16.0),
+ElevatedButton(
+  
+  onPressed: _updateCategoryName,
+  child: const Text('Speichern'),
+  
+),
           ],
         ),
       ),
     );
   }
-}
+}
\ No newline at end of file