How to Snap the Row/Column elements to end in JetPack Compose

Question

I am using the below code to show the textviews, image and a textfield to show at each corners after the image (start and end). It is basically a Card with Image on the start and later a column with a two text views and with another column with a textview and basictextfield for input.

@Composable
fun BaseCard() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight(Alignment.CenterVertically, true)
            .wrapContentHeight()
            .clip(RoundedCornerShape(8.dp)),
        elevation = 10.dp,
        backgroundColor = Color.White
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp),
            verticalAlignment = Alignment.CenterVertically
        )
        {
            Image(
                modifier = Modifier
                    .size(35.dp, 35.dp) //50dp
                    .clip(RoundedCornerShape(8.dp))
                    .clickable {
                        navController.navigate("meta") {
                            launchSingleTop = true
                        }
                    },
                painter = img,
                alignment = Alignment.Center,
                contentDescription = "",
                contentScale = ContentScale.Crop,
            )
            Spacer(modifier = Modifier.width(8.dp))
            Column(horizontalAlignment = Alignment.Start) {
                Text(
                    text = "US Dollar" + "($)",
                    color = Color.Gray, 
                    style = Typography.subtitle2
                )
                Text(
                    text = "USD",
                    Modifier.padding(0.dp),
                    color = MaterialTheme.colors.onPrimary,
                    style = Typography.h5,
                )
            }
            Spacer(modifier = Modifier.width(8.dp))
            Column(horizontalAlignment = Alignment.End) {
                Text(
                    text = "Amount",
                    color = Color.Gray, 
                    style = Typography.subtitle2
                )                   
                BasicTextField(
                    value = typedValue,
                    onValueChange = {
                        ----
                    },
                    textStyle = LocalTextStyle.current.copy(
                        fontFamily = NunitoFontFamily,
                        fontWeight = FontWeight.W600,
                        letterSpacing = 0.sp,
                        fontSize = 24.sp,
                        textAlign = TextAlign.End
                    ),
                    keyboardOptions = KeyboardOptions(
                        keyboardType = KeyboardType.Number,
                        imeAction = ImeAction.Done
                    )
                )
            }
        }
    }
}

However, it is showing up as below.

How to remove the extra space and align the elements properly at each end?

Answer 1

There are multiple ways to implement what you ask

One is using Spacer(modifier=Modifier.weight(1f) instead of
Spacer(modifier = Modifier.width(8.dp))

for the Spacer here, since it's inside a Row it will take all the space that don't have weight modifier.

      // Change this Spacer's modifier to Modifier.weight(1f) 
      Spacer(modifier = Modifier.width(8.dp))
        Column(horizontalAlignment = Alignment.End) {
            Text(
                text = "Amount",
                color = Color.Gray, 
                style = Typography.subtitle2
            )                   
            BasicTextField(
                value = typedValue,
                onValueChange = {
                    ----
                },
                textStyle = LocalTextStyle.current.copy(
                    fontFamily = NunitoFontFamily,
                    fontWeight = FontWeight.W600,
                    letterSpacing = 0.sp,
                    fontSize = 24.sp,
                    textAlign = TextAlign.End
                ),
                keyboardOptions = KeyboardOptions(
                    keyboardType = KeyboardType.Number,
                    imeAction = ImeAction.Done
                )
            )
        }

Second one is to use a Box instead of Row and have 2 composables one aligned to

Box(modifier = Modifier
          .fillMaxWidth()
          .padding(8.dp)) {
    Column(modifier = Modifier.align(Alignment.CenterStart)) {
    
    }

    Column(modifier = Modifier.align(Alignment.CenterEnd)) {

    }
}