LinearGradient not completely filling shape

Thanks for pointing out this problem. I downloaded a copy of the tutorial and was able to reproduce the problem you have described here.

Our engineering teams need to investigate this issue, as resolution may involve changes to Apple's software. Please file a bug report, include a reference to the Xcode tutorial with the step you're on, and post the FB number here once you do.

Bug Reporting: How and Why? has tips on creating your bug report.

SwiftUI Tutorials > Landmarks App > Drawing Paths and Shapes > BadgeBackground.swift > Gradient Fill Does Not Fill Hexagon Shape Entirely

I have run into the same issue taking this tutorial using xCode Version 16.1 (16B40) on a MacBook air m2 16GB RAM Running Sequoiia 15.3.

It's a relief to know this issue is affecting more than just myself. For a minute there i thought I was losing my mind. I reviewed all the code i had written so far and compared it to the files in the 'Complete' folder of the downloaded project files, and coudl not find an error. it was only when retraced my steps on the the BadgBackground.swift file that I learned the shape was correct until I reached the part of the tutorial when you change the fill from .black to .linearGradient

I have concluded that it is definitely the gradient addition at the end of the 'Draw Badge Background' section. All works well as long as the Hexagon is a solid color. I tried changing the gradient using system colors instead of using the colors declared in the gradientStart & gradientEnd variables.

Gradient(colors: [Color(.blue), Color(.red)]),

Even though the gradient changes using blue and red, it still does not completely fill the shape. I redeclared the variable colors using system colors:

static let gradientStart: Color = Color(.black)//= Color(red: 239.0 / 255, green: 120.0 / 255, blue: 221.0 / 255)

static let gradientEnd: Color = Color(.pink)//Color(red: 239.0 / 255, green: 172.0 / 255, blue: 120.0 / 255)

Then used the declared variables in the Gradient (colors: []) as in the tutorial's declaration and still had the same result where the shape was not completely filled with the gradient.

Commenting out

.aspectRatio(contentMode: .fit) 

does not affect the fill.

Just to see what would happen, I added:

.stroke(.green, lineWidth: 4)

under the .fill declaration and the outlined assumed the correct shape of the of Hexagon regardless whether the fill was solid or gradient.

So it appears xCode knows the correct shape and this is definitely narrowed down to the gradient fill.

adding a stroke beneath the fill declaration resulted in the following:

This allowed me to be sure that the hexagon was actually visible so I could move forward with the tutorial.

I'm attaching my copy of BadgeBackground.swift for reference:

//
//  BadgeBackground.swift
//  Landmarks
//  Adjusted to compensate for gradient fill only paritally filling the hexagon shape
//

import SwiftUI

struct BadgeBackground: View {
    
    var body: some View {
        GeometryReader { geometry in
            Path { path in
                
                var width: CGFloat = min(geometry.size.width,geometry.size.height)
                let height = width
                let xScale: CGFloat = 0.832
                let xOffset = (width * (1.0 - xScale)) / 2.0
                width *= xScale
                path.move(
                    to: CGPoint(
                        x: width * 0.95 + xOffset,
                        y: height * (0.20 + HexagonParameters.adjustment)
                    )
                )
                //add curves ot corners
                HexagonParameters.segments.forEach { segment in
                    path.addLine(
                        to: CGPoint(
                            x: width * segment.line.x + xOffset,
                            y: height * segment.line.y
                        )
                    )
                    path.addQuadCurve(
                        to: CGPoint(
                            x: width*segment.curve.x + xOffset,
                            y: height*segment.curve.y
                        ),
                        control:
                            CGPoint(
                                x:width*segment.control.x + xOffset,
                                y:height*segment.control.y
                            )
                    )
                    
                }
            }
            .fill(.linearGradient(
                /*adding the gradient resulted in the hexagon not being completely filled with color.  Added a stroke below to show the shape of the Hexagon.  Verified duplication of issue at https://developer.apple.com/forums/thread/773991*/
                    Gradient(colors: [Self.gradientStart,Self.gradientEnd]),
                    startPoint: UnitPoint(x: 0.5, y: 0),
                    endPoint: UnitPoint(x: 0.5, y: 0.6)
                )
            )
            //add a stroke to see the shape of the hexagon regardless of gradient or solid fill.
            .stroke(.blue, lineWidth: 1)
        }
        .aspectRatio(contentMode: .fit)
    }
    /*Gradient fill color range*/
    static let gradientStart: Color = Color(red: 239.0 / 255, green: 120.0 / 255, blue: 221.0 / 255)
    static let gradientEnd: Color = Color(red: 239.0 / 255, green: 172.0 / 255, blue: 120.0 / 255)
}
#Preview {
    BadgeBackground()
}