Recipe Selection (4/n) - Add/Remove Icons

aadityayadav17 · Sep 19, 2024 · 7628b52 · 7628b52
1 parent 498c8f6
commit 7628b52
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 2 deletions.
diff --git a/lib/screens/recipe_selection_screen.dart b/lib/screens/recipe_selection_screen.dart
@@ -146,7 +146,13 @@ class RecipeSelectionScreen extends StatelessWidget {
             Row(
               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
               children: [
-                _buildActionIcon(Icons.close, Colors.red),
+                // Remove button with background
+                _buildActionIconWithBackground(
+                  'assets/icons/screens/recipe_selection_screen/recipe-reject-accept-rectangle.png',
+                  'assets/icons/screens/recipe_selection_screen/recipe-rejected.png',
+                ),
+
+                // Done Button
                 ElevatedButton(
                   onPressed: () {
                     // Handle Done action
@@ -161,7 +167,12 @@ class RecipeSelectionScreen extends StatelessWidget {
                   ),
                   child: const Text('Done'),
                 ),
-                _buildActionIcon(Icons.add, Colors.green),
+
+                // Add button with background
+                _buildActionIconWithBackground(
+                  'assets/icons/screens/recipe_selection_screen/recipe-reject-accept-rectangle.png',
+                  'assets/icons/screens/recipe_selection_screen/recipe-accepted.png',
+                ),
               ],
             ),
 
@@ -219,6 +230,31 @@ class RecipeSelectionScreen extends StatelessWidget {
     );
   }
 
+  // Helper method to build the icon with a background rectangle and hard alignment
+  Widget _buildActionIconWithBackground(
+      String backgroundPath, String iconPath) {
+    return Stack(
+      children: [
+        // Rectangle background (60x60)
+        Image.asset(
+          backgroundPath,
+          width: 60,
+          height: 60,
+        ),
+        // Foreground icon (24x24) with hard alignment using Positioned
+        Positioned(
+          top: 15, // Adjust the top value to align vertically
+          left: 15, // Adjust the left value to align horizontally
+          child: Image.asset(
+            iconPath,
+            width: 24,
+            height: 24,
+          ),
+        ),
+      ],
+    );
+  }
+
   // Helper method to build the action icon
   Widget _buildActionIcon(IconData icon, Color color) {
     return IconButton(

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -68,6 +68,9 @@ flutter:
     - assets/icons/screens/recipe_selection_screen/cooking-difficulty-easy.png
     - assets/icons/screens/recipe_selection_screen/price.png
     - assets/icons/screens/recipe_selection_screen/protein.png
+    - assets/icons/screens/recipe_selection_screen/recipe-accepted.png
+    - assets/icons/screens/recipe_selection_screen/recipe-reject-accept-rectangle.png
+    - assets/icons/screens/recipe_selection_screen/recipe-rejected.png
     - assets/icons/screens/recipe_selection_screen/time-clock.png
 
   # An image asset can refer to one or more resolution-specific "variants", see