How to make recipes app in swiftUI

A recipes app in SwiftUI is an intuitive and user-friendly application built using the SwiftUI framework.

It provides a platform for users to discover, save, and access a wide variety of recipes right at their fingertips.

With a clean and visually appealing interface, this app allows users to browse through a collection of recipes, search for specific dishes or ingredients, view detailed recipe instructions, and even save their favorite recipes for future reference.

Whether you’re a cooking enthusiast or a beginner in the kitchen, this SwiftUI recipes app simplifies the process of finding and following recipes, making it easier than ever to explore and create delicious meals.

Recipes app is written in SwiftUI using Single State Container

A Recipes App in swiftUI with Example Code

import SwiftUI

struct Recipe: Identifiable {
    let id = UUID()
    let title: String
    let ingredients: [String]
    let instructions: String
    let imageName: String
}

struct RecipeListView: View {
    let recipes = [
        Recipe(title: "Pasta Carbonara", ingredients: ["Pasta", "Eggs", "Bacon", "Parmesan cheese"], instructions: "1. Cook pasta...\n2. Beat eggs...\n3. Fry bacon...\n4. Mix pasta, eggs, bacon, and cheese...", imageName: "carbonara"),
        Recipe(title: "Chicken Stir-Fry", ingredients: ["Chicken breast", "Vegetables", "Soy sauce", "Oil"], instructions: "1. Cut chicken into strips...\n2. Heat oil in a pan...\n3. Add chicken and vegetables...\n4. Stir-fry until cooked...", imageName: "stirfry")
    ]
    
    var body: some View {
        NavigationView {
            List(recipes) { recipe in
                NavigationLink(destination: RecipeDetailView(recipe: recipe)) {
                    Image(recipe.imageName)
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: 80, height: 80)
                        .cornerRadius(10)
                    Text(recipe.title)
                }
            }
            .navigationBarTitle("Recipes")
        }
    }
}

struct RecipeDetailView: View {
    let recipe: Recipe
    
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Image(recipe.imageName)
                .resizable()
                .aspectRatio(contentMode: .fit)
            
            Text("Ingredients:")
                .font(.headline)
            VStack(alignment: .leading, spacing: 5) {
                ForEach(recipe.ingredients, id: \.self) { ingredient in
                    Text("- " + ingredient)
                }
            }
            
            Text("Instructions:")
                .font(.headline)
            Text(recipe.instructions)
                .fixedSize(horizontal: false, vertical: true)
        }
        .padding()
        .navigationBarTitle(recipe.title)
    }
}

struct ContentView: View {
    var body: some View {
        RecipeListView()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

In this example, we have a Recipe struct representing a recipe with properties like title, ingredients, instructions, and imageName. The RecipeListView displays a list of recipes using SwiftUI’s List and NavigationLink. The RecipeDetailView shows the details of a specific recipe.

To add more recipes, you can simply extend the recipes array in RecipeListView with additional Recipe instances.

Remember to include images named “carbonara.png” and “stirfry.png” in your project’s asset catalog to display the recipe images correctly.

You can further enhance the app by adding search functionality, favorites, or fetching recipes from an API. This example provides a basic starting point for building a recipes app in SwiftUI.

Download

Recipes App