Circle takes no parameters. It creates a circle that fills the smaller dimension of its frame.
Methods
Fills the circle interior with a color, gradient, or other style.
.stroke(style)
(style: Style | StrokeOptions) => Shape
Draws the circle outline. Pass a Style for a 1-point stroke, or a StrokeOptions object ({ style: Style, lineWidth?: number }) for custom width.
Support
Usage
Basic circle
Circle()
.fill(Color("blue"))
.frame({ width: 50, height: 50 })
Stroked circle
Circle()
.stroke(Color("red"), 2)
With gradient fill
Circle()
.fill(LinearGradient({
colors: [Color("purple"), Color("blue")]
}))
.frame({ width: 100, height: 100 })
Avatar placeholder
ZStack([
Circle()
.fill(Color("gray").opacity(0.3))
.frame({ width: 64, height: 64 }),
Text("JD")
.font("headline")
.foregroundStyle(Color("white"))
])
As a clip shape
Circle can be used with .clipShape() to clip other components:
Image({ url: "avatar.jpg" })
.frame({ width: 48, height: 48 })
.clipShape(Circle())
See Also
