100 Days of SwiftUI – Day 20 – Guess the Flag

We’ve arrived at day 20 of our 100 Days of SwiftUI. Yesterday, we finished a challenge day and created a temperature converter on our own. Today, we have an overview for the second project, which is called Guess the Flag. We learn about lots of new SwiftUI views, like colors, gradients, buttons and images and learn to arrange them using stacks. Let’s dive in!

Arranging views with stacks in SwiftUI

We have seen multiple views already and more are on the way. However, we have yet to see how to arrange these views. Well, the wait is over. Introducing stacks: SwiftUI’s convenient way to arrange your views either horizontally, vertically or in depth/on top of each other. In case you’re wondering why stacking in depth may be helpful, an example would be stacking some text on top of an image.

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Text("1")
                Text("2")
                Text("3")
            }
            HStack {
                Text("4")
                Text("5")
                Text("6")
            }
            HStack {
                Text("7")
                Text("8")
                Text("9")
            }
        }
    }
}

Colors and frames

Next up today are colors and frames. Colors probably speak for themselves, but just in case: we use them to color views, they are drawn in our UI. Frames allow us to specify specific sizes to be colored.

struct ContentView: View {
    var body: some View {
        ZStack { // ZStack ensures the whole view gets a background color
            Color.indigo
        VStack {
            HStack {
                Text("1")
                Text("2")
                Text("3")
            }
            
            .background(.mint)
            .frame(width: 200, height: 200, alignment: .center)
            HStack {
                Text("4")
                Text("5")
                Text("6")
            }
            
            .background(.mint)
            .frame(width: 200, height: 200, alignment: .center)
            HStack {
                Text("7")
                Text("8")
                Text("9")
            }
            
            .background(.mint)
            .frame(width: 200, height: 200, alignment: .center)
        }
    }
        
        .ignoresSafeArea() // Ignores safe area and colors the whole background
    }
}

Gradients

Gradients are another way to add some life to our apps. Like colors, they are views that are being drawn in our UI. There are various gradients and for a great overview, check out Paul’s guide.

struct ContentView: View {
    var body: some View {
        ZStack {
            AngularGradient(gradient: Gradient(colors: [.mint, .indigo, .red, .blue, .green, .purple, .orange, .mint]), center: .center)
        }
        .ignoresSafeArea()
    }
}

Buttons and images

We can add buttons and images to our app for functional or decorative purposes. They are simple to add and modify, and have various properties and roles that can be set.

struct ContentView: View {
    var body: some View {
        VStack {
            Button("First button") {}
                .buttonStyle(.borderedProminent)
                .tint(.mint)
            Button("Destructive button", role: .destructive) {}
                .buttonStyle(.bordered)
                .tint(.purple)
            Button {
                print("Edit button was tapped")
            } label: {
                Text("Edit Button")
                Image(systemName: "pencil")

            }
        }
    }
}

Showing alert messages

When something important happens in our app, a common way to let the user know is with an alert. An alert is a pop up window that has a message and one or more buttons for certain actions.

struct ContentView: View {
    
    @State private var showingAlert = false
    
    var body: some View {
        VStack {
            Button("First button") {}
                .buttonStyle(.borderedProminent)
                .tint(.mint)
            Button("Destructive button", role: .destructive) {}
                .buttonStyle(.bordered)
                .tint(.purple)
            Button {
                print("Edit button was tapped")
            } label: {
                Text("Edit Button")
                Image(systemName: "pencil")
                }
            Button("Show Alert") {
                showingAlert = true
            }.buttonStyle(.borderless)
                .tint(.indigo)
            .alert("Important Message", isPresented: $showingAlert) {
                Button("OK") {}
            }
        }
    }
}

And that was it for day 20! Tomorrow, we’ll continue the Guess the Flag project by implementing what we’ve learned today. We march on!