Predicates and sorting in iOS Swift - Mini App: Build & Ship

Build: Filtered Sorted List

This screen shows a list of fruits. Users can filter the list by typing a search term. The list is always sorted alphabetically.

Target UI

-------------------------
| Filtered Sorted List   |
-------------------------
| Search: [___________] |
|                       |
| - Apple                |
| - Banana               |
| - Cherry               |
| - Date                 |
| - Grape                |
| - Kiwi                 |
|                       |
-------------------------

Display a list of fruit names.

Add a search bar at the top to filter fruits by name using a predicate.

Sort the filtered fruits alphabetically.

Update the list in real-time as the user types.

Starter Code

iOS Swift

import SwiftUI

struct FruitListView: View {
    @State private var searchText = ""
    let fruits = ["Banana", "Apple", "Cherry", "Date", "Grape", "Kiwi"]

    var body: some View {
        NavigationView {
            VStack {
                TextField("Search", text: $searchText)
                    .padding()
                    .textFieldStyle(RoundedBorderTextFieldStyle())

                List {
                    // TODO: Show filtered and sorted fruits here
                }
            }
            .navigationTitle("Filtered Sorted List")
        }
    }
}

struct FruitListView_Previews: PreviewProvider {
    static var previews: some View {
        FruitListView()
    }
}

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI

struct FruitListView: View {
    @State private var searchText = ""
    let fruits = ["Banana", "Apple", "Cherry", "Date", "Grape", "Kiwi"]

    var filteredFruits: [String] {
        fruits.filter { fruit in
            searchText.isEmpty || fruit.localizedCaseInsensitiveContains(searchText)
        }
        .sorted()
    }

    var body: some View {
        NavigationView {
            VStack {
                TextField("Search", text: $searchText)
                    .padding()
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .accessibilityLabel("Search fruits")

                List(filteredFruits, id: \.self) { fruit in
                    Text(fruit)
                }
                .listStyle(PlainListStyle())
            }
            .navigationTitle("Filtered Sorted List")
        }
    }
}

struct FruitListView_Previews: PreviewProvider {
    static var previews: some View {
        FruitListView()
    }
}

We created a computed property filteredFruits that filters the fruits array using the search text. It uses localizedCaseInsensitiveContains to check if the fruit name includes the search text, ignoring case. If the search text is empty, it shows all fruits. Then it sorts the filtered list alphabetically with sorted().

The List displays the filtered and sorted fruits. The TextField updates searchText as the user types, so the list updates in real-time.

We also added an accessibility label to the search field for better usability.

Final Result

Completed Screen

-------------------------
| Filtered Sorted List   |
-------------------------
| Search: [App_______]  |
|                       |
| - Apple                |
|                       |
-------------------------

User types 'App' in the search bar.

List updates to show only 'Apple' because it matches the search.

If user clears the search, all fruits appear sorted alphabetically.

Stretch Goal

Add a clear button inside the search bar to quickly erase the search text.

💡 Hint

Use the .overlay modifier on TextField with a Button that sets searchText to an empty string.