Skip to content

SwiftUI: Rectangle

Traditionally, you will create a UIView to create a Rectangle. With SwiftUI, you can create a Rectangle by just calling it’s method.

You should be seeing the pattern here where SwiftUI does all the minor work for you.

A rectangular shape aligned inside the frame of the view containing it.

Apple Documentation

In this tutorial, you’ll learn what it takes to build a Rectangle in SwiftUI. You’ll learn:

  • How to build a Rectangle from scratch.

Prerequisites

To follow along this tutorial, you’ll need some basic knowledge in:

  • A basic familiarity with Swift.
  • At least Xcode 11

Rectangle

There are two types of Rectangle that you can use. One with corner radius and one without corner radius.

Notice the difference between both Rectangle, in order to use the one with corner radius, you have to use RoundedRectangle.

If background color is not up to your taste, you could always try stroke

You can even configure the width of the stroke.

What about a dotted line?

Let’s try something more practical where you use it on your project. What about a button with a RoundedRectangle as a background?

Instead of a text, what about an image?

If you are more of a stroke type.

Where to go From Here

If you feel like you are ready to take on more challenges, feel free to check out some other tutorials that we have created:

Published inSwiftUI

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © DaddyCoding 2020.