Adding an overlay when there’s no content to show – SwiftUI Empty States

Empty states. Or to put it another way, what do you show when a view is devoid of any content? 

This is an area that not all apps account for. The ones that do though, not only improve the end-user experience but also feel more… complete? 

Here’s some examples of empty states.

1. NetNewsWire (a great RSS reader that I use daily): 

Screen Shot 2022 04 16 at 12 53 53 PM

2. MarsEdit (my blogging app of choice):

Screen Shot 2022 04 16 at 12 53 20 PM

3. Evernote has a different style, showing also an image and a button to trigger next steps:

Screen Shot 2022 04 16 at 1 02 19 PM

4. Finally, here’s how Apple Notes approaches it:

Screen Shot 2022 04 16 at 2 44 14 PM

For MarsManaged I decided to go with a similar approach to Apple Notes when the card list is empty. Here’s how to easily do it in SwiftUI. 

1. Create a ZStack where you’ll have a list of items you want to show followed by your desired empty state view, in this case I’m using Text. 

2. Set the State View opacity to 1 if there’s no data to show or 0 otherwise. In doing so the view will only appear when there’s nothing to show. 



        ForEach(notes){note in

                //Stuff […]



    Text(“No Cards”)


        .opacity(notes.count == 0 ? 1 : 0


In addition, to help infuse some character into the app I’m planning on having quotes related to space exploration/mars in the detail view. Maybe also some image of Mars? Have not decided yet… Do let me know what you think. 

Screen Shot 2022 04 16 at 2 58 53 PM

Development-wise it’s even easier: using an if statement it checks if a Card is selected and if so it’ll show the editor, else it’ll show the empty state view.  

Thoughts, suggestions? Reach me @MarcMasVi