UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

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?

3      

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

  }
}

4      

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.

3      

Hacking with Swift is sponsored by RevenueCat

SPONSORED Take the pain out of configuring and testing your paywalls. RevenueCat's Paywalls allow you to remotely configure your entire paywall view without any code changes or app updates.

Learn more here

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

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

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.