https://kotlinlang.org logo
#compose
Title
# compose
n

Nick

01/27/2022, 5:06 PM
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?
Copy code
@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)
            )
        }
    }
}
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?
c

Colton Idle

02/06/2022, 8:45 PM
Ooh. curious if you ever figured out a solution.
2 Views