Functioning Ingredient BottomSheet

lib/pages/create_recipe_pages/ingredients_page.dart

@@ -1,10 +1,91 @@
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
 
-class IngredientsPage extends StatelessWidget {
+import '../../services/providers/recipe_provider.dart';
+import '../../widgets/ingredient_bottomsheet.dart';
+
+class IngredientsPage extends StatefulWidget {
   const IngredientsPage({super.key});
 
+  @override
+  State<IngredientsPage> createState() => _IngredientsPageState();
+}
+
+class _IngredientsPageState extends State<IngredientsPage> {
+  late RecipeProvider _recipeProvider;
+
   @override
   Widget build(BuildContext context) {
-    return Center(child: const Text('Ingredients'));
+    _recipeProvider = context.watch<RecipeProvider>();
+
+    return Stack(
+      children: [
+        ListView.separated(
+          padding: const EdgeInsets.only(bottom: 88),
+          itemCount: _recipeProvider.recipe.ingredients.length,
+          itemBuilder: _ingredientListBuilder,
+          separatorBuilder: (context, index) => const Divider(),
+        ),
+        Align(
+          alignment: Alignment.bottomRight,
+          child: Padding(
+            padding: const EdgeInsets.only(bottom: 16, right: 16),
+            child: FloatingActionButton(
+              onPressed: _openIngredientBottomSheet,
+              child: const Icon(Icons.add),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  void _openIngredientBottomSheet() {
+    showModalBottomSheet(
+      context: context,
+      builder: (context) => IngredientBottomsheet(
+        onSubmitted: _recipeProvider.addIngredient,
+      ),
+    );
+  }
+
+  Widget? _ingredientListBuilder(BuildContext context, int index) {
+    final ingredient = _recipeProvider.recipe.ingredients.elementAt(index);
+
+    return ListTile(
+      contentPadding: EdgeInsets.zero,
+      title: Text(ingredient.ingredient.title),
+      subtitle: ingredient.optional ? const Text('optional') : null,
+      trailing: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Text(
+            ingredient.amount.toString(),
+            style: Theme.of(context)
+                .textTheme
+                .bodyLarge!
+                .copyWith(color: Theme.of(context).colorScheme.onSurface),
+          ),
+          const Padding(padding: EdgeInsets.symmetric(horizontal: 2)),
+          Text(
+            ingredient.unit.name,
+            style: Theme.of(context)
+                .textTheme
+                .bodyLarge!
+                .copyWith(color: Theme.of(context).colorScheme.onSurface),
+          ),
+          const Padding(padding: EdgeInsets.symmetric(horizontal: 5)),
+          SizedBox(
+            width: 30,
+            height: 30,
+            child: IconButton(
+              padding: EdgeInsets.zero,
+              onPressed: () => _recipeProvider.removeIngredient(ingredient),
+              icon: const Icon(Icons.delete),
+            ),
+          ),
+        ],
+      ),
+    );
   }
 }