🔗 Download the full commented source code (Xcode Project) for this Tutorial

🧰 Getting Started — Create a Fresh SwiftUI Project

Open Xcode and start a new app:

• Go to File → New → Project → App

• Name your project something like WidgetApp

• Interface: SwiftUI

• Language: Swift

Save the project and move on to the next step.

➕ Add the Widget Extension

Now it’s time to add a widget target:

• File → New → Target

• Select Widget Extension

• Uncheck the options:

  • Live Activity

  • Control

  • Configuration App Intent

• Name it something like WidgetAppWidget

• Confirm and activate the new scheme if prompted.

🔍 Understand the Auto-Generated Files

Xcode will create two key files:

AppWidgetBundle.swift – Entry Point

This struct defines your widget bundle and serves as the extension’s entry:

import WidgetKit
import SwiftUI

@main
struct AppWidgetBundle: WidgetBundle {
    var body: some Widget {
        AppWidget()
    }
}

• The @main attribute designates this as the starting point of your widget extension.

• You can group multiple widgets into this bundle in future updates.

AppWidget.swift – The Core Widget File

This file contains everything your widget needs:

• A data model (SimpleEntry)

• A timeline provider

• A view for the widget UI

• The actual widget struct with configuration

• A #Preview section to test in Xcode

📦 1. Define the Widget’s Data Model

The SimpleEntry struct represents the snapshot of data shown at each update:

struct SimpleEntry: TimelineEntry {
    let date: Date
    let emoji: String
}

• date: Tells the system when to show this entry.

• emoji: Temporary example content — later, we’ll replace it with a message and background color.

🧠 2. Implement the TimelineProvider

The TimelineProvider tells WidgetKit what to display and when. It includes three main functions:

struct Provider: TimelineProvider {
   // 1️⃣ func placeholder(in context: Context) -> SimpleEntry { … }
   // 2️⃣ func getSnapshot(in context: Context, completion: @escaping (SimpleEntry) -> ()) { … }
   // 3️⃣ func getTimeline(in context: Context, completion: @escaping (Timeline<SimpleEntry>) -> ()) { … }
}

1️⃣ placeholder(in:)

Shows temporary content in the widget gallery.

func placeholder(in context: Context) -> SimpleEntry {
    SimpleEntry(date: Date(), emoji: "😀")
}

2️⃣ getSnapshot(in:)

Provides a static snapshot of data.

func getSnapshot(in context: Context, completion: @escaping (SimpleEntry) -> ()) {
    let entry = SimpleEntry(date: Date(), emoji: "😀")
    completion(entry)
}

3️⃣ getTimeline(in:)

Generates a list of timeline entries.

func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
    var entries: [SimpleEntry] = []

    let currentDate = Date()
    for hourOffset in 0 ..< 5 {
        let entryDate = Calendar.current.date(byAdding: .hour, value: hourOffset, to: currentDate)!
        let entry = SimpleEntry(date: entryDate, emoji: "😀")
        entries.append(entry)
    }

    let timeline = Timeline(entries: entries, policy: .atEnd)
    completion(timeline)
}

🖼️ 3. Create the Widget UI with SwiftUI

Use SwiftUI to define how your widget appears on the home screen.

struct AppWidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        VStack {
            Text("Time:")
            Text(entry.date, style: .time)
            Text("Emoji:")
            Text(entry.emoji)
        }
    }
}

🧱 4. Configure the Widget Structure

This section ties everything together and registers the widget with iOS.

struct AppWidget: Widget {
    let kind: String = "AppWidget"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            if #available(iOS 17.0, *) {
                AppWidgetEntryView(entry: entry)
                    .containerBackground(.fill.tertiary, for: .widget)
            } else {
                AppWidgetEntryView(entry: entry)
                    .padding()
                    .background()
            }
        }
        .configurationDisplayName("My Widget")
        .description("This is an example widget.")
    }
}

👀 5. Previewing Your Widget

SwiftUI’s new #Preview lets you simulate the widget in Xcode.

#Preview(as: .systemSmall) {
    AppWidget()
} timeline: {
    SimpleEntry(date: .now, emoji: "😀")
    SimpleEntry(date: .now, emoji: "🤩")
}

🎯 Make It Useful — Show Random Motivational Quotes

Let’s make this widget more inspiring.

Instead of an emoji, we’ll show motivational quotes every 10 minutes and change background colors.

🛠 Update SimpleEntry

struct SimpleEntry: TimelineEntry {
    let date: Date
    let message: String
    let color: Color
}

🧠 Update Provider

Add sample messages and colors:

let messages = [
    "Keep going 💪", "You're doing great!", "Just one more step 🚶",
    "Stay focused 🎯", "You’ve got this 🔥", "Make it count 💥",
    "Smile, breathe, move 🌿", "Every moment matters ⏳"
]

let backgroundColors: [Color] = [
    .blue, .green, .orange, .pink, .purple, .yellow, .teal, .mint
]

let defaultColor: Color = .gray
let defaultMessage = "Keep going 💪"

Update placeholder and getSnapshot:

func placeholder(in context: Context) -> SimpleEntry {
    SimpleEntry(date: Date(), message: defaultMessage, color: defaultColor)
}

func getSnapshot(in context: Context, completion: @escaping (SimpleEntry) -> ()) {
    let entry = SimpleEntry(date: Date(), message: defaultMessage, color: defaultColor)
    completion(entry)
}

Update getTimeline:

func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
    var entries: [SimpleEntry] = []
    let currentDate = Date()

    for minuteOffset in 0 ..< 6 {
        let entryDate = Calendar.current.date(byAdding: .minute, value: minuteOffset * 10, to: currentDate)!
        let message = messages.randomElement() ?? defaultMessage
        let backgroundColor = backgroundColors.randomElement() ?? defaultColor
        let entry = SimpleEntry(date: entryDate, message: message, color: backgroundColor)
        entries.append(entry)
    }

    let timeline = Timeline(entries: entries, policy: .atEnd)
    completion(timeline)
}

🎨 Redesign the Widget View

struct AppWidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        ZStack {
            VStack(spacing: 10) {
                Text(entry.message)
                    .font(.headline)
                    .multilineTextAlignment(.center)
                    .minimumScaleFactor(0.5)
                    .lineLimit(1)
                    .foregroundStyle(.primary)

                Text(entry.date, style: .time)
                    .font(.caption)
                    .foregroundStyle(.secondary)
            }
        }
    }
}

⚙️ Update Widget Config

struct AppWidget: Widget {
    let kind: String = "AppWidget"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            let backgroundColor = entry.color.opacity(0.25)

            if #available(iOS 17.0, *) {
                AppWidgetEntryView(entry: entry)
                    .containerBackground(backgroundColor, for: .widget)
            } else {
                AppWidgetEntryView(entry: entry)
                    .padding()
                    .background(backgroundColor)
            }
        }
        .configurationDisplayName("Motivational Widget")
        .description("This Widget Will Keep You Motivated")
    }
}

🧪 Preview It

#Preview("Small Widget", as: .systemSmall) {
    AppWidget()
} timeline: {
    SimpleEntry(date: .now, message: "Keep going 💪", color: .orange)
    SimpleEntry(date: .now, message: "Stay focused 🎯", color: .purple)
}

📱 Test on a Real Device

1. Run your main app target on a real device.

2. Long-press the Home Screen → Tap “+” → Search for your widget → Add.

3. Optionally tap and edit the widget for configuration.

Note: App Groups aren’t required if your widget shows static or internal data only.

✅ Final Notes

• Code is tested on Xcode 16.2 and iOS 18.2 (as of June 2025)

• Always check compatibility with newer Xcode versions

• If you run into issues, let us know via comments

DOWNLOAD SOURCE CODE FOR THIS TUTORIAL

The post Build Your First Widget in SwiftUI — A Guide with Source Code appeared first on AppMakers.Dev.

Step 1: Defining the Recipe Model

Setup a Recipe model that represents a dish with a name, cooking time, and ingredients.

import Foundation
import SwiftData

@Model
class Recipe {

    @Attribute(.unique) var id: UUID
    var name: String?
    var cookingTime: Int // in minutes
    var ingredients: [String]

    init(id: UUID = UUID(), name: String? = nil, cookingTime: Int, ingredients: [String]) {
        self.id = id
        self.name = name
        self.cookingTime = cookingTime
        self.ingredients = ingredients
    }
}

This model defines each recipe with a unique ID, name, cooking time, and a list of ingredients. With this setup, you can now store recipes in SwiftData and use them in your app.

Step 2: Creating Sample Data for Previews

Now, let’s generate sample data using ModelContainer. You’ve written a method to insert sample recipes into a ModelContainer for use in previews.

import Foundation
import SwiftData

let sampleRecipes = [
    Recipe(name: "Spaghetti Bolognese", cookingTime: 45, ingredients: ["Spaghetti", "Minced Beef", "Tomato Sauce"]),
    Recipe(name: "Grilled Cheese Sandwich", cookingTime: 10, ingredients: ["Bread", "Cheese", "Butter"]),
    Recipe(name: "Beef Wellington", cookingTime: 120, ingredients: ["Beef Tenderloin", "Puff Pastry", "Mushrooms", "Dijon Mustard"])
]

extension Recipe {
    @MainActor static func makeSampleRecipes(in container: ModelContainer) {
        
        let context = container.mainContext
        
        // Check if there are any existing recipes in the database
           let existingRecipesCount = (try? context.fetch(FetchDescriptor()))?.count ?? 0
           guard existingRecipesCount == 0 else {
               // If there are existing recipes, do not create new ones
               return
           }
           
           // Sample data to create
           let recipes = [
               Recipe(name: "Spaghetti Bolognese", cookingTime: 45, ingredients: ["Spaghetti", "Minced Beef", "Tomato Sauce"]),
               Recipe(name: "Grilled Cheese Sandwich", cookingTime: 10, ingredients: ["Bread", "Cheese", "Butter"]),
               Recipe(name: "Beef Wellington", cookingTime: 120, ingredients: ["Beef Tenderloin", "Puff Pastry", "Mushrooms", "Dijon Mustard"])
           ]
           
           // Insert the sample recipes into the context
           for recipe in recipes {
               context.insert(recipe)
           }
           
           // Save the context to persist the new data
           try? context.save()
        
    }
}

This method defines three recipes and inserts them into the ModelContainer. The @MainActor annotation ensures this method runs on the main thread, which is essential for interacting with SwiftData.

Step 3: Implementing the RecipeSampleData for Previews

The RecipeSampleData structure serves as a PreviewModifier to create in-memory sample data. This makes it easy to display recipes in SwiftUI previews.

import SwiftUI
import SwiftData

struct RecipeSampleData: PreviewModifier {
    static func makeSharedContext() throws -> ModelContainer {
        let config = ModelConfiguration(isStoredInMemoryOnly: true)
        let container = try ModelContainer(for: Recipe.self, configurations: config)
        Recipe.makeSampleRecipes(in: container) // Load sample recipes
        return container
    }
    
    func body(content: Content, context: ModelContainer) -> some View {
        content.modelContainer(context)
    }
}

extension PreviewTrait where T == Preview.ViewTraits {
    @MainActor static var sampleRecipeData: Self = .modifier(RecipeSampleData())
}

This modifier creates a ModelContainer configured for in-memory storage. The makeSampleRecipes method loads sample recipes into the container, and the modifier applies this data to any view using the .modelContainer() modifier.

Step 4: Creating Recipe Views with Sample Data

Now let’s integrate this sample data into a few SwiftUI views.

Recipe List View

The RecipeListView displays a list of recipes loaded from SwiftData. The @Query property wrapper retrieves the recipes, and the list is built dynamically.

import SwiftUI
import SwiftData

struct RecipeListView: View {
    @Query private var recipies: [Recipe]
    @Environment(\.modelContext) private var context
    
    var body: some View {
       
        List {
            ForEach(recipies) { recipe in
              
                VStack(alignment: .leading) {
                    Text(recipe.name ?? "")
                           .font(.headline)
                       Text("Cooking Time: \(recipe.cookingTime) mins")
                           .font(.subheadline)
                   }
            }
        } .task {
            
               Recipe.makeSampleRecipes(in: context.container)
        }
    }
}

#Preview(traits: .sampleRecipeData) {
    RecipeListView()
}

In this example, the @Query property wrapper retrieves all Recipe objects from the ModelContainer, which are then displayed in a List using SwiftUI. The preview uses .sampleRecipeData to load in-memory recipes for testing the UI.

Recipe Detail View

For more detailed recipe information, the RecipeDetailView displays the name, cooking time, and ingredients of a single recipe. This view doesn’t query for data but accepts a Recipe object as a parameter.

import SwiftUI
import SwiftData

struct RecipeDetailView: View {
    let recipe: Recipe

    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Text(recipe.name ?? "No Name")
                .font(.largeTitle)
            Text("Cooking Time: \(recipe.cookingTime) mins")
                .padding(.bottom)
            Text("Ingredients:")
            ForEach(recipe.ingredients, id: \.self) { ingredient in
                Text(ingredient)
            }
        }
        .padding()
    }
}

#Preview(traits: .sampleRecipeData) {
    @Previewable @Query var recipes: [Recipe]  // Query sample recipes
    RecipeDetailView(recipe: recipes.first!)
}

In this view, the recipe’s details are displayed, including the name, cooking time, and ingredients. The preview fetches the first recipe from the sample data.

Step 5

Now let’s connect our ListView with a DetailView using a NavigationLink inside a NavigationStack

import SwiftUI
import SwiftData

struct RecipeListView: View {
    @Query private var recipies: [Recipe]
    @Environment(\.modelContext) private var context
    
    var body: some View {
       
        NavigationStack {
            List {
                ForEach(recipies) { recipe in
                    NavigationLink(destination: RecipeDetailView(recipe: recipe)) {
                        
                        // Recipe Row
                        VStack(alignment: .leading) {
                            Text(recipe.name ?? "")
                                .font(.headline)
                            Text("Cooking Time: \(recipe.cookingTime) mins")
                                .font(.subheadline)
                        }
                    }
                }
            } .task {
                
                Recipe.makeSampleRecipes(in: context.container)
                
            }
        }
    }
}

#Preview(traits: .sampleRecipeData) {
    RecipeListView()
}

Key Differences Between Preview and @Previewable

1. Preview with Traits (.sampleRecipeData):
   • Best for views that query data using SwiftData.
   • Automatically loads sample data into the view’s query and binds it to the UI.
   • No need to manually pass data; the query handles it for you.
2. @Previewable:
   • Best for views that rely on models passed in as parameters (e.g., detail views).
   • Allows you to create sample data and pass it directly to the view.
   • You have full control over what specific data is provided for the preview.

Conclusion

By using SampleData and the @Previewable macro, you can easily preview recipe data within your SwiftUI views. Whether you’re working with data that relies on queries or views that require individual models, SwiftData provides an efficient way to prototype and test your app in Xcode.

The post Learn how to work with Xcode Previews in SwiftData App appeared first on AppMakers.Dev.

Step 1: Define the Entity

First, we need to define a Task entity that we will use to store our task data in SwiftData.

import Foundation
import SwiftData

@Model
class Task {
    @Attribute(.unique) var id: UUID
    var title: String?
    var isCompleted: Bool

    init(id: UUID = UUID(), title: String? = nil, isCompleted: Bool = false) {
        self.id = id
        self.title = title
        self.isCompleted = isCompleted
    }
}

In this code, we define the Task model with an id, title, and isCompleted property. The @Model attribute is used to make this class a SwiftData model.

Step 2: Create the Task List View

Next, we’ll create a SwiftUI view that displays a list of tasks, each with a toggle for marking them as completed or not.

import SwiftUI
import SwiftData

struct TaskListView: View {
    @Query(sort: \Task.title) private var tasks: [Task]
    @Environment(\.modelContext) private var context
    
    var body: some View {
        List {
            ForEach(tasks) { task in
                HStack {
                    Text(task.title ?? "")
                        .font(.title2)
                        .foregroundColor(task.isCompleted ? .green : .black)
                    
                    Spacer()
                    
                    Toggle("", isOn: Bindable(task).isCompleted)
                   
                }
            }
            .onDelete(perform: deleteTask)
        }
        .task {
            
            for task in sampleTasks {
                context.insert(task)
            }
            
        }
        .navigationTitle("Tasks")
    }
    
    private func updateTaskCompletion(_ task: Task, newValue: Bool) {
        task.isCompleted = newValue
        try? context.save()
    }
    
    private func deleteTask(at offsets: IndexSet) {
        for index in offsets {
            context.delete(tasks[index])
        }
        try? context.save()
    }
}

In this view, each task can be marked as completed by toggling a switch, and we handle saving this state with SwiftData.

Step 3: Preview with SwiftData Context

To make the preview functional, we need to set up a SwiftData context. We’ll use the PreviewModifier protocol to create a shared context that holds some sample data.

import Foundation
import SwiftUI
import SwiftData

let sampleTasks = [
    Task(title: "Buy Groceries"),
    Task(title: "Walk the Dog", isCompleted: true),
    Task(title: "Complete SwiftUI Project")
]

struct SampleTaskData: PreviewModifier {
    static func makeSharedContext() throws -> ModelContainer {
        let container = try ModelContainer(for: Task.self, configurations: ModelConfiguration(isStoredInMemoryOnly: true))

        for task in sampleTasks {
            container.mainContext.insert(task)
        }
        
        return container
    }

    func body(content: Content, context: ModelContainer) -> some View {
        content.modelContainer(context)
    }
}

extension PreviewTrait where T == Preview.ViewTraits {
    static var sampleTaskData: Self = .modifier(SampleTaskData())
}

In this example, the SampleTaskData struct conforms to PreviewModifier, providing a shared SwiftData context with in-memory tasks for the preview.

Step 4: Add a Preview #Preview(traits:

Now, let’s create a dynamic preview

#Preview(traits: .sampleTaskData) {
    TaskListView()
}

Step 5. Add @Previewable to Preview

Now, we’ll use the @Previewable attribute inside the #Preview macro to interact with the Task completion status dynamically.

#Preview("Dynamic Task Preview") {
    @Previewable @State var isTaskCompleted = false
    let sampleTask = Task(title: "Complete SwiftUI Project", isCompleted: isTaskCompleted)
    
    return HStack {
        Text(sampleTask.title ?? "")
            .font(.title2)
            .foregroundColor(sampleTask.isCompleted ? .green : .black)
        
        Spacer()
        
        Toggle("", isOn: $isTaskCompleted)
    }
}

In this preview:

• The @Previewable attribute tags the isTaskCompleted state variable.
• This allows you to toggle the state of isTaskCompleted directly in the Xcode preview and see real-time changes.
• The task’s completion status will update dynamically as you interact with the toggle in the preview.

This tutorial demonstrated how to display sample SwiftData in SwiftUI with PreviewModifier and @Previewable

The post How to display sample SwiftData in SwiftUI with PreviewModifier appeared first on AppMakers.Dev.

What is SwiftData?

SwiftData is a data management framework introduced by Apple, designed to integrate seamlessly with Swift and SwiftUI. It provides a simple yet powerful way to manage and persist data in iOS and macOS apps without needing extensive setup. By leveraging the @Model macro, developers can define Swift classes as persistent data models, allowing the framework to automatically handle database schemas, change tracking, and data synchronization. SwiftData also supports key features like iCloud syncing, in-memory storage for testing, and relationship management between models, making it an ideal tool for modern app development. Its deep integration with SwiftUI ensures that any changes to your data automatically trigger UI updates, simplifying the development process and enhancing the performance of data-driven apps.

Step 1: Setting Up Your SwiftData Model

First, let’s create a model representing something simple. In our case, we’ll model a Book. We’ll define properties such as the book’s title, author, and genre. You can add more attributes as needed.

1.1 Create the Model File

• Open Xcodea and. Create a new Swift file called Book.swift.
• Import SwiftData.
• Define your model class with the @Model macro. This macro ensures that your class is recognized by SwiftData for persistence.

import SwiftData

@Model
class Book {
    var title: String
    var author: String
    var genre: String?
    
    init(title: String, author: String, genre: String? = nil) {
        self.title = title
        self.author = author
        self.genre = genre
    }
}

Note: Optionals are important in SwiftData because non-optional properties must always have a value. If you’re planning future migrations, use optionals (?) for fields that could be nil.

Step 2: Setting Up the Main App and Model Container

Before we can persist and manipulate Book instances, we need to configure the model container in our main app file.

2.1 Set Up Model Container

1. In your main App file, import SwiftData.
2. Use the .modelContainer modifier to declare the models that should be persisted across app launches.

import SwiftUI
import SwiftData

@main
struct BookApp: App {
    var body: some Scene {
        WindowGroup {
            MainView().modelContainer(for: [Book.self])
        }
    }
}

This setup creates a default model container that stores data persistently. If you need to use a different storage method (e.g., in-memory), you can customize it, but for this example, we’ll stick with the default.

Step 3: Creating a View to Display and Modify Data

Now that we have our Book model and the model container set up, we can create a SwiftUI view to display and modify the data.

3.1 Fetching Data Using @Query

SwiftData simplifies fetching data with the @Query property wrapper, allowing us to query models and automatically update the UI when data changes.

import SwiftUI
import SwiftData

struct MainView: View {
    @Query(sort: \Book.title, order: .forward) private var books: [Book]
    @Environment(\.modelContext) private var context
    
    @State private var newBookTitle = ""
    @State private var newBookAuthor = ""
    @State private var newBookGenre = ""
    
    var body: some View {
        NavigationStack {
            VStack {
                // List of books
                List(books) { book in
                    HStack {
                        Text(book.title)
                        Spacer()
                        Text(book.author)
                    }
                }
                
                // Form to add a new book
                VStack {
                    TextField("Title", text: $newBookTitle)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .padding()
                    TextField("Author", text: $newBookAuthor)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .padding()
                    TextField("Genre", text: $newBookGenre)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .padding()
                    
                    Button("Add Book") {
                        addNewBook()
                    }
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(8)
                }
            }
            .navigationTitle("Books")
        }
    }
    
    // Function to add a new book
    private func addNewBook() {
        let newBook = Book(title: newBookTitle, author: newBookAuthor, genre: newBookGenre.isEmpty ? nil : newBookGenre)
        context.insert(newBook)
        
        do {
            try context.save()
        } catch {
            print("Failed to save book: \(error.localizedDescription)")
        }
        
        // Reset form fields
        newBookTitle = ""
        newBookAuthor = ""
        newBookGenre = ""
    }
}

Here’s what’s happening:

• Fetching Data: The @Query property fetches all Book instances, sorted by title.
• Environment Model Context: The @Environment(\.modelContext) provides access to the current model context for saving or deleting data.
• Adding a New Book: The addNewBook function inserts a new Book into the context and saves the changes.

Step 4: Previewing and Working with In-Memory Storage

For previews and testing, we can use an in-memory container. This prevents saving the data permanently and resets it between preview runs.

#Preview {
    MainView().modelContainer(for: [Book.self], inMemory: true)
}

Using in-memory storage is particularly useful when testing or running previews, as it ensures that each run starts with a clean state.

Step 5: Deleting a Book

You can enable deletion of items in the list by adding a swipe-to-delete action. Add this to the List view:

List {
    ForEach(books) { book in
        HStack {
            Text(book.title)
            Spacer()
            Text(book.author)
        }
    }
    .onDelete(perform: deleteBook)
}

Then, define the deleteBook function:

private func deleteBook(at offsets: IndexSet) {
    for index in offsets {
        context.delete(books[index])
    }
    
    do {
        try context.save()
    } catch {
        print("Failed to delete book: \(error.localizedDescription)")
    }
}

This function removes the selected Book from the context and saves the change.

Conclusion

In this article, we’ve covered how to:

• Set up a simple model with SwiftData.
• Create a model container to persist data.
• Fetch and display data using @Query.
• Add, delete, and persist data within a SwiftUI view.

SwiftData is powerful yet straightforward, making data management in SwiftUI apps easier and more efficient. You can further extend this example by adding relationships, more complex attributes, or custom storage configurations. Happy coding!

The post SwiftData Tutorial – How to Implement SwiftData in SwiftUI App appeared first on AppMakers.Dev.

Introduction to Semantic Colors

Semantic colors are predefined colors in SwiftUI that adapt to the app’s theme and accessibility settings. Some common semantic colors include accentColor, primary, and secondary.

Example: Using AccentColor

The accentColor is a broad theme color applied to views and controls. You can set it at the application level by specifying an accent color in your app’s asset catalog.

Setting AccentColor in Asset Catalog

1. Open your asset catalog (Assets.xcassets).
2. Create a new color set and name it AccentColor.
3. Choose your desired color.

Example: Using AccentColor in SwiftUI

import SwiftUI

@main
struct SemanticColorsApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .accentColor(.purple) // Set accent color for the entire app
        }
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Accent Color Example")
                .foregroundStyle(Color.accentColor)
                .padding()
                .background(Color.accentColor.opacity(0.2))
                .cornerRadius(10)
            
            Button(action: {
                print("Button tapped")
            }) {
                Text("Tap Me")
                    .padding()
                    .background(Color.accentColor)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
        .padding()
    }
}

In this example, we set the accent color of the entire app to purple using the accentColor modifier. The Text and Buttonviews use the accent color to create a consistent look.

Example: Using Primary and Secondary Colors

The primary and secondary colors are used for primary and secondary content, respectively. These colors adapt to the system’s color scheme and user settings.

Example: Using Primary and Secondary Colors in SwiftUI

import SwiftUI

struct PrimarySecondaryColorsView: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("Primary Color Example")
                .foregroundStyle(Color.primary)
                .padding()
                .background(Color.primary.opacity(0.2))
                .cornerRadius(10)

            Text("Secondary Color Example")
                .foregroundStyle(Color.secondary)
                .padding()
                .background(Color.secondary.opacity(0.2))
                .cornerRadius(10)

            Button(action: {
                print("Primary Button tapped")
            }) {
                Text("Primary Button")
                    .padding()
                    .background(Color.primary)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }

            Button(action: {
                print("Secondary Button tapped")
            }) {
                Text("Secondary Button")
                    .padding()
                    .background(Color.secondary)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
        .padding()
    }
}

In this example, we use Color.primary and Color.secondary to style text and buttons. These colors adapt to the system’s light and dark modes, providing a consistent and accessible user experience.

Example: Customizing System Colors

In addition to predefined semantic colors, you can customize colors in SwiftUI to create a unique look for your app. Custom colors can be defined in the asset catalog or directly in code.

Example: Using Custom Colors

import SwiftUI

struct CustomColorsView: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("Custom Color Example")
                .foregroundStyle(Color("CustomColor"))
                .padding()
                .background(Color("CustomColor").opacity(0.2))
                .cornerRadius(10)

            Button(action: {
                print("Custom Color Button tapped")
            }) {
                Text("Custom Color Button")
                    .padding()
                    .background(Color("CustomColor"))
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
        .padding()
    }
}

To use custom colors:

1. Open your asset catalog (Assets.xcassets).
2. Create a new color set and name it CustomColor.
3. Choose your desired color.

In this example, we define a custom color in the asset catalog and use it in the Text and Button views.

Conclusion

Using semantic colors in SwiftUI allows you to create visually consistent and accessible user interfaces. By leveraging accentColor, primary, secondary, and custom colors, you can ensure your app looks great across different themes and user settings.

The post Semantic Colors in SwiftUI: accentColor, primary, secondary, custom color appeared first on AppMakers.Dev.

Introduction to .focused

The .focused modifier binds the focus state of a view to a Boolean state value. When the bound value is true, the view receives focus; when false, it loses focus. This allows you to programmatically manage the focus state of your views.

Basic Example

Let’s start with a basic example where we manage the focus state of a TextField in a form, including a visual indicator for when the field is focused.

import SwiftUI

struct FocusedExampleView: View {
    @State private var username: String = ""
    @State private var password: String = ""
    @FocusState private var usernameFieldIsFocused: Bool
    @FocusState private var passwordFieldIsFocused: Bool
    @State private var showPasswordHint = false

    var body: some View {
        VStack(spacing: 20) {
            TextField("Username", text: $username)
                .focused($usernameFieldIsFocused)
                .padding()
                .background(usernameFieldIsFocused ? Color.yellow.opacity(0.3) : Color.clear)
                .cornerRadius(10)
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(usernameFieldIsFocused ? Color.blue : Color.gray, lineWidth: 2)
                )

            SecureField("Password", text: $password)
                .focused($passwordFieldIsFocused)
                .padding()
                .background(passwordFieldIsFocused ? Color.yellow.opacity(0.3) : Color.clear)
                .cornerRadius(10)
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(passwordFieldIsFocused ? Color.blue : Color.gray, lineWidth: 2)
                )

            if showPasswordHint {
                Text("Password must be at least 8 characters long.")
                    .foregroundColor(.red)
            }

            Button("Submit") {
                validateForm()
            }
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(10)
        }
        .padding()
    }

    private func validateForm() {
        if username.isEmpty {
            usernameFieldIsFocused = true
        } else if password.count < 8 {
            passwordFieldIsFocused = true
            showPasswordHint = true
        } else {
            showPasswordHint = false
            print("Form submitted")
        }
    }
}

Explanation

1. State Variables: We use @State variables to store the input values for the username and password fields, and to manage the visibility of the password hint.
2. FocusState: We use @FocusState property wrappers to track the focus state of the username and password fields.
3. TextField and SecureField: The TextField for the username and the SecureField for the password are each bound to their respective focus states using the .focused modifier.
4. Visual Indicators: We change the background color and border color of the fields to indicate when they are focused.
5. Form Validation: The validateForm function checks if the username is empty or if the password is less than 8 characters long. It sets the focus to the appropriate field and displays a hint if necessary.
6. Submit Button: The “Submit” button triggers the form validation logic.

Advanced Example: Managing Multiple Focused Fields

In a more complex form, you might need to manage multiple fields and their focus states. Let’s extend our example to include an email field and implement a more sophisticated focus management, with visual indicators for each field.

import SwiftUI

struct AdvancedFocusedExampleView: View {
    @State private var username: String = ""
    @State private var email: String = ""
    @State private var password: String = ""
    @FocusState private var usernameFieldIsFocused: Bool
    @FocusState private var emailFieldIsFocused: Bool
    @FocusState private var passwordFieldIsFocused: Bool
    @State private var showPasswordHint = false

    var body: some View {
        VStack(spacing: 20) {
            TextField("Username", text: $username)
                .focused($usernameFieldIsFocused)
                .padding()
                .background(usernameFieldIsFocused ? Color.yellow.opacity(0.3) : Color.clear)
                .cornerRadius(10)
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(usernameFieldIsFocused ? Color.blue : Color.gray, lineWidth: 2)
                )

            TextField("Email", text: $email)
                .focused($emailFieldIsFocused)
                .padding()
                .background(emailFieldIsFocused ? Color.yellow.opacity(0.3) : Color.clear)
                .cornerRadius(10)
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(emailFieldIsFocused ? Color.blue : Color.gray, lineWidth: 2)
                )
                .keyboardType(.emailAddress)
                .autocapitalization(.none)

            SecureField("Password", text: $password)
                .focused($passwordFieldIsFocused)
                .padding()
                .background(passwordFieldIsFocused ? Color.yellow.opacity(0.3) : Color.clear)
                .cornerRadius(10)
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(passwordFieldIsFocused ? Color.blue : Color.gray, lineWidth: 2)
                )

            if showPasswordHint {
                Text("Password must be at least 8 characters long.")
                    .foregroundColor(.red)
            }

            Button("Submit") {
                validateForm()
            }
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(10)
        }
        .padding()
    }

    private func validateForm() {
        if username.isEmpty {
            usernameFieldIsFocused = true
        } else if !isValidEmail(email) {
            emailFieldIsFocused = true
        } else if password.count < 8 {
            passwordFieldIsFocused = true
            showPasswordHint = true
        } else {
            showPasswordHint = false
            print("Form submitted")
        }
    }

    private func isValidEmail(_ email: String) -> Bool {
        // Simple email validation
        let emailRegEx = "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,64}"
        let emailPredicate = NSPredicate(format:"SELF MATCHES %@", emailRegEx)
        return emailPredicate.evaluate(with: email)
    }
}

Explanation

1. Multiple Fields: We apply the same visual indicator logic to the username, email, and password fields.
2. Form Validation: The validation logic ensures the correct field is focused based on the validation outcome.
3. Email Field: The email field has its own focus state and visual indicators.

By adding these visual cues, users can easily identify which field is currently active, enhancing the user experience.

Conclusion

Using the .focused modifier in SwiftUI allows you to control and observe the focus state of your views, enhancing the user experience by managing input fields efficiently. By following these examples, you can implement sophisticated focus management in your SwiftUI applications.

The post Mastering Focus in SwiftUI: Using .focused Modifier appeared first on AppMakers.Dev.

Introduction to Canvas

Canvas is a view in SwiftUI that provides a drawing area for creating custom graphics. It uses GraphicsContext to draw shapes, images, and text.

Example: Drawing with Canvas and GraphicsContext

import SwiftUI

struct CanvasDrawingView: View {
    var body: some View {
        Canvas { context, size in
            context.draw(Text("Hello, SwiftUI!"), at: CGPoint(x: size.width / 2, y: size.height / 2))
            
            let circle = Path(ellipseIn: CGRect(x: size.width / 4, y: size.height / 4, width: size.width / 2, height: size.height / 2))
            context.fill(circle, with: .color(.blue))
        }
        .frame(width: 300, height: 300)
        .border(Color.black, width: 2)
    }
}

In this example, we use Canvas to draw text and a blue circle. The GraphicsContext allows us to draw shapes and text at specific positions within the canvas.

Using Border

The border modifier adds a border around a view. You can customize the border’s color, width, and style.

Example: Applying a Border to a View

struct BorderedView: View {
    var body: some View {
        Text("Bordered Text")
            .padding()
            .border(Color.red, width: 4)
    }
}

In this example, we add a red border around a text view.

ForegroundStyle

ForegroundStyle allows you to set the style for the foreground content of a view, such as text or shapes.

Example: Using ForegroundStyle with Text

struct ForegroundStyledView: View {
    var body: some View {
        Text("Stylized Text")
            .font(.largeTitle)
            .foregroundStyle(
                LinearGradient(
                    gradient: Gradient(colors: [.red, .orange]),
                    startPoint: .leading,
                    endPoint: .trailing
                )
            )
            .padding()
    }
}

In this example, we use a linear gradient as the foreground style for the text, creating a smooth color transition.

BackgroundStyle

BackgroundStyle allows you to set the background style of a view.

struct BackgroundStyledView: View {
    var body: some View {
        Text("Stylized Background")
            .padding()
            .background(
                LinearGradient(
                    gradient: Gradient(colors: [.blue, .purple]),
                    startPoint: .top,
                    endPoint: .bottom
                )
            )
            .cornerRadius(10)
            .padding()
    }
}

In this example:

1. We apply a LinearGradient as the background to a Text view using the .background modifier.
2. The gradient transitions from blue at the top to purple at the bottom.
3. We add a corner radius to the text view to give it rounded corners.

Conclusion

SwiftUI’s Canvas, GraphicsContext, Border, ForegroundStyle, and BackgroundStyle provide powerful tools for creating custom graphics and styling views. By understanding and using these features, you can enhance the visual appeal and functionality of your SwiftUI applications.

The post Mastering Canvas, GraphicsContext, and Styles in SwiftUI appeared first on AppMakers.Dev.

Basic Usage: Copying Text to Clipboard

Let’s start with a basic example where we copy a text string to the clipboard when a button is pressed.

Example: Copying Text to Clipboard

import SwiftUI

struct CopyTextView: View {
    @State private var textToCopy = "Hello, SwiftUI!"
    @State private var message = "Tap the button to copy text"

    var body: some View {
        VStack(spacing: 20) {
            Text(message)
                .padding()

            Text(textToCopy)
                .padding()
                .background(Color.gray.opacity(0.2))
                .cornerRadius(10)

            Button(action: {
                UIPasteboard.general.string = textToCopy
                message = "Text copied to clipboard!"
            }) {
                Text("Copy Text")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
        .padding()
    }
}

In this example:

1. We define a @State variable textToCopy that holds the text we want to copy.
2. Another @State variable message is used to display the status message.
3. When the button is pressed, the text is copied to the clipboard using UIPasteboard.general.string.

Combining Copy and Paste Functionality

Let’s combine the copy and paste functionality into a single view.

Example: Copy and Paste Text

import SwiftUI

struct CopyPasteTextView: View {
    @State private var textToCopy = "Hello, SwiftUI!"
    @State private var pastedText = "Tap 'Paste' to see clipboard text"

    var body: some View {
        VStack(spacing: 20) {
            Text("Text to Copy:")
            Text(textToCopy)
                .padding()
                .background(Color.gray.opacity(0.2))
                .cornerRadius(10)

            Button(action: {
                UIPasteboard.general.string = textToCopy
            }) {
                Text("Copy Text")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }

            Divider()

            Text("Pasted Text:")
            Text(pastedText)
                .padding()
                .background(Color.gray.opacity(0.2))
                .cornerRadius(10)

            Button(action: {
                if let text = UIPasteboard.general.string {
                    pastedText = text
                } else {
                    pastedText = "No text found in clipboard"
                }
            }) {
                Text("Paste Text")
                    .padding()
                    .background(Color.green)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
        .padding()
    }
}

In this example:

1. We define two @State variables textToCopy and pastedText.
2. The “Copy Text” button copies textToCopy to the clipboard.
3. The “Paste Text” button retrieves and displays text from the clipboard in the pastedText variable.

Conclusion

Using the clipboard in SwiftUI is straightforward and enhances the interactivity of your app. By understanding how to copy and paste text, you can create more user-friendly interfaces.

The post Clipboard – Copy and Paste in SwiftUI appeared first on AppMakers.Dev.

Introduction to Gradients in SwiftUI

SwiftUI provides built-in support for creating gradients using the LinearGradient, RadialGradient, and AngularGradient views. These gradients can be used to fill shapes, backgrounds, and more.

Linear Gradient

A linear gradient creates a color transition along a straight line. You can define the start and end points, as well as the colors to transition between.

Example: Creating a Linear Gradient

import SwiftUI

struct LinearGradientView: View {
    var body: some View {
        Rectangle()
            .fill(
                LinearGradient(
                    gradient: Gradient(colors: [Color.red, Color.blue]),
                    startPoint: .topLeading,
                    endPoint: .bottomTrailing
                )
            )
            .frame(width: 200, height: 200)
    }
}

In this example, we create a Rectangle filled with a linear gradient that transitions from red to blue, starting from the top leading corner to the bottom trailing corner.

Radial Gradient

A radial gradient creates a color transition radiating outward from a center point.

Example: Creating a Radial Gradient

import SwiftUI

struct RadialGradientView: View {
    var body: some View {
        Circle()
            .fill(
                RadialGradient(
                    gradient: Gradient(colors: [Color.yellow, Color.orange]),
                    center: .center,
                    startRadius: 20,
                    endRadius: 100
                )
            )
            .frame(width: 200, height: 200)
    }
}

In this example, we create a Circle filled with a radial gradient that transitions from yellow at the center to orange at the edges.

Angular Gradient

An angular gradient creates a color transition around a circle, sweeping from one color to another.

Example: Creating an Angular Gradient

import SwiftUI

struct AngularGradientView: View {
    var body: some View {
        Circle()
            .fill(
                AngularGradient(
                    gradient: Gradient(colors: [Color.purple, Color.pink, Color.purple]),
                    center: .center
                )
            )
            .frame(width: 200, height: 200)
    }
}

In this example, we create a Circle filled with an angular gradient that transitions from purple to pink and back to purple around the center.

Using EllipticalGradient with Shapes

Elliptical gradients can be applied to various shapes, not just ellipses. You can use them with rectangles, circles, and custom shapes to create unique visual effects.

Example: Applying Elliptical Gradient to a Rectangle

import SwiftUI

struct EllipticalGradientRectangleView: View {
    var body: some View {
        Rectangle()
            .fill(
                EllipticalGradient(
                    gradient: Gradient(colors: [.green, .yellow]),
                    center: .center,
                    startRadiusFraction: 0.2,
                    endRadiusFraction: 0.8
                )
            )
            .frame(width: 300, height: 200)
    }
}

Combining Gradients

You can combine different gradients to create more complex and interesting effects.

Example: Combining Linear and Radial Gradients

struct CombinedGradientView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(
                    LinearGradient(
                        gradient: Gradient(colors: [Color.blue.opacity(0.5), Color.green.opacity(0.5)]),
                        startPoint: .top,
                        endPoint: .bottom
                    )
                )
                .frame(width: 300, height: 300)
            
            Circle()
                .fill(
                    RadialGradient(
                        gradient: Gradient(colors: [Color.white.opacity(0.5), Color.clear]),
                        center: .center,
                        startRadius: 50,
                        endRadius: 150
                    )
                )
                .frame(width: 300, height: 300)
        }
    }
}

In this example, we create a Rectangle with a linear gradient background and overlay a Circle with a radial gradient to create a more complex visual effect.

Conclusion

Gradients are a versatile tool in SwiftUI that can enhance the visual appeal of your app. By understanding how to use LinearGradient, RadialGradient, and AngularGradient, you can create stunning effects and backgrounds.

The post Gradients in SwiftUI – Linear, Radial, Angular appeared first on AppMakers.Dev.

Introduction to Gestures in SwiftUI

SwiftUI provides several built-in gestures such as tap, drag, long press, and rotation. You can attach these gestures to any view using the .gesture modifier. Let’s explore each of these gestures with practical examples.

Tap Gesture

The tap gesture is one of the simplest and most commonly used gestures. It detects a single or multiple taps on a view.

Example: Using Tap Gesture

import SwiftUI

struct TapGestureView: View {
    @State private var message = "Tap on the circle"

    var body: some View {
        VStack {
            Circle()
                .fill(Color.blue)
                .frame(width: 100, height: 100)
                .onTapGesture {
                    message = "Circle tapped!"
                }
            Text(message)
                .padding()
        }
    }
}

In this example, a Circle view changes the message displayed in the Text view when tapped.

Long Press Gesture

The long press gesture recognizes when a user presses and holds on a view for a specified duration.

Example: Using Long Press Gesture

import SwiftUI

struct LongPressGestureView: View {
    @State private var isPressed = false

    var body: some View {
        Circle()
            .fill(isPressed ? Color.red : Color.green)
            .frame(width: 100, height: 100)
            .onLongPressGesture {
                isPressed.toggle()
            }
    }
}

In this example, the color of the Circle view toggles between red and green when long pressed.

Drag Gesture

The drag gesture allows users to drag views across the screen.

Example: Using Drag Gesture

import SwiftUI

struct DragGestureView: View {
    @State private var offset = CGSize.zero
    @State private var startLocation = CGSize.zero

    var body: some View {
        Circle()
            .fill(Color.purple)
            .frame(width: 100, height: 100)
            .offset(x: offset.width + startLocation.width, y: offset.height + startLocation.height)
            .gesture(
                DragGesture()
                    .onChanged { gesture in
                        offset = CGSize(width: gesture.translation.width + startLocation.width,
                                        height: gesture.translation.height + startLocation.height)
                    }
                    .onEnded { gesture in
                        startLocation = CGSize(width: offset.width, height: offset.height)
                        offset = .zero
                    }
            )
    }
}

In this example, a Circle view can be dragged around the screen.

Explanation

1. State Variables: We use offset to track the current drag offset and startLocation to remember the view’s position after each drag.
2. onChanged: During the drag, we update offset by adding the current gesture translation to the start location.
3. onEnded: When the drag ends, we update startLocation to the new position and reset offset to zero for the next drag.

Rotation Gesture

The rotation gesture detects rotation interactions and can be used to rotate views.

Example: Using Rotation Gesture

import SwiftUI

struct RotationGestureView: View {
    @State private var rotation: Angle = .zero
    @State private var lastRotation: Angle = .zero

    var body: some View {
        Rectangle()
            .fill(Color.orange)
            .frame(width: 200, height: 200)
            .rotationEffect(rotation + lastRotation)
            .gesture(
                RotationGesture()
                    .onChanged { angle in
                        rotation = angle
                    }
                    .onEnded { angle in
                        lastRotation += rotation
                        rotation = .zero
                    }
            )
    }
}

Explanation

1. State Variables: We use rotation to track the current rotation during the gesture and lastRotation to remember the accumulated rotation after each gesture.
2. onChanged: During the rotation, we update rotation to the current gesture’s angle.
3. onEnded: When the rotation ends, we add the current rotation to lastRotation and reset rotation to zero for the next gesture.

Combining Gestures

SwiftUI allows you to combine multiple gestures on a single view using the .simultaneousGesture modifier.

Example: Combining Tap and Long Press Gestures

struct CombinedGestureView: View {
    @State private var message = "Tap or Long Press"

    var body: some View {
        VStack {
            Circle()
                .fill(Color.blue)
                .frame(width: 100, height: 100)
                .onTapGesture {
                    message = "Circle tapped!"
                }
                .simultaneousGesture(
                    LongPressGesture()
                        .onEnded { _ in
                            message = "Circle long pressed!"
                        }
                )
            Text(message)
                .padding()
        }
    }
}

Explanation

1. State Variable: We use a @State variable message to display the current gesture action.
2. Circle View: We create a Circle view with a blue fill, setting its frame to 100×100 points.
3. Tap Gesture: We use .onTapGesture to detect tap gestures on the Circle view. When the Circle is tapped, it updates the message to “Circle tapped!”.
4. Long Press Gesture: We use .simultaneousGesture to combine a LongPressGesture with the tap gesture. When the Circle is long-pressed, it updates the message to “Circle long pressed!”.
5. Text View: We display the message in a Text view below the Circle, which updates based on the detected gesture.

How It Works

• Tap Gesture: When you tap on the Circle, the onTapGesture modifier is triggered, updating the message to “Circle tapped!”.
• Long Press Gesture: When you long press on the Circle, the onEnded closure of the LongPressGesture is triggered, updating the message to “Circle long pressed!”.

In this example, the Circle view can detect both tap and long press gestures, updating the message accordingly.

Conclusion

SwiftUI gestures provide a powerful way to create interactive and responsive user interfaces. By understanding and using these gestures, you can enhance the user experience in your apps.

The post Gestures in SwiftUI: Tap, Long Tap, Drag, Rotation appeared first on AppMakers.Dev.