Be my SwiftUI Valentine

This not-so serious blog post illustrates the use of various SwiftUI view modifiers. The inspiration of this blog post is Valentine's Day 2022 :)

Mark your Calendar

Valentine's Day is on February 14th and I don't want to stand with empty hands in front of my spouse. So let's mark the calendar.

struct MarkYourCalendar: View {
    @State private var vDay = Date("20220214")
    var body: some View {
        DatePicker(
            "Start Date",
            selection: $vDay,
            displayedComponents: [.date]
        )
        .datePickerStyle(.graphical)
    }
}

Using the datePickerStyle view modifier to pass in the graphical will display display an interactive calendar (or clock).

Screen Shot 2022-02-10 at 7.52.17 PM.png

There are other DatePickerStyle's to specify the appearance and interaction of all date pickers within a view hierarchy.

The complete list of types:

automatic
compact
field
graphical (used here)
stepperField
wheel

P.S.: I am using here an extension on Date to initialize an instance from a string

extension Date {
    init(_ input: String) {
        self = Date.from(input)
    }
    static func from(_ input: String) -> Date {
        let df = DateFormatter()
        df.dateFormat = "yyyyMMdd"
        return df.date(from: input) ?? Date()
    }
}

Cover your tracks

The redacted view modifier is a great way to hide sensitive data and to handle loading states. In my case I don't want my spouse to know the gift just yet.

struct ValentinesDayGift: View {
    var body: some View {
        HStack {
            Text("I bought my wife: ")
            Text("She cannot know yet").redacted(reason: .placeholder)
        }
    }
}

Example of using redacted view modifier

Learn more about the redacted view modifier by reading https://serialcoder.dev/text-tutorials/swiftui/the-redacted-view-modifier-in-swiftui/

Don't be afraid to mask your feelings

Using the mask view modifier let's me create this wonderful Valentine's Day card in SwiftUI.

struct ValentinesDayGift: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("Happy Valentine's Day")
                .font(.largeTitle)
                .fontWeight(.bold)
                .foregroundColor(.white)
            Image("Jeanine")
                .resizable()
                .frame(width: 200, height: 200)
                .mask(
                    Image(systemName: "heart.fill")
                        .resizable()
                )
        }
        .frame(
            maxWidth: 500,
            maxHeight: 300
        )
        .background(.purple)
    }
}

Example of using mask view modifier

My wife thinks I am dorky but sweet. She was very happy with her special Valentine's Day card. Mission accomplished :)

The mask() modifier is different from clipShape(), because it also applies any transparency from the masking view – you get to have holes in your underlying view based on the transparency of your mask.

Learn more about the mask view modifier by reading https://www.fivestars.blog/articles/swiftui-masking/

Be my SwiftUI Valentine

Comments

More from this blog

All new frameworks presented at WWDC26

All new frameworks presented at WWDC25

My WWDC25 Week: Events, Meetups, and Where to Find Me

You better increase URLCache size

All new frameworks presented at WWDC24

Mark your Calendar

Cover your tracks

Don't be afraid to mask your feelings

Command Palette

Comments

More from this blog

Mark your Calendar

Cover your tracks

Don't be afraid to mask your feelings