In this tutorial we are going to recreate the Calendar widget on iOS 14 step-by-step with DetailsPro.

By the end of this tutorial, you will have created this from scratch:

This tutorial works no matter which platform you’re using DetailsPro on, so feel free to grab your preferred device, whether it’s an iPhone, an iPad, or a Mac.

Step 1

Create a new file 
Open up DetailsPro and find the blue + icon. Tap it to create a new file. Once you do, you should see a new, empty screen.

Step 2

Select a size preset
Find the button that says Select Size and use it to select Small Widget. DetailsPro comes with easily selectable sizes for common frames that you’ll encounter when designing for Apple platforms. In this case, we’ll want to use Small Widget.

Now that we’ve selected a size preset, you should be able to see that the preview area has now gotten smaller and is now in the shape of a small widget.

Step 3

Add a Vertical Stack
Let’s add our first design element to the screen. So, if you look at the Calendar widget we want to create, you might notice that the layout of each of the elements appears to follow a vertical arrangement. There’s the SATURDAY up at the top, and then something under it, and then something under that. So we are going to use a Vertical Stack to create this design. 

Find the first insert + button, tap it, and select Vertical Stack.

Now we’ve got a Vertical Stack added to our design, but we still aren’t seeing anything. Don’t worry! This makes sense because the Vertical Stack is still empty. We need to add some design elements inside the stack to give the stack something to show.

Step 4

Add our first lines of text
We’re going to start at the top of the design and work our way down, so let’s add two lines of text to start: one for “SATURDAY” and one for “3″.

Tap the + button that has now appeared inside the Vertical Stack indentation.

Tap Text to add a text design element.

Now we can see our first added text element. In DetailsPro, design elements appear as selectable, draggable objects in the editing area. They also appear in the live preview area. Since we just added this design element, it’s already selected. 

Change the text to  “SATURDAY”.

Now we can add another text element for the next line. Tap the next + button after SATURDAY and add another text element.

Change the text to “3”.

Step 5

Use Spacers to move the two lines up
The Calendar widget features these two lines up towards the top of the container and in the corner, so we are going to have some fun with stacks to get these two lines there.

Let’s keep these two lines together as a pair inside the same Vertical Stack. But then, how do we move them? 

We are going to use a Horizontal Stack and a Spacer to tell SwiftUI where want these two lines to go. 

First, long-press on the Vertical Stack we have now.

Next, let’s create a new Horizontal Stack and put this Vertical Stack inside it in one move (fancy, eh?).

Tap New Stack With Item…

Next, tap New Horizontal Stack.

Now we’ve got a Horizontal Stack with our original Vertical Stack inside it. And now that we have this Horizontal Stack, we can use Spacer to place things horizontally.

Let’s do that now. 

Find the + button that is inside the Horizontal Stack and after the Vertical Stack. (Not the one directly after 3—that + button is for adding things directly into that Vertical Stack. We want to add something to the Horizontal Stack that will be on the same level as the Vertical Stack.

Now we’ve pushed everything over to the left. Horizontal Stack lays itself out in left-to-right or right-to-left directions based on the language of your device. (Hint! This is why we use leading and trailing instead of explicitly left and right. It allows us to use whichever side is appropriate for a user’s device.)

Basically, all Spacer does is take up the rest of the… space. And it’ll take up space horizontally or vertically, depending on the stack that it’s in.

So! Let’s use this new trick to push our text towards the top too. Can you guess where the next Spacer is going to go?

If you guessed at the bottom of a Vertical Stack, you’re right! No worries if you didn’t guess it. Like all good things, learning and experience just come with practice. That’s why we’re here. 

We need a new Vertical Stack to put our buddies in here. Let’s use the same fancy trick from earlier.

First, long-press on our Horizontal Stack. 

Tap New Stack with Item…

Tap New Vertical Stack.

And now we can add in a Spacer inside our new Vertical Stack to take up any remaining space after other elements, therefore pushing our text up!

Tap the appropriate + button.

Tap Spacer.

Now we can see our text has moved to the top. It doesn’t look right though, because it’s pushing right up against the top of the widget. We definitely want a little bit of padding there.

Time to use something new: modifiers. Modifiers are how you can change sizes, colors, backgrounds, you name it. And we add modifiers to things. So we can add a modifier to our text element, for example.

We are going to use the Padding modifier to add padding to our Vertical Stack. This will instantly give us the spacing we are looking for to ease our eyes as we look at this current monstrosity. 

Tap Vertical Stack to select it (we want the one all the way at the top).

Find Suggested Modifiers and tap to add a Padding modifier. 

Now we can see in our Modifiers list that we have one modifier. We can also see in the live preview area that our design elements now have padding between them and the edge of the widget. 

Let’s change the amount of padding to match the Apple Human Interface Guidelines for widgets in iOS 14. 

Tap on the Padding modifier.

Tap Amount.

Tap in 16 as the value.

Now that we have the proper padding around our widget design, we can move on. Let’s continue by lining up our text on the leading side.

Tap the inner Vertical Stack that contains the text to select it.

Tap Alignment.

Select Leading.

Now we can see that our text is aligned, since we selected Leading alignment for all design elements within the Vertical Stack.

Step 6

Add style with Font modifiers
Time for fonts! Let’s set the fonts for each text element.

Tap “SATURDAY”.

Tap to add a Font modifier from Suggested Modifiers. 

Tap the newly added Font modifier.

Tap Custom.

Tap in 10 for size and Medium for weight. 

Add a Color modifier from Suggested Modifiers.

Select the color red.

Tap the 3 element.

Add a Font modifier again, this time setting the size to 32 and the weight to Light.

We’re officially done with the top section of the widget! Great job so far. Now let’s seal the deal and add in the rest.

Step 7

Add bottom section
We added a picture of the finished widget here again to help us look ahead for what’s left:

So we put the SATURDAY and the 3 together with a Vertical Stack—hopefully that part feels simple to you when you look back. 

Now how should we make the bottom part? We’ll give away one secret right now: we can make that green bar by using a shape available in SwiftUI called Rounded Rectangle. And then for the three lines of text, next to it, we can use a simple Vertical Stack. 

So we are going to make one Horizontal Stack, place a Rounded Rectangle in it, and then add a Vertical Stack with three text elements.

Let’s go!

First, collapse this Horizontal Stack. 

Add a new Horizontal Stack.

Add a Rounded Rectangle.

Step 8

Style the Rounded Rectangle

Add a Frame modifier.

Set the width to 4.

Add a Spacer to push the Rounded Rectangle over.

Step 9

Make the Rounded Rectangle green

Add a Color modifier, and set it to green.

Step 9

Add a Vertical Stack for the event details.

We are ready to add those three lines of text that give you a little preview of your next event. 

Add a Vertical Stack.

Step 10

Add text for the name of the event, the location, and the time.

Add a text element.

Change the text to “Design Review”.

Add a Font modifier.

Change the font to a size of 13 and a weight of Medium.

Add another text element.

Change the text to “Apple Park”.

Add a Font modifier and select the Caption style.

Step 11

Change Vertical Stack to use Leading alignment
We want each line of text to be aligned on the leading edge of the overall stack, so let’s change this from the default which is Center.

Change the alignment to Leading.

Step 12

Add text element for the event’s time.

Change the text to “4:00 PM to 5:00 PM”.

Add a Font modifier and select the Caption style.

Add a Color modifier and select the Secondary color.

We’ve officially got all the elements in the design! Great job. 

Step 12

Final cleanup
In this last step, we are just going to make some quick tweaks to add that final polish. 

Change the spacing of the Vertical Stack from “Default” to 2.

In the bottom section, we had used a Spacer to push our green bar over, but we don’t need this Spacer taking up any of this valuable space now that we have filled it out more. Let’s remove it and use the Vertical Stack’s alignment instead to make sure things are lined up right.

Select and delete the Spacer in the Horizontal Stack of the bottom section.

Select the Vertical Stack all the way at the top.

Change the Alignment to Leading.

Change the Spacing to 8.

We are now officially done! You did it! 🎉

Sit back and marvel at this beautiful design you brought to life:

It is incredibly rewarding for us to know that DetailsPro is helping you with your design work. Thank you for following DetailsPro on our blog and reading along with this post.

We can’t wait to see all the amazing designs you’ll create.