Why RadialGradient loses it's content after adding frame modifier in swiftUI

45 Views Asked by At

I do not understand why RadialGradient in swiftUI does not render itself according to it's frame boundaries. Am I misunderstanding something ? When I add frame modifier, I'm losing the rest of the gradient.

RadialGradient(
            gradient: Gradient(stops: [
                .init(color: Color(#colorLiteral(red: 0.16470588743686676, green: 0.16078431904315948, blue: 0.18039216101169586, alpha: 1)), location: 0.09757862240076065),
                .init(color: Color(#colorLiteral(red: 0.6392157077789307, green: 0.6313725709915161, blue: 0.6784313917160034, alpha: 1)), location: 0.23651380836963654),
                .init(color: Color(#colorLiteral(red: 0.8039215803146362, green: 0.800000011920929, blue: 0.8196078538894653, alpha: 1)), location: 0.37247714400291443),
                .init(color: Color(#colorLiteral(red: 0.46666666865348816, green: 0.4588235318660736, blue: 0.5215686559677124, alpha: 1)), location: 0.506211519241333)]),
            center: .center,
            startRadius: 5.671257848810516,
            endRadius: 567.1257848810516
        )
        .frame(width: 200, height: 200)

enter image description here

1

There are 1 best solutions below

1
Ashley Mills On BEST ANSWER

The endRadius is an absolute value, so if you want the gradient to fit inside the frame, then the endRadius needs to be <= width / 2:

RadialGradient(gradient: Gradient(stops: [
    .init(color: Color(#colorLiteral(red: 0.16470588743686676, green: 0.16078431904315948, blue: 0.18039216101169586, alpha: 1)), location: 0.09757862240076065),
    .init(color: Color(#colorLiteral(red: 0.6392157077789307, green: 0.6313725709915161, blue: 0.6784313917160034, alpha: 1)), location: 0.23651380836963654),
    .init(color: Color(#colorLiteral(red: 0.8039215803146362, green: 0.800000011920929, blue: 0.8196078538894653, alpha: 1)), location: 0.37247714400291443),
    .init(color: Color(#colorLiteral(red: 0.46666666865348816, green: 0.4588235318660736, blue: 0.5215686559677124, alpha: 1)), location: 0.506211519241333)]),
               center: .center,
               startRadius: 5.671257848810516,
               endRadius: 100
)
.frame(width: 200, height: 200)

enter image description here