[FIXED] How to add left border in a Row/Column/Card Compose

Issue

I'm trying to add a left/start vertical border to view (Column), Not able to get the solution. as of now was trying to achieve using a divider inside the column it also need a height, but it depends on the contents inside the column, sometime it may grow.

 Column(modifier = Modifier.padding(start = 34.dp)) {
                Divider(
                    color = Color.Red,
                    modifier = Modifier
                        .height(100.dp)
                        .padding(end = 34.dp).width(2.dp)
                )

Solution

You can use the drawWithCache modifier using the drawLine function.

Something like:

Column(modifier =
    Modifier
        .padding(start = 34.dp)
        .size(100.dp, 75.dp)
        .drawWithCache {
            onDrawWithContent {

                // draw behind the content the vertical line on the left
                drawLine(
                    color = Color.Red, 
                    start = Offset.Zero, 
                    end = Offset(0f, this.size.height),
                    strokeWidth= 1f
                )

                // draw the content
                drawContent()
            }
        }
){
    //...content
}

If you want to use a Divider you can use fillMaxHeight() applying an intrinsic measurements to its parent container.

Something like:

Row(modifier = Modifier.height(IntrinsicSize.Min)) {

    Divider(
        color = Color.Red,
        modifier = Modifier
            .fillMaxHeight()  //important
            .width(2.dp)
    )
     
   Box(Modifier.fillMaxWidth().height(100.dp).background(Yellow))
}

Answered By - Gabriele Mariotti
Answer Checked By - Senaida (JavaFixing Volunteer)