Create a Chess Board in SwiftUI using Nested Loop


In this article, I am going to share SwiftUI code for creating a chess board using a Nested loop. To achieve this task, we are going to use the nested ForEach loop.

If you already played chess, then you definitely know that in each row and column, the total number of cells is 8. So let’s create a variable countCell and assign the integer 8 that reflects the number of cells in a row:

let countCell = 8

Now start a VStack with the spacing amount 2:

VStack(spacing:2) {

}

Inside our VStack, let’s use the ForEach loop and use HStack inside it:


        VStack(spacing:2) {
            
                ForEach(1...countCell, id:\.self) { row in
                    HStack(spacing:2) {
                       
                    }
                }
            
        }

Now let’s use the nested ForEach loop and inside it use all the necessary code to create our chessboard cell:

  
        VStack(spacing:2) {
            ForEach(1...countCell, id:\.self) { row in
                HStack(spacing:2) {
                    ForEach(1...countCell, id:\.self) { cell in
                        ZStack {
                            Rectangle()
                                .fill(((row+cell)%2 == 0) ? Color(#colorLiteral(red: 0.9686, green: 0.9059, blue: 0.7922, alpha: 1)) : Color(#colorLiteral(red: 0.3373, green: 0.3294, blue: 0.2784, alpha: 1)))
                                .frame(width: 38, height: 38)
                        }
                    }
                }
            }
        }

You can see that, we have used nested ForEach loop inside HStack and in that loop we created ZStack. We are using Rectangle to create rectangle size cells. The loops we created generated 8×8 cells just like we can see it in a real chessboard.

We are checking if the order of the cell is even or odd and depending on this we set the color of the cell:


                            Rectangle()
                                .fill(((row+cell)%2 == 0) ? Color(#colorLiteral(red: 0.9686, green: 0.9059, blue: 0.7922, alpha: 1)) : Color(#colorLiteral(red: 0.3373, green: 0.3294, blue: 0.2784, alpha: 1)))
                                .frame(width: 38, height: 38)

Complete and final SwiftUI code for creating a chessboard

Below is given the complete and final code of the Swift file to create the chess board:

import SwiftUI

struct ContentView: View {
    
    var body: some View {

        let countCell = 8
        
        VStack(spacing:2) {
            ForEach(1...countCell, id:\.self) { row in
                HStack(spacing:2) {
                    ForEach(1...countCell, id:\.self) { cell in
                        ZStack {
                            Rectangle()
                                .fill(((row+cell)%2 == 0) ? Color(#colorLiteral(red: 0.9686, green: 0.9059, blue: 0.7922, alpha: 1)) : Color(#colorLiteral(red: 0.3373, green: 0.3294, blue: 0.2784, alpha: 1)))
                                .frame(width: 38, height: 38)
                        }
                    }
                }
            }
        }
         
        
    }
    
}

Below is how the chessboard will look on an iOS device or on emulator:

Chess Board on an iOS device in SwiftUI