How to Create a Custom Recipe Organizer in FlutterFlow

Create a `recipes` collection with fields: userId (String), title (String), description (String), imageUrl (String), prepTime (Integer, minutes), cookTime (Integer, minutes), servings (Integer), difficulty (String: Easy/Medium/Hard), category (String: Breakfast/Lunch/Dinner/Dessert/Snack), ingredients (List of Maps, each with name String, amount Double, unit String), instructions (List of Maps, each with stepNumber Integer, text String, imageUrl String optional), rating (Double), isPublic (Boolean). The key design decision is storing ingredients as structured objects rather than plain text strings. This enables serving size scaling and shopping list aggregation. Register the collection in FlutterFlow's Data panel.

Create a RecipeBrowse page. At the top, add a TextField with a search icon prefix for searching by recipe title. Below, add ChoiceChips with categories: All, Breakfast, Lunch, Dinner, Dessert, Snack. Bind the selected chip to a Page State variable categoryFilter. Add a GridView with 2 columns bound to a Backend Query on the recipes collection. Filter by category if not 'All', and filter by isPublic == true or userId == currentUser.uid. Each grid card is a Container with: the recipe Image at the top (with rounded corners), the title Text below, a Row showing prep + cook time with clock icons, and a difficulty Chip. On tap, navigate to the RecipeDetail page with the recipeId.

Create a RecipeDetail page that receives a recipeId parameter. At the top, show the recipe hero image in a Container with rounded bottom corners. Below, display the title heading, a Row with prep time, cook time, and servings icons/values, and the difficulty Chip. For ingredients, add a serving size adjuster: a Row with minus and plus IconButtons around a Text showing the current serving count. Store the adjusted servings in a Page State variable. Add a ListView for ingredients — each item shows a Checkbox, the ingredient name, and the scaled amount (originalAmount * adjustedServings / originalServings) with the unit. Track checked ingredients in a Page State list. Below the ingredients, add a section heading 'Instructions' and a ListView of steps. Each step shows the step number in a CircleAvatar, the instruction text, and an optional step image.

Create an AddRecipe page with a form. Add TextFields for title and description, an Image picker for the recipe photo, number inputs for prep time, cook time, and servings, a DropDown for category, and a DropDown for difficulty. For ingredients, add an Add Ingredient button that appends a new empty row to a Page State list. Each row has three TextFields: name, amount (number), and unit (DropDown with cup, tbsp, tsp, oz, g, lb, piece). Add a delete icon on each row to remove it. For instructions, add an Add Step button that appends a row with a multiline TextField and an optional image picker. On Save, construct the ingredients and instructions arrays from the Page State lists and create the Firestore document.

Create a ShoppingList page. At the top, add a Button 'Add Recipes to List' that opens a BottomSheet with a ListView of the user's saved/favorited recipes, each with a Checkbox. On confirm, read the selected recipes' ingredients arrays. Use a Custom Function to merge them: group by ingredient name and unit, sum the amounts. For example, if Recipe A needs 2 cups flour and Recipe B needs 1 cup flour, the shopping list shows 3 cups flour. Display the merged list in a ListView with Checkboxes so users can check off items as they shop. Store the shopping list in a Firestore subcollection under the user so it persists across sessions. Add a Clear Completed button that removes checked items.

1// Custom Function: mergeIngredients
2// Input: List<dynamic> allIngredients (flat list from all recipes)
3// Output: List<Map<String, dynamic>> merged
4
5List<Map<String, dynamic>> mergeIngredients(
6  List<dynamic> allIngredients,
7) {
8  final Map<String, Map<String, dynamic>> merged = {};
9
10  for (final item in allIngredients) {
11    final name = (item['name'] as String).toLowerCase().trim();
12    final unit = (item['unit'] as String).toLowerCase().trim();
13    final amount = (item['amount'] as num).toDouble();
14    final key = '$name|$unit';
15
16    if (merged.containsKey(key)) {
17      merged[key]!['amount'] =
18        (merged[key]!['amount'] as double) + amount;
19    } else {
20      merged[key] = {
21        'name': name,
22        'unit': unit,
23        'amount': amount,
24      };
25    }
26  }
27
28  return merged.values.toList()
29    ..sort((a, b) =>
30      (a['name'] as String).compareTo(b['name'] as String));
31}