A modern programming language that makes developers happier.

kotlinlang

image.png

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

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

    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        OutlinedTextField(
            modifier = Modifier,
            value = text,
            onValueChange = { value -&gt;
                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"
                )
            }
        }
    }
}```


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

&gt; It has space between them
Well, isn't that what `Arrangement.SpaceBetween` does?

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

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

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

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.