Be my SwiftUI Valentine

Be my SwiftUI Valentine

TL;DR funny ways how to use SwiftUI modifiers


2 min read

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 {
            "Start Date",
            selection: $vDay,
            displayedComponents: [.date]

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 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

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")
                .frame(width: 200, height: 200)
                    Image(systemName: "heart.fill")
            maxWidth: 500,
            maxHeight: 300

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

Did you find this article valuable?

Support Marco Eidinger by becoming a sponsor. Any amount is appreciated!