How to create a Popup Window with SwiftUI

In this tutorial, I’ll show you how to make a pop-up window with a semi-transparent background using SwiftUI in iOS.

In SwiftUI, if you use fullScreenCover() to show the view as a full-screen modal, you won’t see the View below.

So I’m going to implement this is by hiding the popup View in the parent View and show it when you tap on a Button

Creating the PopUp View

First, let’s create a new SwiftUI View for the pop-up.

Go to your project folder, Right-Click > New File…

Select SwiftUI View, press Next and name it PopUpWindow

Now, create a new boolean variable with the property wrapper @Binding, to be able to show/hide the view whenever we want:

struct PopUpWindow: View { // ... @Binding var show: Bool var body: some View { ZStack { if show { // semi-transparent background and popup window } } } }
Code language: Swift (swift)

This @Binding variable gets updated to true (show) when we tap the button on the parent View, and false (hide) when we press the ‘OK’ button on the popup.

struct PopUpWindow: View { var title: String var message: String var buttonText: String @Binding var show: Bool var body: some View { ZStack { if show { // PopUp background color Color.black.opacity(show ? 0.3 : 0).edgesIgnoringSafeArea(.all) // PopUp Window VStack(alignment: .center, spacing: 0) { Text(title) .frame(maxWidth: .infinity) .frame(height: 45, alignment: .center) .font(Font.system(size: 23, weight: .semibold)) .foregroundColor(Color.white) .background(Color(#colorLiteral(red: 0.6196078431, green: 0.1098039216, blue: 0.2509803922, alpha: 1))) Text(message) .multilineTextAlignment(.center) .font(Font.system(size: 16, weight: .semibold)) .padding(EdgeInsets(top: 20, leading: 25, bottom: 20, trailing: 25)) .foregroundColor(Color.white) Button(action: { // Dismiss the PopUp withAnimation(.linear(duration: 0.3)) { show = false } }, label: { Text(buttonText) .frame(maxWidth: .infinity) .frame(height: 54, alignment: .center) .foregroundColor(Color.white) .background(Color(#colorLiteral(red: 0.6196078431, green: 0.1098039216, blue: 0.2509803922, alpha: 1))) .font(Font.system(size: 23, weight: .semibold)) }).buttonStyle(PlainButtonStyle()) } .frame(maxWidth: 300) .border(Color.white, width: 2) .background(Color(#colorLiteral(red: 0.737254902, green: 0.1294117647, blue: 0.2941176471, alpha: 1))) } } } }
Code language: Swift (swift)

Adding the PopUp View in the Parent View

Now in the parent View, create a new @State variable with the name showPopUp and set it to false.

Add a ZStack, and at the bottom, add the PopUpWindow we created before, and pass the state property showPopUp

struct ContentView: View { @State private var showPopUp: Bool = false var body: some View { ZStack { // Other Views... } PopUpWindow(title: "Error", message: "Sorry, that email address is already used!", buttonText: "OK", show: $showPopUp) } } }
Code language: Swift (swift)

Now, to open the popupview, we have set showPopUp to true.

To do this, we’re going to use the .toggle() method to change it.

So, the parent View will look like this:

struct ContentView: View { @State private var showPopUp: Bool = false init() { UINavigationBar.appearance().barTintColor = UIColor(#colorLiteral(red: 0.737254902, green: 0.1294117647, blue: 0.2941176471, alpha: 1)) UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor.white] UINavigationBar.appearance().isTranslucent = false } var body: some View { ZStack { NavigationView { ZStack(alignment: .center) { Color(#colorLiteral(red: 0.737254902, green: 0.1294117647, blue: 0.2941176471, alpha: 1)).ignoresSafeArea() Button(action: { withAnimation(.linear(duration: 0.3)) { showPopUp.toggle() } }, label: { Text("Show PopUp Window") }) .padding() .background(Color(#colorLiteral(red: 0.6196078431, green: 0.1098039216, blue: 0.2509803922, alpha: 1))) } .navigationBarTitleDisplayMode(.inline) .navigationTitle("PopUpWindowSwiftUIExample") .foregroundColor(Color.white) } PopUpWindow(title: "Error", message: "Sorry, that email address is already used!", buttonText: "OK", show: $showPopUp) } } }
Code language: Swift (swift)
You can find the final project here

If you have any questionsplease feel free to leave a comment below

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments