TEAM LICENSES: Save money and learn new skills through a Hacking with Swift+ team license >>

Styling our flags

Paul Hudson    @twostraws   

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:

And replace it with this:

LinearGradient(colors: [.blue, .black], startPoint: .top, endPoint: .bottom)

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

Now let’s adjust the fonts we’re using just a little, so that the country name – the part they need to guess – is the most prominent piece of text on the screen, while the “Tap the flag of” text is smaller and bold.

We can control the size and style of text using the font() modifier, which lets us select from one of the built-in font sizes on iOS. As for adjusting the weight of fonts – whether we want super-thin text, slightly bold text, etc – we can get fine-grained control over that by adding a weight() modifier to whatever font we ask for.

Let’s use both of these here, so you can see them in action. Add this directly after the “Tap the flag of” text:


And put this modifiers directly after the Text(countries[correctAnswer]) view:


“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. We’re overriding the weight of the font so it’s a little bolder, but it will still scale up or down as needed.

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 two here: one to change the shape of flags, and one 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:


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 the color we get a translucent black, and if we skip X and Y it assumes 0 for them – all sensible defaults.

So, add this last modifier below the previous two:

.shadow(radius: 5)

So, our finished flag image looks like this:

    .shadow(radius: 5)

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.

Hacking with Swift is sponsored by Superwall.

SPONSORED Superwall lets you build & test paywalls without shipping updates. Run experiments, offer sales, segment users, update locked features and more at the click of button. Best part? It's FREE for up to 250 conversions / mo and the Superwall team builds out 100% custom paywalls – free of charge.

Learn More

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

Buy Pro Swift Buy Pro SwiftUI Buy Swift Design Patterns Buy Testing Swift Buy Hacking with iOS Buy Swift Coding Challenges Buy Swift on Sundays Volume One Buy Server-Side Swift Buy Advanced iOS Volume One Buy Advanced iOS Volume Two Buy Advanced iOS Volume Three Buy Hacking with watchOS Buy Hacking with tvOS Buy Hacking with macOS Buy Dive Into SpriteKit Buy Swift in Sixty Seconds Buy Objective-C for Swift Developers Buy Beyond Code

Was this page useful? Let us know!

Average rating: 4.8/5

Unknown user

You are not logged in

Log in or create account

Link copied to your pasteboard.