Creating custom layouts

Sometimes, you may want to lay children out one after another in a row and start a new row when the current one has been filled. The CustomLayoutDemo sample app, as shown in the following screenshot, shows you how to do this. It creates 43 randomly colored boxes that vary in width and height:

Figure 4.4 – Sample CustomLayoutDemo app

Let's start by looking at the composable function that creates colored boxes:

@Composable
fun ColoredBox() {
  Box(
    modifier = Modifier
      .border(
        width = 2.dp,
        color = Color.Black
      )
      .background(randomColor())
      .width((40 * randomInt123()).dp)
      .height((10 * randomInt123()).dp)
  ...