swiftuiradial-gradients

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


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


Solution

  • 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