Learn SWIFTUI with Real Code Examples

import SwiftUI

struct ContentView: View {
    @State private var todos: [String] = []
    @State private var newTodo: String = ""

    var body: some View {
        NavigationView {
        VStack {
        HStack {
        TextField("New Todo", text: $newTodo)
        .textFieldStyle(RoundedBorderTextFieldStyle())
        Button("Add") {
        if !newTodo.isEmpty {
        todos.append(newTodo)
        newTodo = ""
        }
        }
        }.padding()
        List(todos, id: \ .self) { todo in
        Text(todo)
        }
        }
        .navigationTitle("Todo App")
        }
    }
}

@main
struct TodoApp: App {
    var body: some Scene {
        WindowGroup {
        ContentView()
        }
    }
}

Demonstrates a simple SwiftUI app with a Todo list, adding tasks, and displaying them using SwiftUI List and State management.

import SwiftUI

struct CounterView: View {
    @State private var count: Int = 0

    var body: some View {
        VStack(spacing: 20) {
        Text("Counter: \(count)")
        .font(.largeTitle)
        HStack {
        Button("+") { count += 1 }
        Button("-") { count -= 1 }
        Button("Reset") { count = 0 }
        }
        }.padding()
    }
}

@main
struct CounterApp: App {
    var body: some Scene {
        WindowGroup {
        CounterView()
        }
    }
}

A simple counter app with increment, decrement, and reset buttons.

import SwiftUI

struct StepCounterView: View {
    @State private var count: Int = 0
    @State private var step: String = "1"

    var body: some View {
        VStack(spacing: 20) {
        Text("Counter: \(count)")
        HStack {
        TextField("Step", text: $step)
        .keyboardType(.numberPad)
        .textFieldStyle(RoundedBorderTextFieldStyle())
        }
        HStack {
        Button("+") { count += Int(step) ?? 1 }
        Button("-") { count -= Int(step) ?? 1 }
        Button("Reset") { count = 0 }
        }
        }.padding()
    }
}

@main
struct StepCounterApp: App {
    var body: some Scene {
        WindowGroup {
        StepCounterView()
        }
    }
}

Counter app with customizable step increment.

import SwiftUI

struct DarkModeCounterView: View {
    @State private var count: Int = 0
    @Environment(\.colorScheme) var colorScheme
    @State private var isDark: Bool = false

    var body: some View {
        VStack(spacing: 20) {
        Text("Counter: \(count)")
        .font(.largeTitle)
        HStack {
        Button("+") { count += 1 }
        Button("-") { count -= 1 }
        Button("Reset") { count = 0 }
        }
        Button("Toggle Theme") { isDark.toggle() }
        }.padding()
        .preferredColorScheme(isDark ? .dark : .light)
    }
}

@main
struct DarkCounterApp: App {
    var body: some Scene {
        WindowGroup {
        DarkModeCounterView()
        }
    }
}

Counter app with light/dark theme toggle.

import SwiftUI

struct MultiCounterView: View {
    @State private var counters: [Int] = [0,0,0]

    var body: some View {
        VStack(spacing: 20) {
        ForEach(counters.indices, id: \.self) { i in
        VStack {
        Text("Counter \(i+1): \(counters[i])")
        HStack {
        Button("+") { counters[i] += 1 }
        Button("-") { counters[i] -= 1 }
        }
        }
        }
        }.padding()
    }
}

@main
struct MultiCounterApp: App {
    var body: some Scene {
        WindowGroup {
        MultiCounterView()
        }
    }
}

Multiple independent counters in a single view.

import SwiftUI

struct AutoCounterView: View {
    @State private var count: Int = 0
    @State private var isRunning: Bool = true

    var body: some View {
        VStack(spacing: 20) {
        Text("Counter: \(count)")
        .font(.largeTitle)
        HStack {
        Button(isRunning ? "Pause" : "Resume") { isRunning.toggle() }
        Button("Reset") { count = 0 }
        }
        }.padding()
        .onAppear {
        Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { _ in
        if isRunning { count += 1 }
        }
        }
    }
}

@main
struct AutoCounterApp: App {
    var body: some Scene {
        WindowGroup {
        AutoCounterView()
        }
    }
}

Counter that automatically increments every second.

import SwiftUI

struct PriorityTodoView: View {
    @State private var todos: [(task:String, priority:String)] = []
    @State private var newTask: String = ""
    @State private var priority: String = ""

    var body: some View {
        VStack(spacing: 20) {
        HStack {
        TextField("Task", text: $newTask)
        TextField("Priority", text: $priority)
        Button("Add") {
        if !newTask.isEmpty {
        todos.append((newTask, priority))
        newTask = ""; priority = ""
        }
        }
        }.padding()
        List(todos, id: \ .task) { todo in
        Text("\(todo.task) (Priority: \(todo.priority))")
        }
        }
    }
}

@main
struct PriorityTodoApp: App {
    var body: some Scene {
        WindowGroup {
        PriorityTodoView()
        }
    }
}

Todo app where each task has a priority and displays it.

import SwiftUI

struct CountdownView: View {
    @State private var count: Int = 10

    var body: some View {
        VStack(spacing: 20) {
        Text("Time: \(count)")
        .font(.largeTitle)
        HStack {
        Button("Start") {
        Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { timer in
        if count > 0 { count -= 1 } else { timer.invalidate() }
        }
        }
        Button("Reset") { count = 10 }
        }
        }.padding()
    }
}

@main
struct CountdownApp: App {
    var body: some Scene {
        WindowGroup {
        CountdownView()
        }
    }
}

Countdown timer starting from 10 seconds.

import SwiftUI

struct AlertCounterView: View {
    @State private var count: Int = 0
    @State private var showAlert: Bool = false

    var body: some View {
        VStack(spacing: 20) {
        Text("Counter: \(count)")
        .font(.largeTitle)
        HStack {
        Button("+") {
        count += 1
        if count == 10 { showAlert = true }
        }
        Button("Reset") { count = 0 }
        }
        }.alert(isPresented: $showAlert) {
        Alert(title: Text("Alert"), message: Text("Count reached 10!"), dismissButton: .default(Text("OK")))
        }.padding()
    }
}

@main
struct AlertCounterApp: App {
    var body: some Scene {
        WindowGroup {
        AlertCounterView()
        }
    }
}

Counter shows an alert when it reaches 10.