Tutorial 11: Introduction to SwiftUI: Building Modern Apps

SwiftUI is Apple’s framework for building user interfaces across all its platforms. With its declarative syntax and seamless integration with Apple’s ecosystem, SwiftUI simplifies UI development, making it faster and easier to create beautiful, responsive, and functional apps. In this tutorial, we’ll learn the basics of SwiftUI while building a Recipe Finder App. Setting Up the Project Before we dive into the code, let’s create a new SwiftUI project: Open Xcode. Select File > New > Project. Choose the App template and click Next. Name your project RecipeFinder and make sure SwiftUI is selected as the user interface. Building the Recipe Finder App In this app, users can input ingredients they have at home, and the app will display a list of recipes they can make based on those ingredients. Step 1: Defining the Recipe Model First, let’s define the basic data model for our recipe. We'll create a simple struct that holds information about each recipe. struct Recipe { var title: String var ingredients: [String] var instructions: String } Step 2: Building the Recipe List Next, we’ll create a list of recipes to display. This is just mock data for now, which will be displayed in a SwiftUI list. struct ContentView: View { let recipes = [ Recipe(title: "Spaghetti Carbonara", ingredients: ["Spaghetti", "Eggs", "Cheese", "Bacon"], instructions: "Cook spaghetti, mix with eggs and cheese, fry bacon and add to pasta."), Recipe(title: "Tomato Soup", ingredients: ["Tomatoes", "Garlic", "Onion", "Basil"], instructions: "Cook tomatoes, garlic, and onion. Blend and garnish with basil.") ] var body: some View { NavigationView { List(recipes, id: \.title) { recipe in NavigationLink(destination: RecipeDetailView(recipe: recipe)) { Text(recipe.title) } } .navigationTitle("Recipe Finder") } } } In this code, we’re creating a List view that displays each recipe's title. When a user taps on a recipe, it navigates to a detailed view of the recipe. Step 3: Creating the Recipe Detail View Let’s build a detailed view that shows the recipe’s ingredients and instructions. struct RecipeDetailView: View { var recipe: Recipe var body: some View { ScrollView { VStack(alignment: .leading) { Text("Ingredients:") .font(.headline) ForEach(recipe.ingredients, id: \.self) { ingredient in Text(ingredient) .padding(.leading) } Text("Instructions:") .font(.headline) .padding(.top) Text(recipe.instructions) .padding(.leading) .padding(.bottom) } .padding() } .navigationTitle(recipe.title) } } This view displays the ingredients in a list and shows the recipe instructions. Step 4: Adding Ingredient Search Functionality Now let’s allow users to filter recipes by entering ingredients they have at home. We'll add a simple search bar to the ContentView: struct ContentView: View { @State private var searchQuery = "" let recipes = [ Recipe(title: "Spaghetti Carbonara", ingredients: ["Spaghetti", "Eggs", "Cheese", "Bacon"], instructions: "Cook spaghetti, mix with eggs and cheese, fry bacon and add to pasta."), Recipe(title: "Tomato Soup", ingredients: ["Tomatoes", "Garlic", "Onion", "Basil"], instructions: "Cook tomatoes, garlic, and onion. Blend and garnish with basil.") ] var filteredRecipes: [Recipe] { if searchQuery.isEmpty { return recipes } else { return recipes.filter { recipe in recipe.ingredients.contains { ingredient in ingredient.lowercased().contains(searchQuery.lowercased()) } } } } var body: some View { NavigationView { VStack { TextField("Search ingredients", text: $searchQuery) .padding() .textFieldStyle(RoundedBorderTextFieldStyle()) .padding([.leading, .trailing]) List(filteredRecipes, id: \.title) { recipe in NavigationLink(destination: RecipeDetailView(recipe: recipe)) { Text(recipe.title) } } .navigationTitle("Recipe Finder") } } } } This code adds a TextField for the search bar, which filters the recipes based on the ingredients the user types. Conclusion SwiftUI is a powerful framework for building modern, reactive apps with minimal code. In this tutorial, we built a Recipe Finder App where users can

Mar 30, 2025 - 12:09

Tutorial 11: Introduction to SwiftUI: Building Modern Apps

SwiftUI is Apple’s framework for building user interfaces across all its platforms. With its declarative syntax and seamless integration with Apple’s ecosystem, SwiftUI simplifies UI development, making it faster and easier to create beautiful, responsive, and functional apps. In this tutorial, we’ll learn the basics of SwiftUI while building a Recipe Finder App.

Setting Up the Project

Before we dive into the code, let’s create a new SwiftUI project:

Open Xcode.
Select File > New > Project.
Choose the App template and click Next.
Name your project RecipeFinder and make sure SwiftUI is selected as the user interface.

Building the Recipe Finder App

In this app, users can input ingredients they have at home, and the app will display a list of recipes they can make based on those ingredients.

Step 1: Defining the Recipe Model

First, let’s define the basic data model for our recipe. We'll create a simple struct that holds information about each recipe.

struct Recipe {
    var title: String
    var ingredients: [String]
    var instructions: String
}

Step 2: Building the Recipe List

Next, we’ll create a list of recipes to display. This is just mock data for now, which will be displayed in a SwiftUI list.

struct ContentView: View {
    let recipes = [
        Recipe(title: "Spaghetti Carbonara", ingredients: ["Spaghetti", "Eggs", "Cheese", "Bacon"], instructions: "Cook spaghetti, mix with eggs and cheese, fry bacon and add to pasta."),
        Recipe(title: "Tomato Soup", ingredients: ["Tomatoes", "Garlic", "Onion", "Basil"], instructions: "Cook tomatoes, garlic, and onion. Blend and garnish with basil.")
    ]

    var body: some View {
        NavigationView {
            List(recipes, id: \.title) { recipe in
                NavigationLink(destination: RecipeDetailView(recipe: recipe)) {
                    Text(recipe.title)
                }
            }
            .navigationTitle("Recipe Finder")
        }
    }
}

In this code, we’re creating a List view that displays each recipe's title. When a user taps on a recipe, it navigates to a detailed view of the recipe.

Step 3: Creating the Recipe Detail View

Let’s build a detailed view that shows the recipe’s ingredients and instructions.

struct RecipeDetailView: View {
    var recipe: Recipe

    var body: some View {
        ScrollView {
            VStack(alignment: .leading) {
                Text("Ingredients:")
                    .font(.headline)
                ForEach(recipe.ingredients, id: \.self) { ingredient in
                    Text(ingredient)
                        .padding(.leading)
                }

                Text("Instructions:")
                    .font(.headline)
                    .padding(.top)
                Text(recipe.instructions)
                    .padding(.leading)
                    .padding(.bottom)
            }
            .padding()
        }
        .navigationTitle(recipe.title)
    }
}

This view displays the ingredients in a list and shows the recipe instructions.

Step 4: Adding Ingredient Search Functionality

Now let’s allow users to filter recipes by entering ingredients they have at home. We'll add a simple search bar to the ContentView:

struct ContentView: View {
    @State private var searchQuery = ""

    let recipes = [
        Recipe(title: "Spaghetti Carbonara", ingredients: ["Spaghetti", "Eggs", "Cheese", "Bacon"], instructions: "Cook spaghetti, mix with eggs and cheese, fry bacon and add to pasta."),
        Recipe(title: "Tomato Soup", ingredients: ["Tomatoes", "Garlic", "Onion", "Basil"], instructions: "Cook tomatoes, garlic, and onion. Blend and garnish with basil.")
    ]

    var filteredRecipes: [Recipe] {
        if searchQuery.isEmpty {
            return recipes
        } else {
            return recipes.filter { recipe in
                recipe.ingredients.contains { ingredient in
                    ingredient.lowercased().contains(searchQuery.lowercased())
                }
            }
        }
    }

    var body: some View {
        NavigationView {
            VStack {
                TextField("Search ingredients", text: $searchQuery)
                    .padding()
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .padding([.leading, .trailing])

                List(filteredRecipes, id: \.title) { recipe in
                    NavigationLink(destination: RecipeDetailView(recipe: recipe)) {
                        Text(recipe.title)
                    }
                }
                .navigationTitle("Recipe Finder")
            }
        }
    }
}

This code adds a TextField for the search bar, which filters the recipes based on the ingredients the user types.

Conclusion

SwiftUI is a powerful framework for building modern, reactive apps with minimal code. In this tutorial, we built a Recipe Finder App where users can search for recipes based on ingredients they have. We covered the basic structure of a SwiftUI app, how to use views like List, TextField, and NavigationLink, and how to build a simple yet functional app.

SwiftUI makes it easy to build beautiful apps across all Apple platforms, and with this foundational knowledge, you can now start building more complex applications.