Turning list section row into a button

Question

I have a list with 3 sections. First and second section shows data in the rows, but there is button in between, so I created button in a section. However due to it being in the list section, I see white padding besides the button.

Code:

import SwiftUI
import Foundation

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                List {
                    Section(header: Text("Section A")) {
                        Text("Section A")
                    }
                    
                    Button { } label: {
                        HStack {
                            Spacer()
                            Image(systemName: "calendar.badge.plus").font(.body.bold()).foregroundColor(Color.blue).padding(.trailing, 5.0)
                            Text("Add to Calendar").font(.body.bold()).foregroundColor(Color.blue)
                            Spacer()
                        }
                        .frame(maxWidth: .infinity)
                        .contentShape(Rectangle())
                    }
                    .frame(width: UIScreen.main.bounds.width - 60.0, height: 44.0)
                    .background(Color.blue.opacity(0.5))
                    .cornerRadius(10.0)
                    .contentShape(Rectangle())
                    
                    Section(header: Text("Section C")) {
                        Text("Section C")
                    }
                }
            }
        }
    }
}

How do I remove white padding around "Add to Calendar" button? Or other option is how do I set the white padding to blue color i.e. button background color?

Answer 1

The following line is problematic as UIScreen is rarely used in SwiftUI.

.frame(width: UIScreen.main.bounds.width - 60.0, height: 44.0)

Anyway, the following is what I have, after adding two lines.

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                List {
                    Section(header: Text("Section A")) {
                        Text("Section A")
                    }
                    
                    Button { } label: {
                        HStack {
                            Spacer()
                            Image(systemName: "calendar.badge.plus").font(.body.bold()).foregroundColor(Color.blue).padding(.trailing, 5.0)
                            Text("Add to Calendar").font(.body.bold()).foregroundColor(Color.blue)
                            Spacer()
                        }
                        .frame(maxWidth: .infinity)
                        .contentShape(Rectangle())
                    }
                    .frame(width: .infinity, height: 44.0)
                    .background(Color.blue.opacity(0.5))
                    .cornerRadius(10.0)
                    .contentShape(Rectangle())
                    .listRowInsets(EdgeInsets()) //<<<<<<<< here
                    
                    Section(header: Text("Section C")) {
                        Text("Section C")
                    }
                }
                .environment(\.defaultMinListRowHeight, 0) //<<<<<<<< here
            }
        }
    }
}

The following screenshot shows the result of the code above.