Remove the left and right Padding of each row in the List in SwiftUI

In this tutorial, we will see how to remove the left and right Padding of each row in the List in SwiftUI.

We can remove the left and right padding of a list by using the listRowInsets() modifier. This modifier basically customizes the insets of each row in the list and effectively controls the padding on both sides.

Now, follow the steps below to remove the spaces.

Create a List

First of all, I will create a list using the List view and see how the list will appear, especially the left and right spaces of each row.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            ForEach(1..<8) { row in
                  Text("Row \(row)")
              }
        }
        
    }
}

Output:

As we can see in the above output, there is a little space in front of each raw that we want to remove.

Remove the left and right Padding of each row in the List

Now, I will apply the listRowInsets() modifier to the List specifying the EdgeInsets() within this modifier to remove the spacing.

Syntax

.listRowInsets(EdgeInsets())

The EdgeInsets() will create an inset with zero points on all sides, this will remove any padding around the list row.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            ForEach(1..<8) { row in
                  Text("Row \(row)")
              }
            .listRowInsets(EdgeInsets()) // To remove the spacing
        }
    }
}

Output:

As we can see the spaces have been removed.