Android GridView using Jetpack Compose

package com.example.newcanaryproject

// on below line we are creating a 
// modal class for our data class.
data class GridModal(
   
    // on below line we are creating two variable 
    // one is for language name which is string.
    val languageName: String,
    
    // next variable is for our
    // image which is an integer.
    val languageImg: Int
)

package com.example.newcanaryproject.ui.theme

import androidx.compose.ui.graphics.Color

val Purple200 = Color(0xFF0F9D58)
val Purple500 = Color(0xFF0F9D58)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)

// on below line we are adding different colors.
val greenColor = Color(0xFF0F9D58)

package com.example.newcanaryproject

import android.content.Context
import android.os.Bundle

import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.GridCells
import androidx.compose.foundation.lazy.LazyVerticalGrid
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.*
import com.example.newcanaryproject.ui.theme.*
import java.util.*

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NewCanaryProjectTheme {
                // on below line we are specifying 
                // background color for our application
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    // on below line we are specifying theme as scaffold.
                    Scaffold(
                        // in scaffold we are specifying top bar.
                        topBar = {
                            // inside top bar we are specifying background color.
                            TopAppBar(backgroundColor = greenColor,
                                // along with that we are specifying title for our top bar.
                                title = {
                                    // in the top bar we are specifying tile as a text
                                    Text(
                                        // on below line we are specifying
                                        // text to display in top app bar.
                                        text = "Grid View Example",
                                        
                                        // on below line we are specifying 
                                        // modifier to fill max width.
                                        modifier = Modifier.fillMaxWidth(),
                                        
                                        // on below line we are specifying text alignment.
                                        textAlign = TextAlign.Center,
                                        
                                        // on below line we are specifying color for our text.
                                        color = Color.White
                                    )
                                }
                            )
                        }
                    ) {
                        // on below line we are calling grid 
                        // view method to load our grid view.
                        gridView(LocalContext.current)
                    }
                }
            }
        }
    }
}

// on below line we are creating grid view function for loading our grid view.
@OptIn(ExperimentalFoundationApi::class, ExperimentalMaterialApi::class)
@Composable
fun gridView(context: Context) {
    // on below line we are creating and initializing our array list
    lateinit var courseList: List<GridModal>
    courseList = ArrayList<GridModal>()
    
    // on below line we are adding data to our list.
    courseList = courseList + GridModal("Android", R.drawable.android)
    courseList = courseList + GridModal("JavaScript", R.drawable.js)
    courseList = courseList + GridModal("Python", R.drawable.python)
    courseList = courseList + GridModal("C++", R.drawable.c)
    courseList = courseList + GridModal("C#", R.drawable.csharp)
    courseList = courseList + GridModal("Java", R.drawable.java)
    courseList = courseList + GridModal("Node Js", R.drawable.nodejs)

    // on below line we are adding lazy 
    // vertical grid for creating a grid view.
    LazyVerticalGrid(
        // on below line we are setting the 
        // column count for our grid view.
        cells = GridCells.Fixed(2),
        // on below line we are adding padding
        // from all sides to our grid view.
        modifier = Modifier.padding(10.dp)
    ) {
        // on below line we are displaying our 
        // items upto the size of the list.
        items(courseList.size) {
            // on below line we are creating a 
            // card for each item of our grid view.
            Card(
                // inside our grid view on below line we are 
                // adding on click for each item of our grid view.
                onClick = {
                    // inside on click we are displaying the toast message.
                    Toast.makeText(
                        context,
                        courseList[it].languageName + " selected..",
                        Toast.LENGTH_SHORT
                    ).show()
                },
                
                // on below line we are adding padding from our all sides.
                modifier = Modifier.padding(8.dp),
                
                // on below line we are adding elevation for the card.
                elevation = 6.dp
            ) {
                // on below line we are creating a column on below sides.
                Column(
                    // on below line we are adding padding 
                    // padding for our column and filling the max size.
                    Modifier
                        .fillMaxSize()
                        .padding(5.dp),
                   
                    // on below line we are adding 
                    // horizontal alignment for our column
                    horizontalAlignment = Alignment.CenterHorizontally,
                    
                    // on below line we are adding 
                    // vertical arrangement for our column
                    verticalArrangement = Arrangement.Center
                ) {
                    // on below line we are creating image for our grid view item.
                    Image(
                        // on below line we are specifying the drawable image for our image.
                        painter = painterResource(id = courseList[it].languageImg),
                        
                        // on below line we are specifying
                        // content description for our image
                        contentDescription = "Javascript",
                        
                        // on below line we are setting height
                        // and width for our image.
                        modifier = Modifier
                            .height(60.dp)
                            .width(60.dp)
                            .padding(5.dp)
                    )
                    
                    // on the below line we are adding a spacer.
                    Spacer(modifier = Modifier.height(9.dp))
                    
                    // on below line we are creating 
                    // a text for our grid view item
                    Text(
                        // inside the text on below line we are
                        // setting text as the language name 
                        // from our modal class.
                        text = courseList[it].languageName,
                        
                        // on below line we are adding padding 
                        // for our text from all sides.
                        modifier = Modifier.padding(4.dp),
                        
                        // on below line we are 
                        // adding color for our text
                        color = Color.Black
                    )
                }
            }
        }
    }
}