Geek Culture
Published in

Geek Culture

Dynamic Custom Alert in SwiftUI

In this blog, you will learn how to create the Dynamic Custom Alert in SwiftUI. Create the new SwiftUI project in XCode and follow along with me. Don’t worry, you can get the source code link from bottom of that blog.

AlertType

Create the enum called AlertType. In this enum, we will create the type of the custom alert. We are just creating the two type.

  1. success: the case for showing the success alert
  2. error: the case for showing the error alert. It takes two parameters title and message. We will pass those parameters and then alert will show them into the alert view.

After that create a function title() inside the enum, which will return alert title in string. Inside that function, we are using the self and handled all the cases inside that. Every case can have its own title.

After that create a function message() inside the enum, which will return alert message in string. Inside that function, we are using the self and handled all the cases inside that. Every case can have its own message as well.

Like that create the functions leftActionText and rightActionText. These also will return the buttons text in string.

After that, one last function for getting the height for the alert view. height function getting the isShowVerticalButtons argument, when we need to show the vertical alert buttons then we will increase the height of the alert.

Below you can see the AlertType enum code.

CustomAlert

After that create the CustomAlert view. CustomAlert view is getting some parameters.

presentAlert is a @Binding property, which used to show or hide the CustomAlert. We can handle the presence of CustomAlert by using this property.

alertType is the type of the alert. Right now we are giving the default type .success. When we don’t give any type to the CustomAlert at the time of call then .success alert will show.

isShowVerticalButtons is used to show alert buttons in vertically or horizontally.

leftButtonAction closure is used to handle the action of left alert button and rightButtonAction for right button in the alert.

In below code, you can see those parameters. After those you can see, we are using the ZStack and inside it we are using the color for covering the background with the given color . That will cover all the screen by using the .edgesIgnoring… view modifier.

After that, we are using the VStack and we are giving the static width and for dynamic height, we will use the AlertType height function. Also we are giving the white background to that VStack and cornorRadius as you can see below.

Inside that VStack, we are creating title first and for title text we will use the AlertType title function. After title, we are creating the message text and for mesage text we are using the message funtoin of AlertType. After message we are using the simple divider.

You can see how we can make our alert dynamic by using the AlertType.

After divider, now we are creating the alert action buttons. If isShowVerticleButtons is false then horizontal buttons should show. For that, we need to use HStack and inside HStack create two buttons by using the divider inside these buttons. For left button, button action will be leftButtonAction and for right button, button action will be rightButtonAction closure as you can see the below code.

We are using the left Button and divider, because some time we need one button only and at that time we will pass empty string for left button and the left button will automatically hide.

So, thats it for the CustomAlert view. Now we need to show this view inside the ContentView.

ContentView

Now in ContentView, create a @State property presentAlert, which will use to handle the presence of CustomAlert view. After that use the ZStack and then create a simple button which will toggle the property presentAlert. After that use if condition by using the presentAlert and use the CustomAlert view inside it. presentAlert of ContentView will bind with the presentAlert of CustomAlert view as you can see the below code and also calling two closures leftButtonAction and rightButtonAction. Inside these closures, we are toggle the presentAlert for dismissing the view with withAnimation.

withAnimation will put the default .easeInOut animation while appearing the CustomAlert.

After that run the code and click the button and you will see your CustomAlert view with horizontal buttons and with .success type. .success type is the default type which is given inside the CustomAlert.

If you want to show the vertical buttons and change the AlertType then see the below code.

Here we are passing the alertType .error and passing the (title and message) parameters into that type. If we want to show vertical buttons then pass the true value inside isShowVerticalButtons parameters.

Run the code and you can see the vertical buttons and AlertType .error.

If you want to show just one button of CustomAlert then pass the empty text in leftButtonText and run the code then you can see, you will get the alert with one button.

Hope you understand and enjoy this blog. You can see the source code from Github by following link.

Full Source Code

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store