swiftui-development

What this skill does

# SwiftUI Development Skill

> Build modern, declarative iOS interfaces with SwiftUI

## Learning Objectives

By completing this skill, you will:
- Create declarative UIs with SwiftUI views
- Master state management (@State, @Binding, @Observable)
- Implement complex navigation with NavigationStack
- Create fluid animations and transitions
- Build production-ready SwiftUI applications

## Prerequisites

| Requirement | Level |
|-------------|-------|
| iOS Fundamentals | Completed |
| Swift | Intermediate |
| Functional programming concepts | Basic |

## Curriculum

### Module 1: SwiftUI Fundamentals (4 hours)

**Topics:**
- View protocol and body
- ViewBuilder and composition
- Modifiers and their order
- @ViewBuilder for custom containers
- Environment and preferences

**Code Examples:**
```swift
// Basic view composition
struct ProfileView: View {
    let user: User

    var body: some View {
        VStack(spacing: 16) {
            ProfileImage(url: user.avatarURL)

            Text(user.name)
                .font(.title)
                .fontWeight(.bold)

            Text(user.bio)
                .font(.body)
                .foregroundStyle(.secondary)
                .multilineTextAlignment(.center)
        }
        .padding()
    }
}

// Custom container with ViewBuilder
struct Card<Content: View>: View {
    let content: Content

    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }

    var body: some View {
        content
            .padding()
            .background(.background)
            .clipShape(RoundedRectangle(cornerRadius: 12))
            .shadow(radius: 4)
    }
}
```

**Checkpoint:** Build profile card component

---

### Module 2: State Management (6 hours)

**Topics:**
- @State for local state
- @Binding for two-way binding
- @StateObject vs @ObservedObject
- @EnvironmentObject for shared state
- @Observable (iOS 17+)
- Combine integration

**State Hierarchy:**
```
@State → Local, value type
@Binding → Pass to child, two-way
@StateObject → Own the object, create once
@ObservedObject → Don't own, receive from parent
@EnvironmentObject → Shared globally
@Observable → Modern replacement (iOS 17+)
```

**Modern Approach (iOS 17+):**
```swift
@Observable
final class UserViewModel {
    var user: User?
    var isLoading = false
    var error: Error?

    private let service: UserServiceProtocol

    init(service: UserServiceProtocol = UserService()) {
        self.service = service
    }

    func loadUser() async {
        isLoading = true
        defer { isLoading = false }

        do {
            user = try await service.fetchCurrentUser()
        } catch {
            self.error = error
        }
    }
}

struct UserView: View {
    @State private var viewModel = UserViewModel()

    var body: some View {
        Group {
            if viewModel.isLoading {
                ProgressView()
            } else if let user = viewModel.user {
                UserContent(user: user)
            }
        }
        .task {
            await viewModel.loadUser()
        }
    }
}
```

**Checkpoint:** Build stateful form with validation

---

### Module 3: Navigation (5 hours)

**Topics:**
- NavigationStack (iOS 16+)
- NavigationPath for programmatic navigation
- NavigationSplitView for iPad
- Sheet, fullScreenCover, alert
- Deep linking with URL schemes

**Navigation Stack:**
```swift
enum Route: Hashable {
    case profile(userId: String)
    case settings
    case detail(item: Item)
}

struct ContentView: View {
    @State private var path = NavigationPath()

    var body: some View {
        NavigationStack(path: $path) {
            HomeView(navigate: navigate)
                .navigationDestination(for: Route.self) { route in
                    switch route {
                    case .profile(let userId):
                        ProfileView(userId: userId)
                    case .settings:
                        SettingsView()
                    case .detail(let item):
                        DetailView(item: item)
                    }
                }
        }
    }

    private func navigate(to route: Route) {
        path.append(route)
    }

    private func popToRoot() {
        path.removeLast(path.count)
    }
}
```

**Checkpoint:** Build multi-screen navigation flow

---

### Module 4: Lists & Grids (4 hours)

**Topics:**
- List and ForEach
- LazyVStack and LazyVGrid
- Swipe actions and context menus
- Searchable modifier
- Pull-to-refresh

**Grid Layout:**
```swift
struct PhotoGrid: View {
    let photos: [Photo]

    private let columns = [
        GridItem(.adaptive(minimum: 100, maximum: 150), spacing: 8)
    ]

    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 8) {
                ForEach(photos) { photo in
                    AsyncImage(url: photo.thumbnailURL) { phase in
                        switch phase {
                        case .empty:
                            Rectangle()
                                .fill(.quaternary)
                        case .success(let image):
                            image
                                .resizable()
                                .scaledToFill()
                        case .failure:
                            Image(systemName: "photo")
                        @unknown default:
                            EmptyView()
                        }
                    }
                    .frame(height: 100)
                    .clipShape(RoundedRectangle(cornerRadius: 8))
                }
            }
            .padding()
        }
    }
}
```

**Checkpoint:** Build searchable photo grid

---

### Module 5: Animations (4 hours)

**Topics:**
- Implicit animations (.animation)
- Explicit animations (withAnimation)
- Transitions
- matchedGeometryEffect
- Phase animator (iOS 17+)

**Animation Examples:**
```swift
// Implicit animation
struct ExpandableCard: View {
    @State private var isExpanded = false

    var body: some View {
        VStack {
            Text("Title")
                .font(.headline)

            if isExpanded {
                Text("Detailed content here...")
                    .transition(.opacity.combined(with: .move(edge: .top)))
            }
        }
        .frame(maxWidth: .infinity)
        .padding()
        .background(.background)
        .clipShape(RoundedRectangle(cornerRadius: 12))
        .onTapGesture {
            withAnimation(.spring(response: 0.4, dampingFraction: 0.8)) {
                isExpanded.toggle()
            }
        }
    }
}

// Matched geometry effect
struct CardTransition: View {
    @Namespace private var animation
    @State private var selectedCard: Card?

    var body: some View {
        ZStack {
            if let card = selectedCard {
                DetailView(card: card)
                    .matchedGeometryEffect(id: card.id, in: animation)
                    .onTapGesture { selectedCard = nil }
            } else {
                LazyVGrid(columns: columns) {
                    ForEach(cards) { card in
                        CardView(card: card)
                            .matchedGeometryEffect(id: card.id, in: animation)
                            .onTapGesture { selectedCard = card }
                    }
                }
            }
        }
        .animation(.spring(response: 0.5), value: selectedCard)
    }
}
```

**Checkpoint:** Create hero animation transition

---

### Module 6: Custom Modifiers & Styles (3 hours)

**Topics:**
- ViewModifier protocol
- ButtonStyle, LabelStyle
- Custom environment values
- Preference keys
- View extensions

**Custom Modifier:**
```swift
struct CardStyle: ViewModifier {
    let isHighlighted: Bool

    func body(content: Content) -> some View {
        content
            .padding()
            .background(.background)
            .clipShape(RoundedRectangle(cornerRadius: 12))
            .shadow(
                color: isHighlighted ? .a