How do i achieve following UI with row? Code is in thread which does not produce desired output

# compose

[rajesh]

How do i achieve following UI with row? Code is in thread which does not produce desired output

[rajesh]

@Composable
fun CreateCommentView(
    onSendClick: (String) -> Unit
) {
    var text by remember { mutableStateOf(TextFieldValue("")) }

    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        OutlinedTextField(
            modifier = Modifier,
            value = text,
            onValueChange = { value ->
                text = value
            },
            placeholder = { Text(text = "Add a comment") }
        )
        Box(
            modifier = Modifier
                .border(1.dp, Color.Gray, RectangleShape)
        ) {
            IconButton(onClick = { onSendClick(text.text) }) {
                Icon(
                    painterResource(id = R.drawable.ic_outlined_send),
                    modifier = Modifier.iconSize(),
                    contentDescription = "send"
                )
            }
        }
    }
}

[rajesh]

It has space between them

[rajesh]

i want box to be full in height and outlined text field should fill all available space without overlapping box

[Filip Wiesner]

It has space between them

Well, isn't that what Arrangement.SpaceBetween does?

[rajesh]

sure it does. but if i remove it, then both view became attached, leaving some space at the end

[Rafiul Islam]

You can use Modifier.weight(1f) in OutlinedTextField to take all the available space. In that case you can remove horizontalArrangement = Arrangement.SpaceBetween,

[rajesh]

@Rafiul Islam thanks. working now. initially i tried weight(2f) for text field and weight(1f) for box but didn't worked

[Rafiul Islam]

It would work if you just didn't use weight (1f) for the box. It doesn't matter whether you put 1f, 2f, 100f in one component, unless you give weight to other components it will take all the available space after placing others.