📭Managing Empty State: Not Only Swift Weekly - Issue #11  13th November 2021

Managing Empty State

This week, I was super busy with some behind-the-scenes work for Firebase Summit, among other things helping to launch the Firebase Extensions sample app and fielding questions for the Ask Firebase Live session/

In between, I did find some time to work on Make It So! My original plan was to finish the design and rough implementation of the reminder details screen. However, I got sidetracked by something which I thought was going to be just a small task (or a warm-up exercise, if you will): implementing empty state for the list of reminders.

You might not be aware of it (because most of us don’t ever have empty to-do lists…), but Apple’s Reminders app displays a friendly empty state screen for empty lists.

So - “let’s implement this real quick” I thought, and went on to wrap the List view in a conditional statement. Easy enough, here’s how that looks like for a simple Text view:

struct ContentView: View {
  @State var isEmpty = true
  var body: some View {
    VStack {
      if isEmpty {
        Text("Hello, World")
      } else {
        EmptyView()
      }
    }
  }
}

But then I thought I could do better and decided to turn this into a full-blown view modifier. Not only will this allow me to reuse this in other screens (and projects), but this also made the final code easier to read and more expressive.

Here is how you can use the new view modifier to display empty state instead of the view it is used on:

Text("Hello, World")
  .emptyState($isEmpty) {
    Text("Sorry - no content available")
  }

To learn more about this, and see the code for the EmptyStateViewModifier view modifier, head over to my blog and read Using View Modifiers to Display Empty State.

peterfriese.dev