Styling our flags

Paul Hudson    @twostraws    October 13th 2019

Our game now works, although it doesn’t look great. Fortunately, we can make a few small tweaks to our design to make the whole thing look better.

First, let’s replace the solid blue background color with a linear gradient from blue to black, which ensures that even if a flag has a similar blue stripe it will still stand out against the background.

So, find this line:

Color.blue.edgesIgnoringSafeArea(.all)

And replace it with this:

LinearGradient(gradient: Gradient(colors: [.blue, .black]), startPoint: .top, endPoint: .bottom)
    .edgesIgnoringSafeArea(.all)

It still ignores the safe area, ensuring that the background goes edge to edge.

Now let’s make the country name – the part they need to guess – the most prominent piece of text on the screen. We can do that with the font() modifier, which lets us select from one of the built-in font sizes on iOS, but we can add fontWeight() to it to make the text extra bold.

Put these two modifiers directly after the Text(countries[correctAnswer]) view:

.font(.largeTitle)
.fontWeight(.black)

“Large title” is the largest built-in font size iOS offers us, and automatically scales up or down depending on what setting the user has for their fonts – a feature known as Dynamic Type.

Finally, let’s jazz up those flag images a little. SwiftUI gives us a number of modifiers to affect the way views are presented, and we’re going to use three here: one to change the shape of flags, one to add a border around the flags, and a third to add a shadow.

There are four built-in shapes in Swift: rectangle, rounded rectangle, circle, and capsule. We’ll be using capsule here: it ensures the corners of the shortest edges are fully rounded, while the longest edges remain straight – it looks great for buttons. Making our image capsule shaped is as easy as adding the .clipShape(Capsule()) modifier, like this:

.clipShape(Capsule())

As for drawing a border around the image, this is done using the overlay() modifier. This lets us draw another view over the flag, which in our case will be a capsule that has a black stroke around its edge. So, add this modifier after clipShape():

.overlay(Capsule().stroke(Color.black, lineWidth: 1))

And finally we want to apply a shadow effect around each flag, making them really stand out from the background. This is done using shadow(), which takes the color, radius, X, and Y offset of the shadow, but if you skip X and Y it assumes 0 for them. So, add this last modifier below the previous two:

.shadow(color: .black, radius: 2)

So, our finished flag image looks like this:

Image(self.countries[number])
    .renderingMode(.original)
    .clipShape(Capsule())
    .overlay(Capsule().stroke(Color.black, lineWidth: 1))
    .shadow(color: .black, radius: 2)

SwiftUI has so many modifiers that help us adjust the way fonts and images are rendered. They all do exactly one thing, so it’s common to stack them up as you can see above.