What are the built in shapes in swiftUI and how to use them?

SwiftUI supports some in-built shapes that are used to develop a custom design and user interface component. These shapes are easy to use and can customized in various style, colors, fills, transformations, etc. 

1. Circle

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        // Circle
        Circle()
            .stroke(Color.red, lineWidth: 2)
            .frame(width: 100)
    }
}

#Preview {
    ContentView()
}

2. Rectangle

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        // Rectangle
        Rectangle()
            .fill(Color.blue)
            .frame(width: 100, height: 50)
    }
}

#Preview {
    ContentView()
}

3. Rounded Rectangle.

SwiftUI also provide built-in RoundedRectangle() to create a rounded rectangle shape. The rounded rectangle is a very useful shape that comes with rounded corners(cornerRadius) and style properties. It is used to create buttons.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        // Drawing rounded rectangle
           RoundedRectangle(cornerRadius: 20, style: .circular)
              .fill(Color.pink)
              .frame(width: 300, height: 200)
        }
}

#Preview {
    ContentView()
}

4. Capsule

SwiftUI also provide a special shape named as a capsule(). It is a pill like shape or an elongated oval shape with rounded ends. It is commonly used to create buttons, badges and other UI components.

struct ContentView: View {
    
    var body: some View {
        // Capsule
        Capsule()
            .fill(Color.orange)
            .frame(width: 100, height: 40)
        }
}

#Preview {
    ContentView()
}

5. Ellipse

Ellipse is a two dimensional ovel shape or we can say it is look like a stretched circle. The width and height of the ellipse are different. In SwiftUI, we can create ellipse shape using Ellipse(). It creates an ellipse that is aligned inside the view frame. We can modify ellipse according to our need using modifiers.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        // Ellipse
        Ellipse()
            .fill(Color.purple)
            .frame(width: 100, height: 60)
        }
}

#Preview {
    ContentView()
}

Each shape can be customized with:

• fill() or stroke()
• frame dimensions
• colors and gradients
• shadows and opacity
• overlay and background modifiers

These shapes serve as building blocks for more complex UI elements.

Thanks for reading!