SwiftUI alert – CoderzHeaven

How to show alerts in swiftUI-Tutorial

In our application we show alerts to users to provide some kind of information about the action they have taken. SwiftUI provides simple and direct way of showing alert to users. With iOS 15 it became even easier.

In this tutorial we will show you how to setup alerts in swiftUI, how to modify swiftUI alerts and how to setup multiple buttons on alert so that users can reply to it.

Setup

Create a new Project in XCode if you haven’t already and open the view you want to add the alert to, like ContentView or create a new View. On the right side of the code editor you should see the preview, if its paused click on the reload button

Now add a Vstack and button as shown below.

Now we can add alert action to the button. For that declare a variable as state variable and binding alert state to it as shown below.

We have added the basics to show alert. Now we can create actual alert. Alert has multiple arguments but for a simple alert we will concentrate on title, isPresented and actions.

.title – Sets the tile of the alert.

.isPresented – A boolean binding variable to keep track of, if the alert is showing or not.

.actions – One or more buttons to perform action.

Add alert code to as shown below.

struct ContentView: View {
    
    @State private var showAlert = false
    
    var body: some View {
        VStack {
            Button("Show alert") {
                showAlert = true
            }
            .alert("Message title", isPresented: $showAlert) {
                Button("OK") { }
            }
        }
    }
}

On tapping ‘Show alert’ we can see the alert message popup as shown below.

We can add additional message to the user as shown below. We can add the message below the alert with a Text() view.

struct ContentView: View {
    
    @State private var showAlert = false
    
    var body: some View {
        VStack {
            Button("Show alert") {
                showAlert = true
            }
            .alert("Message title", isPresented: $showAlert) {
                Button("OK") { }
            } message: {
                Text("This is the body part of the message. Here we can add meaningfull information to the user.")
            }
        }
    }
}

The alert message pop up will look like:

Using buttons with roles in alerts.

Sometime we want to give the user different options to reply to a dialog. We can do this by adding multiple buttons and even assigning them roles. There are two specific button roles we can use to add buttons with extra style beside the default one.

.destructive: styled red; usually used for when deleting something
.cancel: styled bold and blue; used to cancel the current action

We can assign these roles by passing it to the button in the role argument as shown below.

struct ContentView: View {
    
    @State private var showAlert = false
    
    var body: some View {
        VStack {
            Button("Show alert") {
                showAlert = true
            }
            .alert("Message title", isPresented: $showAlert) {
                Button("Delete", role: .destructive) {}
                Button("OK") { }
                Button("Stop", role: .cancel) {}
            } message: {
                Text("This is the body part of the message. Here we can add meaningfull information.")
            }
        }
    }
}

Which will give an alert pop up like the one given below.

Note: When adding a .destructive button a .cancel button will be automatically added. In the above code if we would remove the “Stop” button the alert would still show three buttons with the last one labeled “Cancel”.

Leave a Reply Cancel reply