I’ve been learning Swift and app design and practicing by replicating the styles of existing applications. Recently, I faced a challenge with positioning a ‘+’ button directly below a list in SwiftUI.

Problem Details
I want to achieve a design similar to this Todo list app to copy

My main challenge is placing the ‘+’ button right below the list. I’ve experimented with two approaches:

(1) Button Below the List in a VStack:
This method positions the button directly below the list, but it results in hard edges at the bottom of the last list item.

(2) Button in a Section Below the List:
While this positions the button correctly in a new Section, it creates excessive space, pushing the button too far down from the last list item.

Code Examples

Concept (1): Button Below the List

var body: some View {
    VStack {
        List {
            ForEach(items, id: .self) { item in
                HStack {
                    Image(systemName: "circle") // Placeholder for checkbox
                    Text(item)
                }
            }
            .onDelete(perform: deleteItem)
            
            Button(action: addItem) {
                HStack {
                    Image(systemName: "plus")
                        .foregroundColor(.black) // Color of the plus icon
                }
            }
            .listRowBackground(Color.clear)
        }
    }
}

concept (1)

Concept (2): Button in a Section Below the List

var body: some View {
    VStack {
        List {
            ForEach(items, id: .self) { item in
                HStack {
                    Image(systemName: "circle") // Placeholder for checkbox
                    Text(item)
                }
            }
            .onDelete(perform: deleteItem)
            
            Section {
                Button(action: addItem) {
                    HStack {
                        Image(systemName: "plus")
                            .foregroundColor(.black) // Color of the plus icon
                    }
                }
                .listRowBackground(Color.clear)
            }
        }
    }
}

concept (2)

Question

Does anyone have suggestions on how to position the ‘+’ button to seamlessly sit below the last item in the list without creating gaps or hard edges? Any advice or alternative approaches would be greatly appreciated!