How to give shadow with cornerRadius to a Button inside ScrollView and HStack in SwiftUI

Question

I'm trying to give a shadow to Button using following code.

   VStack{
                HStack(){
                    Text("Menu")
                        .font(.title3)
                        .fontWeight(.bold)
                    Spacer()
                    Image(systemName: "magnifyingglass")
                }.padding(.horizontal)
                ScrollView(.horizontal){
                    HStack(){
                        ForEach(menuOptions, id: \.self){m in
                            MenuButtons(title:"\(m)")
                        }
                    }.frame(height:50)
                    
                }
                .padding(.horizontal)
                .background(.clear)
            }.background(.clear)

And my MenuButton struct:

struct MenuButtons: View {
var title: String
var body: some View {
    Button(action:{}, label: {
        Text(title)
            .font(.system(size: 17))
            .frame(width:120, height:35)
            .cornerRadius(10)
            .foregroundColor(Color("secondaryColor"))
            .background(Rectangle().fill(.white).shadow(color:.gray,radius:2).cornerRadius(10))
        
        
    })
    
    
}

}

this would be my output:

Expected output:

In above image you can see that shadow is not proper.

How can I achieve the following?

Answer 1

@Dans code works. But its not so much the .tint as the .background of the button, and the order of applying modifiers.

You used a rectangle, then applied shadow, then used cornerRadius. In this order the cornerRadius "cuts off" the shadow applied before.

If you use RoundedRectangle instead (as Dan did) it works fine.

.background(
    RoundedRectangle(cornerRadius: 12)
        .fill(.white)
        .shadow(color:.gray,radius: 2, y: 1)
)

Or you just change the ordering of the modifiers. First cornerRadius, then shadow.

.background(
    Rectangle()
        .fill(.white)
        .cornerRadius(12)
        .shadow(color:.gray,radius: 2, y: 1)
)

Answer 2

I believe adding a .buttonStyle(.borderedProminent) and .tint(.clear) may help achieve your desired look. Something like this;

struct ButtonView: View {
    let menuOptions = ["Entradas", "Bebidas", "Plato Fuerte", "Postre"]

    var body: some View {

        VStack{
            HStack(){
                Text("Menu")
                    .font(.title3)
                    .fontWeight(.bold)
                Spacer()
                Image(systemName: "magnifyingglass")
            }.padding(.horizontal)

            ScrollView(.horizontal) {
                HStack {
                    ForEach(menuOptions, id: \.self){ m in
                        MenuButtons(title:"\(m)")
                    }
                }.frame(height:50)
            }
            .padding(.horizontal)
            //.background(.clear)
        }//.background(.clear)
    }
}

struct MenuButtons: View {
    var title: String

    var body: some View {
        Button(action:{ }, label: {
            Text(title)
                .font(.system(size: 17))
                .frame(width: 120, height: 35)
                .cornerRadius(10)
                .foregroundColor(.black)
                .background(
                    RoundedRectangle(cornerRadius: 10, style: .circular)
                    .fill(.white)
                    .shadow(color: .gray, radius: 2, x: -1, y: 2)
                )
        })
        .buttonStyle(.borderedProminent)
        .tint(.clear)
    }
}

Result