Issue displaying Button Text after a MeshGradient applied

Question

Created 21h

Replies 1

Boosts 0

Participants 1

I am creating a Generate note app but I don't see the text in the button when I applied the MeshGradient. I removed the Mesh Gradient and text is there. Need some help to find the issue. I am new to app Development and I am learning how to use it. Below is the code:

import SwiftUI

struct ContentView: View { @State private var inputText: String = "" @State private var isLoading: Bool = false

var body: some View {
    ZStack {
        Color(.systemGray6).edgesIgnoringSafeArea(.all)
        
        VStack (spacing: 20) {
            Text("Generate Notes")
                .font(.title)
                .fontWeight(.bold)
                .frame(maxWidth: .infinity, alignment: .leading)
            
            Text("Transform your thoughts into well-structured notes using artificial intelligence.")
                .font(.subheadline)
                .foregroundStyle(.secondary)
                .frame(maxWidth: .infinity, alignment: .leading)
            
            TextEditor(text: $inputText)
                .frame(height: 200)
                .padding()
                .background(RoundedRectangle(cornerRadius: 16)
                    .fill(Color(.systemGray6)))
                    
           
            
            Button(action: {}) {
                HStack {
                    if isLoading {
                        ProgressView()
                            .tint(.white)
                    } else {
                        Image(systemName: "sparkles")
                    }
                    Text(isLoading ? "Generating..." : "Generate Notes")
                    
                }
                
                .padding()
                .frame(maxWidth: .infinity)

                .background(
                    MeshGradient(width: 3, height: 3, points: [
                    .init(0, 0), .init(0.5, 0), .init(1, 0),
                    .init(0, 0.5), .init(0.5, 0.5), .init(1, 0.5),
                    .init(0, 1), .init(0.5, 1), .init(1, 1)
                ], colors: [
                    .blue, .purple, .indigo,
                    .orange, .white, .blue,
                    .yellow, .green, .mint
                ])
               )
               
                
                .mask(
                    RoundedRectangle(cornerRadius: 16)
                        .stroke(lineWidth: 16)
                        .blur(radius: 8)
                )
          
                .overlay(
                    RoundedRectangle(cornerRadius: 16)
                       
                        .stroke(.white, lineWidth: 1)
                        .blur(radius: 1)
                        .blendMode(.overlay)
                        
                )

                .background(.black)
                .foregroundColor(.white)
                .cornerRadius(16)
            
                .background(
                    RoundedRectangle(cornerRadius: 16)
                        .stroke(.black.opacity(0.5), lineWidth: 1)
                )
                .shadow(color: .black.opacity(0.15), radius: 20, x: 0, y: 20)
                .shadow(color: .black.opacity(0.1), radius: 15, x: 0, y: 15)
                
              
            }
            
            
            .disabled(isLoading || inputText.isEmpty)
            
            Spacer()
        }
        .padding(32)
        .background(Color(.systemBackground))
        .cornerRadius(44)
        .shadow(color: .black.opacity(0.1), radius: 20, x:0, y:10)
    }
}

}

#Preview { ContentView() }

Boost

Answer 1

HackerInTheWire OP

18h

Here is my initial code. for the Generate Notes app: import SwiftUI

struct ContentView: View { @State private var inputText: String = "" @State private var isLoading: Bool = false

var body: some View {
    ZStack {
        Color(.systemGray6).edgesIgnoringSafeArea(.all)
        
        VStack (spacing: 20) {
            Text("Generate Notes")
                .font(.title)
                .fontWeight(.bold)
                .frame(maxWidth: .infinity, alignment: .leading)
            
            Text("Transform your thoughts into well-structured notes using artificial intelligence.")
                .font(.subheadline)
                .foregroundStyle(.secondary)
                .frame(maxWidth: .infinity, alignment: .leading)
            
            TextEditor(text: $inputText)
                .frame(height: 200)
                .padding()
                .background(RoundedRectangle(cornerRadius: 16)
                    .fill(Color(.systemGray6)))
            
            Button(action: {}) {
                HStack {
                    if isLoading {
                        ProgressView()
                            .tint(.white)
                    } else {
                        Image(systemName: "sparkles")
                    }
                    Text(isLoading ? "Generating..." : "Generate Notes")
                    
                }
                
                .padding()
                .frame(maxWidth: .infinity)
                
                .background(
                    AnimatedMeshGradient()
                        .mask(
                            RoundedRectangle(cornerRadius: 16)
                                .stroke(lineWidth: 16)
                                .blur(radius: 8)
                        )
                        .overlay(
                            RoundedRectangle(cornerRadius: 16)
                                .stroke(.white, lineWidth: 3)
                                .blur(radius: 2)
                                .blendMode(.overlay)
                            
                        )
                        .overlay(
                            RoundedRectangle(cornerRadius: 16)
                                .stroke(.white, lineWidth: 1)
                                .blur(radius: 1)
                                .blendMode(.overlay)
                        )
                    
                )
                .foregroundStyle(.white)
                .background(.black)
                .cornerRadius(16)
                .background(
                    RoundedRectangle(cornerRadius: 16)
                        .stroke(.black.opacity(0.5), lineWidth: 1)
                )
                .shadow(color: .black.opacity(0.15), radius: 20, x: 0, y: 20)
                .shadow(color: .black.opacity(0.1), radius: 15, x: 0, y: 15)
                
                
            }
            
            
            .disabled(isLoading || inputText.isEmpty)
            
            Spacer()
        }
        .padding(32)
        .background(Color(.systemBackground))
        .cornerRadius(44)
        .shadow(color: .black.opacity(0.1), radius: 20, x:0, y:10)
    }
}

}

#Preview { ContentView() }

The issue I had was that in the Generate Notes button I couldn't see the white text due to the gradient. I resolved the issue by moving the MeshGradient to a new file by creating a new file from template and adding the following code: import SwiftUI

struct AnimatedMeshGradient: View { var body: some View{ MeshGradient(width: 3, height: 3, points: [ .init(0, 0), .init(0.5, 0), .init(1, 0), .init(0, 0.5), .init(0.5, 0.5), .init(1, 0.5), .init(0, 1), .init(0.5, 1), .init(1, 1) ], colors: [ .blue, .purple, .indigo, .orange, .white, .blue, .yellow, .green, .mint ]) } }

#Preview { AnimatedMeshGradient() } After I save the file I when to the bottom and add the following code after the second overlay: .foregroundStyle(.white) .foregroundStyle(.white)

0