How can I draw vertical line between Row's views in the Jetpack Compose Canvas?

Question

I have a Row that which there are 3 texts in it, I want to draw a vertical line between each of the texts. how can I do it?

 Box(modifier = Modifier.padding(top = 24.dp, bottom = 24.dp)) {
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .clip(shape),
                    horizontalArrangement = Arrangement.Center
                ) {
                    SheetScreen.values().map { it.title }.forEachIndexed { index, title ->
                        Text(
                            title,
                            style = AppFont.PoppinsTypography.caption,
                            textAlign = TextAlign.Center,
                            color = if (tabIndex == index) AppColor.neutralColor.DOCTOR else AppColor.brandColor.BRIGHT_NAVY_BLUE,
                            modifier = Modifier
                                .weight(1f)
                            )
                        )
                       
                    }
                }
            }

Answer 1

You can use the Divider composable with the width(xx.dp) modifier.

Row(
   modifier = Modifier
        .height(IntrinsicSize.Min)
        .fillMaxWidth(),
   horizontalArrangement = Arrangement.Center
){

    Text("1st Text", //....)

    Divider(
        color = Color.Red,
        modifier = Modifier
            .fillMaxHeight()
            .width(1.dp)
    )

    Text("2nd text",//....)

    Divider(
        color = Color.Red,
        modifier = Modifier
            .fillMaxHeight()
            .width(1.dp)
    )
    Text("3rd text",//....)
    
}