Your First iOS & SwiftUI App: Polishing the App

Now that we’ve created the four text views that we’ll be using in the custom alert, we now have all of the building blocks necessary to create our custom alert view.

Like we did last time, let’s create the basic scaffolding of this together, and than your challenge will be to see if you can put this together on your own.

Let’s dive in!

Create a new SwiftUI View inside Views, name it PointsView.swift.

Add to PointsView_Previews (copy this from ContentViews.swift):

PointsView()
PointsView()
  .previewLayout(.fixed(width: 568, height: 320))
PointsView()
  .preferredColorScheme(.dark)
PointsView()
  .previewLayout(.fixed(width: 568, height: 320))
  .preferredColorScheme(.dark)

Add to ContentsView.swift:

Color.gray
  .padding()
  .frame(maxWidth:300)
  .background(Color("BackgroundColor"))
  .cornerRadius(21)
  .shadow(radius: 10, x: 5, y: 5)

Now that we have the basic scaffolding for PointsView, your challenge is to replace the gray placeholder with the actual content for your view.

Basically, this should be a VStack with spacing 10, which has four text views inside: InstructionText, BigNumberText, BodyText, and ButtonText. For the final text view, ButtonText, place that inside a Button.

Give it a shot, and you can check back here for the solution when you’re done. Good luck!

Add to PointsView.swift:

VStack(spacing: 10) {
  InstructionText(text: "The slider's value is")
  BigNumberText(text: "89")
  BodyText(text: "You scored 100 Points\n🎉🎉🎉")
  Button { } label: {
    ButtonText(text: "Start New Round")
  }
}