What’s the best way to accomplish this layout? I ...

# compose

[Nick]

What’s the best way to accomplish this layout?

I was thinking about using a FlowRow that contains the `Chip`s for each user, with a TextField that will fill remaining width?

How would I get the TextField to fill the remaining width in the row while also having a minWidth?

[Nick]

@OptIn(ExperimentalMaterialApi::class)
@Composable
private fun SearchAndChip(selectedTeamMembers: List<TeamMember>) {
    var textFieldText by remember { mutableStateOf("User") }
    FlowRow(modifier = Modifier.padding(16.dp),
        mainAxisSpacing = 8.dp, mainAxisSize = SizeMode.Expand
    ) {

        selectedTeamMembers.forEach { member ->
            Chip(onClick = { /*TODO*/ }
            ) {
                Text(member.name)
            }
        }
        Box(Modifier.height(ChipDefaults.MinHeight), contentAlignment = Alignment.CenterStart){
            BasicTextField(
                value = textFieldText,
                onValueChange = { textFieldText = it },
                modifier = Modifier.requiredWidthIn(2.dp)
            )
        }
    }
}

[Nick]

I’m getting close.
Is it better if I make the BasicTextField width be as small as it can be, and when a user selects the FlowRow it’ll select the BasicTextField instead?

[Colton Idle]

Ooh. curious if you ever figured out a solution.