added expandable list of ingredients

lib/constants.dart

@@ -0,0 +1,16 @@
+import 'models/unit.dart';
+
+Iterable<Unit> units = [
+  Unit('mg', UnitType.weight),
+  Unit('g', UnitType.weight),
+  Unit('kg', UnitType.weight),
+  Unit('ml', UnitType.fluid),
+  Unit('cl', UnitType.fluid),
+  Unit('dl', UnitType.fluid),
+  Unit('l', UnitType.fluid),
+  Unit('teaspoon', UnitType.fluid, system: System.imperial),
+  Unit('tablespoon', UnitType.fluid, system: System.imperial),
+  Unit('cup', UnitType.fluid, system: System.imperial),
+  Unit('pint', UnitType.fluid, system: System.imperial),
+  Unit('pieces', UnitType.count, system: System.neutral),
+];

lib/models/ingredient.dart

@@ -1,6 +1,8 @@
+import 'unit.dart';
+
 class Ingredient {
   final String title;
-  List<String> possibleUnits = [];
+  List<Unit> possibleUnits = [];
   List<String> preferredBrands = [];
 
   Ingredient({

lib/models/unit.dart

@@ -0,0 +1,17 @@
+class Unit {
+  final String name;
+  final UnitType type;
+  final System system;
+
+  Unit(this.name, this.type, {this.system = System.metric});
+}
+
+enum System { metric, imperial, neutral }
+
+enum UnitType {
+  metric,
+  imperial,
+  fluid,
+  weight,
+  count,
+}

lib/pages/create_recipe_page.dart

@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:rezepte/widgets/dropdown_textfield.dart';
-import 'package:rezepte/widgets/ingredients_list.dart';
+import '../widgets/ingredients_widget.dart';
 
 import '../models/difficulty.dart';
 import '../widgets/difficulty_dropdown.dart';
@@ -21,6 +20,7 @@ class _CreateRecipeState extends State<CreateRecipe> {
 
   @override
   Widget build(BuildContext context) {
+    final width = MediaQuery.of(context).size.width;
     return Scaffold(
       appBar: AppBar(
         title: const Text('Create Recipe'),
@@ -31,18 +31,19 @@ class _CreateRecipeState extends State<CreateRecipe> {
             TextFormField(
               controller: titleText,
               decoration: const InputDecoration(
-                hintText: 'Title',
+                label: Text('Title'),
               ),
             ),
             TextFormField(
               controller: descriptionText,
               decoration: const InputDecoration(
-                hintText: 'Description',
+                label: Text('Description'),
               ),
             ),
             const DifficultyDropdown(),
-            const IngredientsList(),
-            const DropdownTextfield(),
+            IngredientsWidget(
+              width: width * 0.9,
+            ),
           ],
         ),
       ),

lib/widgets/dropdown_textfield.dart

@@ -1,41 +0,0 @@
-import 'package:flutter/material.dart';
-
-class DropdownTextfield extends StatefulWidget {
-  const DropdownTextfield({super.key});
-
-  @override
-  State<DropdownTextfield> createState() => _DropdownTextfieldState();
-}
-
-class _DropdownTextfieldState extends State<DropdownTextfield> {
-  List<DropdownMenuItem> get _getDropdownItems {
-    return [
-      const DropdownMenuItem(
-        child: Text('rsitensroe'),
-        value: 1,
-      ),
-      const DropdownMenuItem(
-        child: Text('rstiersnmti'),
-        value: 2,
-      )
-    ];
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final dropdownValue = _getDropdownItems.first.value;
-    return SizedBox(
-      width: 500,
-      child: TextField(
-        decoration: InputDecoration(
-            suffix: DropdownButton(
-          items: _getDropdownItems,
-          onChanged: _onDropdownChanged,
-          value: dropdownValue,
-        )),
-      ),
-    );
-  }
-
-  void _onDropdownChanged(value) {}
-}

lib/widgets/ingredients_widget.dart

@@ -0,0 +1,85 @@
+import 'package:flutter/material.dart';
+import '../constants.dart' as constants;
+
+class IngredientsWidget extends StatefulWidget {
+  const IngredientsWidget({super.key, this.width});
+
+  final double? width;
+
+  @override
+  State<IngredientsWidget> createState() => _IngredientsWidgetState();
+}
+
+class _IngredientsWidgetState extends State<IngredientsWidget> {
+  late double width;
+  int itemCount = 1;
+
+  Widget _ingredientListBuilder(BuildContext context, int index) {
+    if (index == itemCount) {
+      return FloatingActionButton(
+        onPressed: () => setState(() {
+          itemCount++;
+        }),
+        child: const Icon(Icons.add),
+      );
+    }
+    return Row(
+      children: [
+        SizedBox(
+          width: width * 0.6,
+          child: const TextField(
+            textInputAction: TextInputAction.next,
+            decoration: InputDecoration(
+              label: Text('Ingredient'),
+            ),
+          ),
+        ),
+        SizedBox(
+          width: width * 0.2,
+          child: const TextField(
+            maxLines: 1,
+            keyboardType: TextInputType.number,
+            textInputAction: TextInputAction.next,
+            decoration: InputDecoration(
+              label: Text('Amount'),
+            ),
+          ),
+        ),
+        SizedBox(
+          width: width * 0.2,
+          child: DropdownButtonFormField<String>(
+            decoration: const InputDecoration(
+              label: Text('Unit'),
+            ),
+            isDense: true,
+            items: constants.units
+                .map(
+                  (e) => DropdownMenuItem<String>(
+                    value: e.name,
+                    child: SizedBox(
+                      width: width * 0.135,
+                      child: Text(e.name),
+                    ),
+                  ),
+                )
+                .toList(),
+            onChanged: _onDropdownChanged,
+          ),
+        )
+      ],
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    width = widget.width ?? MediaQuery.of(context).size.width;
+    return Expanded(
+      child: ListView.builder(
+        itemCount: itemCount + 1,
+        itemBuilder: _ingredientListBuilder,
+      ),
+    );
+  }
+
+  void _onDropdownChanged(value) {}
+}