Show an Alert in SwiftUI

Today in this tutorial, you are going to learn how to show an Alert in SwiftUI in an efficient way.

SwiftUI already provides alert() modifier to help app developers showing up alert messages to users. In order to display an alert message, we have to declare a state variable of a boolean type that determines if the alert message should be visible or not.

After iOS 15 it has now become a lot easier to show an alert message in SwiftUI. This is because the alert() modifier builds on standard SwiftUI buttons. First, create a boolean state variable and then attach it to the alert() modifier along with the button.

Below is given a simple example:

struct ContentView: View {
    
    @State private var showAlert = false

    var body: some View {
        
        Button("Show Alert") {
            showAlert = true
        }
        .alert("This is Alert message", isPresented: $showAlert) {}
       
        
    }
}

You can see that in the button action, we have changed the boolean value of showAlert by assigning true. Clicking the button will show the user the alert message “This is Alert message”. Below is how it looks like:

When the state boolean value is false, the alert message is not visible, on the other hand, changing it from false to true makes it visible.

Clicking the button makes showAlert to true and thus the alert message also is visible. When you click the button in the alert box, it will take the value for showAlert back to true.

If you want to perform some action, you can do it by providing some code as you can see below:

        Button("Show Alert") {
            showAlert = true
        }
        .alert("This is Alert message", isPresented: $showAlert) {
            Button("OK", role: .cancel) {
                print("Okay button tapped in alert box")
            }
        }

In the above program, we have created the cancel button manually and assigned the role to .cancel. Inside the curly brackets, we have to provide the code that is going to be executed by tapping the button. In our case, we are just printing the message.

You can also create multiple buttons along with the alert message with different types of action to run different code block. In that case, you have to provide the button role to .destructive.

Below is how we can do it:

        Button("Show Alert") {
            showAlert = true
        }
        .alert("This is Alert message", isPresented: $showAlert) {
            
            Button("Destructive", role: .destructive) {
                print("Destructive button tapped in alert box")
            }
            
            Button("Cancel", role: .cancel) {
                print("Cancel button tapped in alert box")
            }
            
        }
       
      

It will show two buttons:

In the above screenshot, we can see the two alert buttons are side by side. But, more than two buttons will align the buttons from top to bottom vertically as you can see in the example below:

        Button("Show Alert") {
            showAlert = true
        }
        .alert("This is Alert message", isPresented: $showAlert) {
            
            Button("Button1", role: .destructive) {
                print("Button1 tapped in alert box")
            }
            
            Button("Button2", role: .destructive) {
                print("Button2 tapped in alert box")
            }
            
            Button("Button3", role: .destructive) {
                print("Button3 tapped in alert box")
            }
            
            Button("Cancel", role: .cancel) {
                print("Cancel button tapped in alert box")
            }
            
        }
       

And we will see:

If you want to add a message text to the alert() modifier, you can do it using message:

    
    @State private var showAlert = false

    var body: some View {
        
        Button("Show Alert") {
            showAlert = true
        }
        .alert("This is Alert message", isPresented: $showAlert) {
            
            Button("Destructive", role: .destructive) {
                print("Destructive button tapped in alert box")
            }
            
            Button("Cancel", role: .cancel) {
                print("Cancel button tapped in alert box")
            }
            
        } message: {
            Text("This is the message with the alert")
        }
       
        
    }
}

Below is what you will see when clicking the button:

You can notice that there is our provided message visible in smaller text.

By Faruque Ahamed Mollick