How to align two extreme elements in a Row to the left and the right respectively in Jetpack Compose?

Question

I have a CardOption component in Jetpack Compose:

@Composable
fun CardOption(text: String) {
    Column(
        horizontalAlignment = Alignment.Start,
        modifier = Modifier.fillMaxWidth()
    ) {
        // Title

        @OptIn(ExperimentalTextApi::class)
        val fontFamily =
            FontFamily(
                Font(
                    R.font.sfprotextbold,
//                        variationSettings = FontVariation.Settings(
//                            FontVariation.weight(950),
//                            FontVariation.width(30f),
//                            FontVariation.slant(-6f),
//                        )
                )
            )
        val textStyle = TextStyle(
            fontFamily = fontFamily
        )

        Divider(
            color = Color.LightGray, // You can change the color as needed
            thickness = 1.dp, // You can adjust the thickness as needed
            modifier = Modifier.fillMaxWidth()
        )

        OutlinedButton(
            colors = ButtonDefaults.outlinedButtonColors(Color.Transparent),
            border = BorderStroke(0.dp, Color.Transparent),
            modifier = Modifier
                .fillMaxWidth()
                .background(
                    color = Color.Transparent
                )
                .height(100.dp),
            shape = RectangleShape,
            onClick = {
            }
        ) {
            Row(modifier = Modifier.fillMaxWidth()
                                    .padding(start = 16.dp, top = 16.dp, end = 16.dp, bottom = 16.dp),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween) {

                Image(
                    painter = painterResource(id = R.drawable.black_credit_card), // Replace with your image resource
                    contentDescription = null, // Provide an appropriate content description
                    modifier = Modifier
                        .size(200.dp)
                )


                Text(
                    modifier = Modifier.padding(horizontal = 0.dp, vertical = 0.dp),
                    color = Color.Black,
                    text = text,
                    fontSize = 15.sp,
                    style=textStyle
                )
                Text(
                    modifier = Modifier.padding(horizontal = 0.dp, vertical = 0.dp),
                    color = Color.Black,
                    text = ">",
                    fontSize = 15.sp,
                    style=textStyle
                )
            }
        }

        Divider(
            color = Color.LightGray, // You can change the color as needed
            thickness = 1.dp, // You can adjust the thickness as needed
            modifier = Modifier.fillMaxWidth()
        )

    }
}

It renders like this on the UI:

However, I want the image to align to the extreme left (with a minor padding) and the right arrow (">") to align to the extreme right. I tried all kinds of arrangements:

1. Arragement.Start
2. Arrangement.SpaceBetween
3. Arrangement.SpaceEvenly
4. Arrangement.End

but nothing works. How can I achieve this?

Answer 1

Place the two text components in a separate row like this:

        Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = 16.dp, top = 16.dp, end = 16.dp, bottom = 16.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween
    ) {

        Image(
            painter = painterResource(id = R.drawable.black_credit_card), // Replace with your image resource
            contentDescription = null, // Provide an appropriate content description
            modifier = Modifier
                .size(200.dp)
        )


        Row {
            Text(
                modifier = Modifier.padding(horizontal = 0.dp, vertical = 0.dp),
                color = Color.Black,
                text = text,
                fontSize = 15.sp,
                style = textStyle
            )
            Text(
                modifier = Modifier.padding(horizontal = 0.dp, vertical = 0.dp),
                color = Color.Black,
                text = ">",
                fontSize = 15.sp,
                style = textStyle
            )
        }
    }