WWDC22 SALE: Save 50% on all my Swift books and bundles! >>

SOLVED: Day 28: BetterRest Challenge - Presenting the bedtime

Forums > 100 Days of SwiftUI

Hi all! I had to take a lengthy break due to health reasons but now I'm getting back to my routine.

I'm currently finishing the wrap up challenge for BetterRest. I solved part 3 by editing the calculateBedTime function to return a string and then I have a Text view calling it.

However, since everything is wrapped inside a NavigationView and a Form I'm having hard time achieving an aesthetically pleasing result. I theoretically got it working like this:

Section(header: Text("Your recommended bedtime").font(.system(size: 20))) {
                        Text("\(calculateBedTime())")
                            .font(.system(size: 24))
                    }

It works pretty much as instructed but doesn't look so good, as you can see from this picture:

There is a lot of empty space to be utilized below the coffee intake picker so I'd like to have the bedtime there with a bigger font and not looking like a menu item. If I just place a Text right outside the NavigationView, the text is rendered in a white box in the bottom. My gut says that I should be using stacks. Any tips?

1      

Hi @hyperdolphins

Section(header: ) is going to be deprecited in future. And change it you should use

Section {
  Text("\(calculateBedTime())")
      .font(.system(size: 24))
} header: {
  Text("Your recommended bedtime")
    .font(.system(size: 20))
}

however I would all way try to keep Section Header the same, which probarbly why it looks wrong. Look at changing the

The way I did it

NavigationView {
      Form {
          Section("When do you want to wake up?") {
              DatePicker("Please enter a time", selection: $wakeUp, displayedComponents: .hourAndMinute)
          }

          Section {
              VStack(alignment: .leading, spacing: 0) {
                  Text("Desired amount of sleep")
                      .font(.headline)
                  Stepper("\(sleepAmount.formatted()) hours", value: $sleepAmount, in: 4...12, step: 0.25)
              }

              VStack(alignment: .leading, spacing: 0) {
                  Text("Daily coffee intake")
                      .font(.headline)
                  Stepper(coffeeAmount == 1 ? "1 cup" : "\(coffeeAmount) cups", value: $coffeeAmount, in: 1...20)
              }
          }

          VStack(alignment: .leading) {
              Text("Your ideal bedtime is…")
                  .font(.headline)
              Text(bedTime)
                  .font(.largeTitle)
          }

  }
}

2      

Hi.

Thanks for the tip on Section syntax!

Your solution certainly looks better so I'll mark this as solved.

However I'm still trying to figure out how to program the bedtime indicator in a satisfying way so that it would look less like a menu item.

1      

Hacking with Swift is sponsored by Fernando Olivares

SPONSORED Fernando's book will guide you in fixing bugs in three real, open-source, downloadable apps from the App Store. Learn applied programming fundamentals by refactoring real code from published apps. Hacking with Swift readers get a $10 discount!

Read the book

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.