Model
final class Motivation: Identifiable {
    
    var id: UUID?
    var message: String?
    var timestamp: Date?

    init(message: String?, timestamp: Date = .now) {
        self.id = UUID()
        self.message = message
        self.timestamp = timestamp
    }
}

import SwiftData

@main
struct ConfigurableWidgetsApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .modelContainer(for: [Motivation.self])
    }
}

import SwiftUI
import SwiftData

struct ContentView: View {
    
    @Environment(\.modelContext) private var modelContext
    @Query(sort: \Motivation.timestamp, order: .reverse) private var motivations: [Motivation]
    
    @State private var showAllUsedAlert = false
    
    let motivationSamples = [
        "Keep going!",
        "You got this!",
        "Make it happen!",
        "Dream big, act bigger.",
        "Stay hungry, stay foolish.",
        "Progress, not perfection.",
        "Push beyond limits.",
        "Your only limit is you.",
        "Success is a habit.",
        "Discipline > Motivation.",
        "Every step counts.",
        "Don’t stop now.",
        "You were made for more.",
        "Do it scared.",
        "Tiny wins every day.",
        "No zero days.",
        "Trust the process.",
        "The future is yours to shape.",
        "Create your own momentum.",
        "Consistency is your superpower."
    ]

    var body: some View {
            NavigationStack {
                List {
                    ForEach(motivations) { motivation in
                        VStack(alignment: .leading) {
                            Text(motivation.message ?? "No message")
                                .font(.headline)
                            if let timestamp = motivation.timestamp {
                                Text(timestamp.formatted(date: .abbreviated, time: .shortened))
                                    .font(.caption)
                                    .foregroundStyle(.gray)
                            }
                        }
                        .padding(.vertical, 4)
                    }
                    .onDelete(perform: deleteItems)
                }
                .navigationTitle("Your Motivations")
                .toolbar {
                    ToolbarItem(placement: .bottomBar) {
                        Button(action: addItem) {
                            Label("Add Motivation", systemImage: "plus.circle.fill")
                                .font(.headline)
                        }
                    }
                }
                .alert("All Motivations Added", isPresented: $showAllUsedAlert) {
                    Button("OK", role: .cancel) {}
                } message: {
                    Text("You've already added all available motivation samples.")
                }
            }
        }

    private func addItem() {
        
        // Check which messages are not yet in the list
        let existingMessages = Set(motivations.compactMap { $0.message })
        let availableMessages = motivationSamples.filter { !existingMessages.contains($0) }

        // If no new messages left, show alert
        guard let newMessage = availableMessages.randomElement() else {
            showAllUsedAlert = true
            return
        }

        let newMotivation = Motivation(message: newMessage)
        modelContext.insert(newMotivation)
        try? modelContext.save()
        
    }

    private func deleteItems(at offsets: IndexSet) {
        
        for index in offsets {
            let item = motivations[index]
            modelContext.delete(item)
            try? modelContext.save()
        }
        
    }
    
}

struct MotivationEntity: AppEntity {
    var id: String
    var message: String

    static var typeDisplayRepresentation: TypeDisplayRepresentation = "Motivation"
    static var defaultQuery = MotivationQuery()

    var displayRepresentation: DisplayRepresentation {
        DisplayRepresentation(
            title: LocalizedStringResource("\(message)"),
            subtitle: LocalizedStringResource("\(id)")
        )
    }
}

struct MotivationQuery: EntityQuery {
    
    func suggestedEntities() async throws -> [MotivationEntity] {
        return try await fetchMotivations()
    }

    func defaultResult() async -> MotivationEntity? {
        return try? await fetchMotivations().first
    }

    func entities(for identifiers: [String]) async throws -> [MotivationEntity] {
        let motivations = try await fetchMotivations()
        return motivations.filter { identifiers.contains($0.id) }
    }

    private func fetchMotivations() async throws -> [MotivationEntity] {
        let container = try ModelContainer(for: Motivation.self)
        let context = ModelContext(container)
        let results = try context.fetch(FetchDescriptor<Motivation>())

        return results.compactMap {
            guard let id = $0.id?.uuidString, let message = $0.message else { return nil }
            return MotivationEntity(id: id, message: message)
        }
    }
}

struct ConfigurationAppIntent: WidgetConfigurationIntent {
    
    static var title: LocalizedStringResource = "Choose Motivation"
    static var description = IntentDescription("Pick a motivation message to show in your widget.")

    @Parameter(title: "Motivation")
    var motivation: MotivationEntity?
    
}

struct SimpleEntry: TimelineEntry {
    let date: Date
    let configuration: ConfigurationAppIntent
}

struct Provider: AppIntentTimelineProvider {

... }

func placeholder(in context: Context) -> SimpleEntry {
    SimpleEntry(date: .now, configuration: ConfigurationAppIntent())
}

func snapshot(for configuration: ConfigurationAppIntent, in context: Context) async -> SimpleEntry {
    SimpleEntry(date: .now, configuration: configuration)
}

func timeline(for configuration: ConfigurationAppIntent, in context: Context) async -> Timeline<SimpleEntry> {
    let entry = SimpleEntry(date: .now, configuration: configuration)
    return Timeline(entries: [entry], policy: .never)
}

/// The actual content shown in the widget on the Home Screen
struct ConfigurableWidgetEntryView: View {
   
    var entry: Provider.Entry

    var body: some View {
        ZStack {

            VStack(alignment: .leading, spacing: 8) {
                // Main motivation text
                Text(entry.configuration.motivation?.message ?? "Test")
                    .font(.headline)
                    .lineLimit(3)
                    .minimumScaleFactor(0.5)
                    .bold()
                    .multilineTextAlignment(.leading)

                Spacer()

                // Optional timestamp (can remove in production)
                Text(entry.date, style: .time)
                    .font(.caption2)
                    .foregroundStyle(.gray)
            }
            .padding()
        }
    }
    
}

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

    var body: some WidgetConfiguration {
        AppIntentConfiguration(
            kind: kind,
            intent: ConfigurationAppIntent.self,
            provider: Provider()
        ) { entry in
            ConfigurableWidgetEntryView(entry: entry)
                .containerBackground(Color(.systemBackground), for: .widget)
        }
    }
    
}

#Preview(as: .systemSmall) {
    ConfigurableWidget()
} timeline: {
    SimpleEntry(date: .now, configuration: .sampleMotivation1)
    SimpleEntry(date: .now, configuration: .sampleMotivation2)
}

extension ConfigurationAppIntent {
    
    /// Sample configuration using a fake MotivationEntity
    fileprivate static var sampleMotivation1: ConfigurationAppIntent {
        let intent = ConfigurationAppIntent()
        intent.motivation = MotivationEntity(
            id: UUID().uuidString,
            message: "Push beyond limits."
        )
        return intent
    }

    fileprivate static var sampleMotivation2: ConfigurationAppIntent {
        let intent = ConfigurationAppIntent()
        intent.motivation = MotivationEntity(
            id: UUID().uuidString,
            message: "The future is yours to shape."
        )
        return intent
    }
}

struct MotivationQuery: EntityStringQuery {

    func entities(matching string: String) async throws -> [MotivationEntity] {
          let motivations = try await fetchMotivations()
          return motivations.filter {
              $0.message.localizedCaseInsensitiveContains(string)
          }
      }

@Model
final class Motivation: Identifiable {
    
    var id: String?
    var message: String?
    var timestamp: Date?
    
    var isFavorite: Bool?
    var backgroundColorHex: String?

    init(message: String?, timestamp: Date = .now, isFavorite: Bool = false, backgroundColorHex: String? = nil) {
        
        self.id = UUID().uuidString
        self.message = message
        self.timestamp = timestamp
        self.isFavorite = isFavorite
        self.backgroundColorHex = backgroundColorHex
        
    }
    
}

struct MotivationEntity: AppEntity {
    
    var id: String
    var message: String
    var isFavorite: Bool
    var backgroundColorHex: String?
    
    static var typeDisplayRepresentation: TypeDisplayRepresentation = "Motivation"
   
    static var defaultQuery = MotivationQuery()
    
    var displayRepresentation: DisplayRepresentation {
        DisplayRepresentation(
            title: LocalizedStringResource("\(message)"),  
            subtitle: LocalizedStringResource(isFavorite ? "⭐️ \(id)" : "\(id)")   
        )
    }
}

        return results.compactMap {
               guard let id = $0.id, let message = $0.message else { return nil }
               return MotivationEntity(
                   id: id,
                   message: message,
                   isFavorite: $0.isFavorite ?? false,
                   backgroundColorHex: $0.backgroundColorHex
               )
           }

extension ConfigurationAppIntent {
    
    /// Preview: Configuration with sample motivation 1
    fileprivate static var sampleMotivation1: ConfigurationAppIntent {
        let intent = ConfigurationAppIntent()
        intent.motivation = MotivationEntity(
            id: UUID().uuidString,
            message: "Push beyond limits.", isFavorite: true, backgroundColorHex: "#D3D3D3"
        )
        return intent
    }

    /// Preview: Configuration with sample motivation 2
    fileprivate static var sampleMotivation2: ConfigurationAppIntent {
        let intent = ConfigurationAppIntent()
        intent.motivation = MotivationEntity(
            id: UUID().uuidString,
            message: "The future is yours to shape.", isFavorite: false, backgroundColorHex: "#FFFFFF"
        )
        return intent
    }
}

struct ConfigurableWidgetEntryView: View {
   
    var entry: Provider.Entry

    var body: some View {
        ZStack {
            VStack(alignment: .leading, spacing: 8) {

                // Motivation message text (user-selected)
                Text(entry.configuration.motivation?.message ?? "Stay motivated!")
                    .font(.headline)
                    .lineLimit(3)
                    .minimumScaleFactor(0.5)
                    .bold()
                    .multilineTextAlignment(.leading)

                Spacer()
                
                HStack {
                    
                    // Timestamp (optional: shows when widget was last updated)
                    Text(entry.date, style: .time)
                        .font(.caption2)
                        .foregroundStyle(.gray)
                    
                    Spacer()
                    
                    if entry.configuration.motivation?.isFavorite == true {
                                     Text("⭐️")
                                         .font(.caption)
                                         .foregroundStyle(.yellow)
                                 }
                    
                }
            }
            .padding()
        }
    }
}

extension Color {
    init(hex: String) {
        let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
        var int = UInt64()
        Scanner(string: hex).scanHexInt64(&int)
        
        let r, g, b: UInt64
        switch hex.count {
        case 6: // RGB (24-bit)
            (r, g, b) = ((int >> 16) & 0xFF, (int >> 8) & 0xFF, int & 0xFF)
        default:
            (r, g, b) = (255, 255, 255)
        }

        self.init(.sRGB, red: Double(r) / 255, green: Double(g) / 255, blue: Double(b) / 255)
    }
}

struct ConfigurableWidget: Widget {
    
    // Unique identifier for this widget
    let kind: String = "ConfigurableWidget"

    var body: some WidgetConfiguration {
        AppIntentConfiguration(
            kind: kind,
            intent: ConfigurationAppIntent.self,  // Our custom intent with motivation
            provider: Provider()                  // The logic that supplies timeline entries
        ) { entry in
            ConfigurableWidgetEntryView(entry: entry)
                .containerBackground(Color(hex: entry.configuration.motivation?.backgroundColorHex ?? "#D3D3D3"), for: .widget) 
        }
    }
}

 ZStack {
                            if let hex = motivation.backgroundColorHex {
                                Color(hex: hex)                                    .cornerRadius(8)
                            }

                                HStack {
                                    
                                    VStack(alignment: .leading, spacing: 8) {
                                        
                                        Text(motivation.message ?? "No message")
                                            .font(.headline)
                                            .foregroundStyle(.primary)
                                        
                                        if let timestamp = motivation.timestamp {
                                            Text(timestamp.formatted(date: .abbreviated, time: .shortened))
                                                .font(.caption)
                                                .foregroundStyle(.gray)
                                        }
                                        
                                    }
                                 
                                    Spacer()
                                    
                                    if motivation.isFavorite == true {
                                        Spacer()
                                        Text("⭐️")
                                            .foregroundStyle(.yellow)
                                            .font(.headline)
                                    }
                                }
                                .background(Color(hex: motivation.backgroundColorHex ?? "F1F1F1"))

                               
                            .padding(20)
                        }
                        .listRowInsets(EdgeInsets())
                        .listRowBackground(Color.clear)

struct MotivationRowView: View {
    @Bindable var motivation: Motivation
    @Environment(\.modelContext) private var modelContext

    var body: some View {
        VStack(alignment: .leading, spacing: 6) {
            HStack {
                Text(motivation.message ?? "No message")
                    .font(.headline)
                    .foregroundStyle(.primary)
                    .lineLimit(2)

                if motivation.isFavorite == true {
                    Spacer()
                    Text("⭐️")
                        .foregroundStyle(.yellow)
                }
            }

            if let timestamp = motivation.timestamp {
                Text(timestamp.formatted(date: .abbreviated, time: .shortened))
                    .font(.caption)
                    .foregroundStyle(.gray)
            }

            // Inline Color Picker
            ColorPicker(motivation.backgroundColorHex ?? "#FFFFFF", selection: Binding(
                get: {
                    Color(hex: motivation.backgroundColorHex ?? "#FFFFFF")
                },
                set: { newColor in
                    motivation.backgroundColorHex = newColor.toHex()
                    try? modelContext.save()
                }
            ))
            .font(.caption)
        }
        .padding()
        .background(
            Color(hex: motivation.backgroundColorHex ?? "#F2F2F7")
                .cornerRadius(10)
        )
    }
}

ForEach($motivations) { $motivation in
     MotivationRowView(motivation: motivation)
                        .listRowBackground(Color.clear)
}
.onDelete(perform: deleteItems)

   func toHex() -> String {
        let uiColor = UIColor(self)
        var r: CGFloat = 0, g: CGFloat = 0, b: CGFloat = 0, a: CGFloat = 0
        uiColor.getRed(&r, green: &g, blue: &b, alpha: &a)
        return String(format: "#%02X%02X%02X", Int(r * 255), Int(g * 255), Int(b * 255))
    }

ColorPicker("Background Color", selection: Binding(
    get: {
        Color(hex: motivation.backgroundColorHex ?? "#FFFFFF")
    },
    set: { newColor in
        motivation.backgroundColorHex = newColor.toHex()
        try? modelContext.save()

        // Reload widget
        WidgetCenter.shared.reloadAllTimelines()
    }
))
.font(.caption)

.onChange(of: scenePhase) { oldPhase, newPhase in
            
            if newPhase == .background { 
                
                // Optional
                WidgetCenter.shared.reloadAllTimelines()
            }
            
        }

// MARK: - Shared Model Container
/// Singleton container for shared access across app and widget
class SharedModelContainer {
    
   static let shared = SharedModelContainer()
   
   let container: ModelContainer
   
   private init() {
       // Configure the container for shared access via App Group
       let schema = Schema([Motivation.self])
       let modelConfiguration = ModelConfiguration(schema: schema, groupContainer: .identifier("group.com.adelmaer.ConfigurableWidgetsApp"))
       
       do {
           container = try ModelContainer(for: schema, configurations: modelConfiguration)
       } catch {
           fatalError("Could not create ModelContainer: \(error)")
       }
   }
}

import SwiftUI
import SwiftData
import WidgetKit

@main
struct ConfigurableWidgetsAppApp: App {
    
    @Environment(\.scenePhase) private var scenePhase

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .modelContainer(SharedModelContainer.shared.container)
        .onChange(of: scenePhase) { _, newPhase in
            if newPhase == .background {
                WidgetCenter.shared.reloadAllTimelines()
            }
        }
    }
}

struct ToggleMotivationIsFavoriteIntent: AppIntent {
    
    static var title: LocalizedStringResource = "Toggle Favorite Status"
    static var description = IntentDescription("Toggle favorite status for a motivation message")
    
    @Parameter(title: "Motivation")
    var motivation: MotivationEntity
    
    init(motivation: MotivationEntity) {
          self.motivation = motivation
      }

    init() {}

    func perform() async throws -> some IntentResult {
       
        let modelContext = ModelContext(SharedModelContainer.shared.container)
        let id = motivation.id
        
        // Find and update the motivation
        guard let motivation = try! modelContext.fetch(
            FetchDescriptor<Motivation>(
                predicate: #Predicate { $0.id == id }
            )).first else {
            return .result()
        }
        
        // Toggle favorite status
        motivation.isFavorite = !(motivation.isFavorite ?? false)
        
        // Save changes
        try? modelContext.save()
        
        // Refresh widget
        WidgetCenter.shared.reloadAllTimelines()
        
        return .result()
  
    }

}

struct ToggleFavoriteButton: View {
    let motivation: MotivationEntity
    
    var body: some View {
        Button(
            intent: ToggleMotivationIsFavoriteIntent(motivation: motivation)
        ) {
            Image(systemName: motivation.isFavorite ? "star.fill" : "star")
                .foregroundStyle(motivation.isFavorite ? .yellow : .gray)
                .contentTransition(.symbolEffect(.replace))
        }
        .buttonStyle(.plain)
    }
    
}

if let motivation = entry.configuration.motivation {
    ToggleFavoriteButton(motivation: motivation)
}

struct ConfigurationAppIntent: WidgetConfigurationIntent {
    static var title: LocalizedStringResource = "Choose Motivation"
    static var description = IntentDescription("Pick a motivation message to show in your widget.")

    @Parameter(title: "Motivation")
    var motivation: MotivationEntity?

    @Parameter(title: "Show Timestamp")
    var showTimestamp: Bool?
}

if entry.configuration.showTimestamp ?? false {
    Text(entry.date, style: .time)
        .font(.caption2)
        .foregroundStyle(.gray)
}

    /// Preview: Configuration with sample motivation 1
    fileprivate static var sampleMotivation1: ConfigurationAppIntent {
        let intent = ConfigurationAppIntent()
        intent.motivation = MotivationEntity(
            id: UUID().uuidString,
            message: "Push beyond limits.",
            isFavorite: true,
            backgroundColorHex: "#D3D3D3"
        )
        intent.showTimestamp = true
        return intent
    }

The post How to Build a SwiftUI Widget with App Intents and SwiftData ( Configurable Widget ) appeared first on AppMakers.Dev.

🔗 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.

This article will break down the key differences between structs and classes in modern SwiftUI development and how SwiftData influences these choices.

The Basics: Structs vs. Classes

Structs

• Value types: Structs are copied when passed or assigned to new variables.
• Immutable by default: Changes to a struct instance do not affect other copies.
• No ARC (Automatic Reference Counting): Structs are more lightweight, and Swift can optimize them for better performance.
• Better for simple data: Ideal for models that represent small, self-contained pieces of data.

Classes

• Reference types: Classes are passed by reference, meaning changes made to one instance affect all references to it.
• Mutable by nature: Changes can propagate across references, which is useful when you need shared state.
• Managed by ARC: Classes come with ARC, which tracks and manages the lifecycle of objects.
• Better for shared or complex data: Ideal for cases where objects need to be shared across different parts of your app or involve relationships.

SwiftUI: Using Structs for Models

In most SwiftUI applications, structs are the default choice for models. Since SwiftUI is designed around declarative programming principles, structs’ value semantics align perfectly with SwiftUI’s philosophy.

Here’s an example of using a struct for a simple Person model:

struct Person {
    var name: String
    var age: Int
}

Why Use Structs in SwiftUI?

1. Performance: Structs are faster and more efficient due to their value semantics.
2. Predictability: Since structs are copied when passed, each instance is independent, which makes it easier to reason about your code.
3. Concurrency Safety: Structs’ immutability (unless explicitly mutable) helps avoid issues when working with concurrency.

In simple terms, structs are great for SwiftUI models when you:

• Don’t need shared state between views or components.
• Are modeling simple data that doesn’t rely on persistence frameworks like SwiftData.

SwiftData and the Case for Classes

While structs are great for lightweight models, the need for classes becomes apparent when working with SwiftData (or other persistence frameworks, like Core Data). SwiftData requires reference semantics, making classes necessary for models to ensure data consistency and lifecycle management.

Here’s an example of a Person model in SwiftData:

import SwiftData

@Model
class Person {
    var name: String
    var age: Int
    
    init(name: String, age: Int) {
        self.name = name
        self.age = age
    }
}

Why Use Classes with SwiftData?

1. Reference Semantics: SwiftData needs objects to be shared across multiple components. If you update the Person class in one part of the app, the changes will automatically reflect everywhere it is referenced.
2. Persistence: SwiftData (and Core Data) manages object graphs, relationships, and persistence through reference types.
3. Complex Relationships: If your model has relationships (e.g., a Person having a list of friends), classes are better suited to managing these references without duplicating data.

Thus, classes are essential when:

• You’re using SwiftData or other persistence frameworks that need managed object contexts.
• Your data is shared across multiple parts of the app, and you want to observe and react to changes.
• You’re modeling complex relationships between objects.

When to Use Structs vs. Classes: A Recap

Final Thoughts

In modern SwiftUI development (2024 and beyond), structs are the default choice for most models due to their performance and value semantics. However, when working with frameworks like SwiftData—where persistence, shared state, and reference management are essential—classes become a necessity.

To summarize:

• Use structs for lightweight, simple, and self-contained models that don’t require shared state.
• Use classes when working with SwiftData or any scenario where reference semantics and persistence are required.

For more about Classes and Structs read this Article

Understanding when to use structs vs. classes will help you design more efficient and scalable SwiftUI applications. Happy coding!

The post Structs vs. Classes in SwiftUI: When to Use Each and why we use Classes in SwiftData appeared first on AppMakers.Dev.

1. What is Declarative Programming (SwiftUI)?

SwiftUI is Apple’s framework introduced in 2019 for developing user interfaces in a declarative way. In declarative UI, you describe what the UI should look like, not how to create it. You declare your user interface and its behavior in a way that is much closer to natural language, using SwiftUI’s body property.

Key Characteristics of SwiftUI:

• Less Code: SwiftUI requires fewer lines of code to achieve the same result as UIKit.
• Data-driven: The UI components are a function of the state. When the state changes, the UI updates automatically.
• Consistency Across Platforms: SwiftUI works across all Apple platforms, providing a unified development experience.
• Live Preview: With SwiftUI, you can see live previews of your UI as you code.

import SwiftUI

struct ContentView: View {
    @State private var isButtonPressed = false

    var body: some View {
        Button(action: {
            self.isButtonPressed.toggle()
        }) {
            Text(isButtonPressed ? "Pressed!" : "Press Me")
        }
    }
}

In this SwiftUI code, we describe a Button and its behavior. The UI automatically updates when isButtonPressed changes, without any need for explicit UI manipulation code.

2. What is Imperative Programming (UIKit)?

UIKit, the traditional framework used in iOS development, is imperative. This means you instruct the program how to perform operations to achieve the desired UI. You manually update the UI based on the state of the application, often leading to more boilerplate code.

Key Characteristics of UIKit:

• Detailed Control: UIKit gives you granular control over UI elements and their behaviors.
• Familiarity and Maturity: Being older, UIKit has a vast community, resources, and a proven track record.
• Manual Updates: Changes in the UI need to be manually handled, requiring more lines of code and effort.

import UIKit

class ViewController: UIViewController {
    private var isButtonPressed = false
    private let button = UIButton()

    override func viewDidLoad() {
        super.viewDidLoad()
        setupButton()
    }

    private func setupButton() {
        button.setTitle("Press Me", for: .normal)
        button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
        // additional code to layout the button
    }

    @objc private func buttonTapped() {
        isButtonPressed.toggle()
        updateButtonTitle()
    }

    private func updateButtonTitle() {
        button.setTitle(isButtonPressed ? "Pressed!" : "Press Me", for: .normal)
    }
}

In the UIKit example, we manually manage the state and update the UI (button title) based on the user interaction.

3. SwiftUI vs UIKit – Main Differences

Declarative vs. Imperative:

• SwiftUI: You declare the UI elements and their dependencies on data (datasource). The framework takes care of the rest.
• UIKit: You explicitly create and manage UI elements and their lifecycle.

State Management and UI Updates:

• SwiftUI: The view is a function of the state. Any changes in the state lead to a re-render of the UI.
• UIKit: You have to manually listen to changes and update the UI accordingly.

Code Conciseness and Readability:

• SwiftUI: Less and more readable code. Easier for beginners and reduces the chance of bugs.
• UIKit: More verbose, offering finer control but at the cost of more code.

4. How Views Update in SwiftUI and UIKit

SwiftUI:

In SwiftUI, the view automatically updates when the state changes. SwiftUI’s view is a struct, which is a value type, ensuring a single source of truth. When the underlying data changes, SwiftUI intelligently re-renders the view to reflect those changes, making the data flow seamless and straightforward.

UIKit:

In UIKit, updating the view is a manual process. When the data changes, you need to write additional code to update the UI elements. This approach gives you more control but requires a deeper understanding of the view lifecycle and state management.

Conclusion

In summary, SwiftUI’s declarative nature offers a modern, efficient, and streamlined approach to UI development in iOS, ideal for rapid development and reducing boilerplate code. UIKit, with its imperative approach, provides detailed control and is backed by years of community support and resources. Both have their place in iOS development, and the choice largely depends on the project requirements and developer preference.

The post SwiftUI vs UIKit – Declarative vs. Imperative Programming 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.