How we can use color grid view in jetpack compose?

Question

I am try to learn jetpack compose in android kotlin, and I have example of emoji grid view in jetpack composer, but instead of the emoji, is it possible to use colors without any text or emoji?

  @ExperimentalFoundationApi
  @Preview(name = "Emoji Gallery")
  @Composable
  fun DemoEmojiGallery() {
    val data = listOf("☕", "🙂", "🥛", "🎉", "📐", "🎯", "🧩", "😄", "🥑")
    val state = rememberScaffoldState()
    val coroutineScope = rememberCoroutineScope()

    Scaffold(
        scaffoldState = state
    ) {
        LazyVerticalGrid(
            cells = GridCells.Fixed(3),
            contentPadding = PaddingValues(8.dp)
        ) {
            items(data) { item ->
                Card(
                    modifier = Modifier.padding(4.dp),
                    backgroundColor = Color(
                        red = Random.nextInt(0, 255),
                        green = Random.nextInt(0, 255),
                        blue = Random.nextInt(0, 255)
                    )
                ) {
                    Text(
                        text = item,
                        fontSize = 42.sp,
                        textAlign = TextAlign.Center,
                        modifier = Modifier
                            .padding(24.dp)
                            .clickable {
                                coroutineScope.launch {
                                    state.snackbarHostState.showSnackbar(
                                        message = "$item was selected"
                                    )
                                }
                            }
                    )
                }
            }
        }
    }
}

Answer 1

This is an example code that it might lead to where you would like to go:

@ExperimentalFoundationApi
@Preview
@Composable
fun Demo() {
    val state = rememberScaffoldState()


    // Create your list of colors.
    // I show you three ways:
    val listOfColors = listOf(
        // Predefined colors like
        Color.Green,
        Color.Black,
        Color.Red,
        Color.Yellow,
        //Custom color hex:
        Color(0xFFF0670A),
        //Custom color RGB
        Color(12, 154, 224, 255),
        Color(241, 7, 230, 255),
        Color(146, 130, 116, 255),
        Color(0, 255, 179, 255)
    )

    Scaffold(
        scaffoldState = state
    ) {
        LazyVerticalGrid(
            cells = GridCells.Fixed(3),
            contentPadding = PaddingValues(8.dp)
        ) {
            // You pass the list of colors and in `items`
            // and then in lambda you get
            // each color from the list.
            items(listOfColors) { myColor ->
                Card(
                    modifier = Modifier
                        .padding(4.dp)
                        // width is handled by LazyVerticalGrid
                        // it is important for you to specify the height.
                        .height(120.dp),
                    // here you change the background with each color from the list
                    backgroundColor = myColor
                ) {
                    // add your content
                }
            }
        }
    }
}

Be sure to import the right items() in this case you want to choose the list item, like below: