Stroke, Fill & overlay
Outline and fill shapes for badges and cards.
Stroke, Fill & overlay is a free SwiftUI Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the SwiftUI Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Fill vs Stroke
A shape can be painted inside with fill or outlined with stroke. Together they let you build badges and cards.
Filling a Shape
Use fill to paint the whole inside of a shape with a color or gradient. It is the most common way to color a shape. 🎨
Circle()
.fill(.blue)Outlining with stroke
The stroke modifier draws only the border of a shape, leaving the center empty. Perfect for hollow rings and outlines.
Circle()
.stroke(.blue)Controlling Line Width
Pass a lineWidth to stroke to make the outline thicker or thinner. A larger number gives a bolder border.
Circle()
.stroke(.blue, lineWidth: 4)Dashed Borders
Use a StrokeStyle with a dash pattern for dashed outlines. Great for placeholders and drop zones in your UI.
RoundedRectangle(cornerRadius: 12)
.stroke(style: StrokeStyle(lineWidth: 2, dash: [6]))Fill and Stroke Together
Want both a fill and a border? Use fill with a stroke argument to paint inside and outline in one call.
Circle()
.fill(.yellow)
.stroke(.orange, lineWidth: 3)Meet the overlay
The overlay modifier layers a view on top of another. Use it to add a border, badge, or icon over existing content.
Borders via overlay
A classic trick: fill a shape, then add a stroked copy with overlay. You get a clean filled card with a crisp border.
RoundedRectangle(cornerRadius: 12)
.fill(.white)
.overlay(
RoundedRectangle(cornerRadius: 12)
.stroke(.gray, lineWidth: 1))Overlaying an Icon
You can overlay any view, not just shapes. Drop a small badge or icon onto a card to highlight new or important items.
Circle()
.fill(.blue)
.overlay(Text("3").foregroundStyle(.white))overlay vs background
Remember the layers: overlay sits on top of a view, while background sits behind it. Pick by which side you want the decoration.
Building a Badge
Combine fill, stroke, and overlay to craft polished badges, avatars, and cards. These three tools cover most decoration. ✨
Quick Check
You want to layer a stroked border on top of a filled shape. Which modifier places a view on top?
Recap: Stroke, Fill & overlay
You learned to paint shapes with fill, outline them with stroke, and layer extras with overlay. You can now build real badges and cards!
Frequently asked questions
Is the “Stroke, Fill & overlay” lesson free?
Yes — the full text of “Stroke, Fill & overlay” is free to read here on the web, and the SwiftUI Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the SwiftUI Academy course, upgrade to CoddyKit PRO.
What will I learn in “Stroke, Fill & overlay”?
Outline and fill shapes for badges and cards. You practise SwiftUI Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start SwiftUI Academy?
No prior experience is required. SwiftUI Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Stroke, Fill & overlay” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this SwiftUI Academy lesson?
Yes. Every SwiftUI Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- The Color Type & Asset Colors
- Linear, Radial & Angular Gradients
- Built-in Shapes
- Stroke, Fill & overlay