Build with Stacks and Shapes
Compose with Stacks and Shapes
Code a self portrait using stacks, shapes and modifiers.
Estimated time to complete this tutorial:
35 mins
Code a self portrait using stacks, shapes and modifiers.
Estimated time to complete this tutorial:
35 mins
Use the following tools to make a self-portrait.
Use a depth stack and add a shape for your head.
Step 1
Change the VStack to a ZStack (depth stack).
Step 2
Open the list of views and scroll to the bottom to find the capsule, circle, ellipse, rectangle and rounded rectangle shapes.
Step 3
Add a shape to the ZStack for your head. Use a RoundedRectangle for a square face, or a Capsule for a rounder face.
Tip
Rounded rectangles require a corner radius.
Use the frame modifier to specify the size of a shape.
Step 1
Add a blank line below the capsule, then open the list of modifiers.
Step 2
Search for frame and tap to add it to your code.
Step 3
Fill in the approximate values for height and width to create your head.
Use the foregroundStyle modifier to give the shape a colour.
Step 1
Add a blank line below frame, then open the list of modifiers.
Step 2
Type foregroundStyle into the search bar. Tap it to add it to your code.
Step 3
To change the colour, select the code inside the parentheses and open the list of colours.
Step 4
Tap any colour to add it to your code.
Tip
Optionally, create your own colour. Choose one of the code snippets, then edit the values to match your skin tone.
Add a neck, then shift it down using offset.
Step 1
Apply what you’ve learned to add a rectangle for your neck and adjust the size with a frame modifier.
Step 2
Add a blank line below the rectangle, then search for offset in the list of modifiers.
Step 3
Tap offset and edit the value to shift the shape down. Optionally, delete any parameters you don’t use.
Step 4
Move the neck under the head.
Select the rectangle and any modifiers you added. Cut and paste the code to the top of the depth stack. Then change the colour to match your head.
Step 5
Apply what you’ve learned to add a shirt, place it correctly on the screen and give it a colour.
Trim a shape to create bangs or short hair.
Step 1
Add a circle for your hair. Use frame to make it about the same width as your head or slightly larger.
Step 2
Add a blank line below the circle. Type .trim and tap return when it appears in code completion.
Note, the trim modifier must come directly below a shape.
Step 3
Experiment with values for where the trim should start and end.
Step 4
Adjust the location of the bangs or short hair. Continue adding any remaining elements to complete your hair.
Tip
If you have more than ten views in a stack, you’ll get an “Extra arguments at position…” warning.
If this happens, group elements like you see here.
Use a shadow to separate your head and neck.
Step 1
Locate the shape that creates your head in the code. Add a blank line below the shape, then search for shadow in the list of modifiers.
Step 2
Edit the radius of the shadow. Experiment with different values to see how it looks.
Tip
Optionally, add a colour for the shadow.
Add a background colour for your self portrait.
Step 1
Add a blank line at the top of your ZStack, then open the list of colours. Tap a colour to add it to your code.
Tip
Optionally, add an opacity modifier to dim the background colour.
Explore tried-and-true resources from educators and find fresh ideas to enhance your own lessons.
Visit the ForumDiscover more projects designed to help you teach coding and app development.
How likely are you to recommend this project to others?