I wrote an AutoCompletet TextField in Jetpack Compose. I used this view in a Row and between two others' views. The side views move down when autocomplete dropdown is opened. How can I fix this issue?
The Link of GIF file is end of page. in the GIF you can see side views of Autocomplete move to bottom when the suggest items is shows.
My AutoComplete codes:
#Composable
fun AutoCompleteTextField(
modifier: Modifier = Modifier,
list: List<Product>,
searchTerm: TextFieldValue,
updateSearchTerm: (TextFieldValue) -> Unit,
) {
var product by remember {
mutableStateOf("")
}
var heightTextFields by remember {
mutableStateOf(55.dp)
}
var textFieldSize by remember {
mutableStateOf(Size.Zero)
}
var expanded by remember {
mutableStateOf(false)
}
val interactionSource = remember {
MutableInteractionSource()
}
Column(
modifier = modifier
.width(200.dp)
// .padding(30.dp)
.clickable(
interactionSource = interactionSource,
indication = null,
onClick = {
expanded = false
}
)
) {
Column(modifier = modifier.fillMaxWidth()) {
Row(
modifier = modifier
.border(BorderStroke(width = 1.dp, color = Color.LightGray))
.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically
) {
IconButton(onClick = {product = "" }) {
Icon(
imageVector = Icons.Filled.Add,
contentDescription = "Add",
modifier = modifier
.padding(4.dp)
.align(Alignment.CenterVertically)
)
}
TextField(
modifier = Modifier
.fillMaxWidth()
.height(heightTextFields)
.onGloballyPositioned { coordinates ->
textFieldSize = coordinates.size.toSize()
},
value = product,
onValueChange = {
product = it
expanded = true
},
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.Transparent,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
cursorColor = Color.Black
),
textStyle = TextStyle(
fontFamily = shabnamFontFamily,
color = MaterialTheme.colorScheme.secondary,
fontWeight = FontWeight.Bold,
fontSize = 14.sp,
),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Text,
imeAction = ImeAction.Done
),
singleLine = true,
)
}
AnimatedVisibility(visible = expanded) {
Card(
modifier = modifier
.padding(horizontal = 4.dp)
.width(textFieldSize.width.dp),
elevation = 10.dp,
shape = RoundedCornerShape(bottomStart = 4.dp, bottomEnd = 4.dp)
) {
LazyColumn(
modifier = Modifier.heightIn(max = 150.dp),
) {
if (product.isNotEmpty()) {
items(
list.filter {
it.productName.lowercase()
.contains(product.lowercase())
}
) { item ->
ProductItems(title = item.productName) { title ->
product = title
expanded = false
}
}
} else {
items(
items =
list
) { item ->
ProductItems(title = item.productName) { title ->
product = title
expanded = false
}
}
}
}
}
}
}
}
}
}
Screen GIF file
Related
Below is the code for custom TextField. I have used TextField in Fragment and DialogFragment. I am having some issues while using it in DialogFragment. The phone keyboard opens when I click on the TextField below when it is used in Fragment. But even though it focuses on the TextField, the keyboard doesn't pop up when it is used in DialogFragment.
fun MyTextFiled(
search: (String) -> Unit,
query: String?
) {
var state by rememberSaveable { mutableStateOf(query) }
Card(
shape = RoundedCornerShape(dimensionResource(id = R.dimen.padding_5dp)),
) {
Row(
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.height(36.dp).background(colorResource(id = R.color.background_wallet_searchView)),
) {
Icon(
painter = painterResource(id = R.drawable.ic_new_search),
contentDescription = null,
modifier = Modifier
.size(20.dp)
.padding(start = dimensionResource(id = R.dimen.padding_5dp)),
tint = colorResource(id = R.color.text_secondary),
)
BasicTextField(
value = state?:"",
onValueChange = {
search.invoke(it)
state = it
},
maxLines = 1,
modifier = Modifier
.weight(1F)
.align(Alignment.CenterVertically)
.padding(horizontal = dimensionResource(id = R.dimen.padding_5dp)),
singleLine = true,
textStyle = TextStyle(
color = colorResource(id = R.color.text_secondary),
fontSize = 13.sp,
fontStyle = MaterialTheme.typography.overline.fontStyle
),
keyboardOptions = KeyboardOptions.Default.copy(
capitalization = KeyboardCapitalization.Sentences,
autoCorrect = true,
keyboardType = KeyboardType.Number,
imeAction = ImeAction.Search
),
decorationBox = { innerTextField ->
if (state.isNullOrEmpty()) {
Text(
text = stringResource(id = R.string.search),
style = MaterialTheme.typography.overline,
fontSize = 12.sp,
color = colorResource(id = R.color.text_secondary)
)
}
innerTextField()
}
)
if (!state.isNullOrEmpty())
Icon(
painter = painterResource(id = R.drawable.round_close_24),
contentDescription = null,
modifier = Modifier
.clickable {
state = ""
search.invoke("")
}
.size(20.dp)
.padding(end = dimensionResource(id = R.dimen.padding_5dp))
)
}
}
}
MessageScreen:
#Composable
fun MessageScreen(
messagesViewModel: MessagesViewModel,
navHostController: NavController,
sharedViewModel: SharedViewModel
) {
val listState = rememberLazyListState()
// Set State of Message Screen
val receiverProfile = sharedViewModel.receiverProfile
val senderProfile = sharedViewModel.senderProfile
Log.d("TAG", "MessageScreen: RECEIVER = $receiverProfile SENDER = $senderProfile")
// Get All Messages from Firebase
messagesViewModel.getAllMessageFromFirebase(receiverProfile, senderProfile)
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.SpaceBetween,
) {
TopBar(
title = receiverProfile!!.displayName,
buttonIcon = painterResource(id = R.drawable.ic_back_arrow_back_24)
) {
navHostController.popBackStack()
}
Box(modifier = Modifier.weight(10f)) {
LazyColumn(
modifier = Modifier
.fillMaxWidth(),
verticalArrangement = Arrangement.Top,
state = listState
) {
items(items = messagesViewModel.allMessagesState) { message ->
MessageCard(message = message, sharedViewModel = sharedViewModel)
Log.d("TAG 14", message.toString())
}
CoroutineScope(Dispatchers.Main).launch {
if (messagesViewModel.allMessagesState.isNotEmpty()) {
listState.scrollToItem(messagesViewModel.allMessagesState.size - 1)
}
}
}
}
Box(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp), contentAlignment = Alignment.Center
) {
SendMessageCard(messagesViewModel, sharedViewModel)
}
}
}
`
**SendMessageCard :-**
#Composable
fun SendMessageCard(messagesViewModel: MessagesViewModel, sharedViewModel: SharedViewModel) {
Card(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight(),
elevation = 8.dp
) {
Row(
modifier = Modifier,
horizontalArrangement = Arrangement.SpaceAround
) {
OutlinedTextField(
value = messagesViewModel.textState.value,
onValueChange = {
messagesViewModel.textState.value = it
},
modifier = Modifier.fillMaxWidth(),
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text),
trailingIcon = {
IconButton(onClick = {
messagesViewModel.sendMessage(
message = Message(
messagesViewModel.textState.value,
Timestamp.now(),
sharedViewModel.senderProfile!!.mailId
),
sharedViewModel = sharedViewModel
)
}) {
Icon(imageVector = Icons.Filled.Send, contentDescription = "Send Message")
}
},
textStyle = TextStyle(fontSize = 20.sp),
label = {
Text(text = "Type Message")
}
)
}
}
}
I figured out the solution to my problem. I used Dialog Compose inside Dialog Fragment and the keyboard popped up.
I have simple LazyColumn where each row contains a BasicTextField (the rows contain label names which can be changed). The row's state is set to "editMode" when it is clicked. Only then I want the BasicTextField to be editable, which makes the edit icons visible. However, I have to click two times on the row, but I want it to set focus on the TextField when the row is clicked for the first time. Using the focusRequest just does not work (nothing happens). Where could the problem be? Here is the code:
val focusRequester = FocusRequester()
val inputService = LocalTextInputService.current
Row(
modifier = modifier
.fillMaxWidth()
.height(48.dp)
.clickable(enabled = true) {
onLabelClick() // here I set the editMode = true
inputService?.showSoftwareKeyboard()
focusRequester.requestFocus()
}
.padding(8.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween
) {
Box(
modifier = Modifier.weight(1f)
) {
BasicTextField(
modifier = Modifier
.fillMaxSize()
.focusRequester(focusRequester)
.focusable(enabled = true),
value = tmpLabelName,
onValueChange = {
tmpLabelName = it
},
enabled = editMode,
singleLine = true,
textStyle = MaterialTheme.typography.body1,
decorationBox = { innerTextField ->
Box(
contentAlignment = Alignment.CenterStart
) {
if (tmpLabelName.isEmpty()) {
// show hint if text is empty
Text(
text = stringResource(id = R.string.enter_label_name)
)
} else {
innerTextField()
}
}
}
)
}
AnimatedVisibility(
visible = editMode,
enter = slideInHorizontally(
initialOffsetX = { fullWidth ->
fullWidth / 2
}
),
exit = fadeOut()
) {
Row {
IconButton(onClick = {
onLabelSaveClick(
label.name, tmpLabelName
)
}) {
Icon(
imageVector = Icons.Filled.Check,
contentDescription = stringResource(id = R.string.save_label_changes)
)
}
IconButton(onClick = {
onLabelDeleteClick(label.name)
}) {
Icon(
imageVector = Icons.Filled.Delete,
contentDescription = stringResource(id = R.string.delete_label)
)
}
}
}
}
I have a custom TextField which has no problem in the single TextField but when I create a Row() and put two custom TextField inside that, the divider is gone.
My custom text field: I created a BasicTextField and set a column BorderColumnState() to draw border when the text field is focus
#Composable
fun InputTextField(
modifier: Modifier = Modifier,
textFieldValue: TextFieldValue = TextFieldValue(""),
labelText: String,
withBorderModifier: Modifier = Modifier,
enabled: Boolean = true,
dividerColor: Color,
dividerThickness: Dp = 0.5.dp,
spacer: Dp,
textStyle: TextStyle,
keyboardOptions: KeyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text),
isDropDown: Boolean = false,
valueChange: (String) -> Unit
) {
var value by remember { mutableStateOf(textFieldValue) }
//This is used if we want to use it in DropDown
if (textFieldValue.text.isNotEmpty() && isDropDown)
value = textFieldValue
///////////////////////////////////////////
val dividerState = remember {
mutableStateOf(true)
}
BasicTextField(
value = value,
onValueChange = {
value = it
valueChange.invoke(it.text)
},
modifier = Modifier
.onFocusChanged {
dividerState.value = !it.isFocused
},
decorationBox = { innerTextField ->
val mainModifier = if (!dividerState.value) {
withBorderModifier
} else {
modifier
}
BorderColumnState(
mainModifier,
labelText,
textStyle,
spacer,
innerTextField,
dividerState,
dividerThickness,
dividerColor
)
}, keyboardOptions = keyboardOptions, enabled = enabled
)
}
#Composable
private fun BorderColumnState(
modifier: Modifier,
labelText: String,
textStyle: TextStyle,
spacer: Dp,
innerTextField: #Composable () -> Unit,
dividerState: MutableState<Boolean>,
dividerThickness: Dp,
dividerColor: Color
) {
Column(
modifier = modifier.wrapContentHeight(),
horizontalAlignment = Alignment.Start
) {
Text(text = labelText, style = textStyle)
Spacer(modifier = Modifier.size(spacer))
innerTextField()
if (dividerState.value) {
Spacer(
modifier = modifier
.size(dividerThickness)
.background(dividerColor)
)
}
}
}
Usage custom text field: When I want to use two custom text field inside a Row, the divider is gone
#Composable
fun EditProfileScreen() {
val disableButtonState = remember {
mutableStateOf(false)
}
Box(modifier = Modifier.fillMaxSize()) {
Column(
modifier = Modifier
.fillMaxSize()
.padding(start = 24.dp, end = 24.dp, top = 32.5.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
CountryCodeAndMobileNumber(
countryCodeList = listOf("+98"),
clientInfo,
disableButtonState,
viewModel
)
Spacer(modifier = Modifier.size(16.dp))
InputTextField(
modifier = Modifier.fillMaxWidth(),
textFieldValue = TextFieldValue("sasasasas#gmail.com"),
labelText = stringResource(R.string.email_address),
withBorderModifier = Modifier
.fillMaxWidth()
.border(
width = 1.dp,
shape = AppShapes.small,
color = AppColor.brandColor.BLUE_DE_FRANCE
)
.padding(4.dp),
textStyle = AppFont.PoppinsTypography.caption,
dividerColor = AppColor.neutralColor.SILVER_CHALICE,
spacer = 8.dp,
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email)
) {}
}
}
}
#Composable
private fun CountryCodeAndMobileNumber(
countryCodeList: List<String>,
clientInfo: Client,
) {
var mobileClientInfo = clientInfo
Row(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
) {
CountryCodeDropDown(
list = countryCodeList,
label = stringResource(
id = R.string.country
),
dividerColor = AppColor.neutralColor.SILVER_CHALICE,
enabled = false
)
Spacer(modifier = Modifier.size(4.dp))
InputTextField(
textFieldValue = TextFieldValue("111111"),
labelText = stringResource(R.string.mobile_number),
withBorderModifier = Modifier
.wrapContentWidth()
.border(
width = 1.dp,
shape = AppShapes.small,
color = AppColor.brandColor.BLUE_DE_FRANCE
)
.padding(4.dp),
enabled = false,
textStyle = AppFont.PoppinsTypography.caption,
dividerColor = AppColor.neutralColor.SILVER_CHALICE,
spacer = 8.dp,
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Phone)
) {
}
}
}
How can I solve this problem?
val mainModifier = if (!dividerState.value) {
withBorderModifier
} else {
modifier
}
You can not assign modifier as a variable. that's why it's not working.
Edit your code like this:
BorderColumnState(
Modifier.then(if (!dividerState.value) withBorderModifier else modifier),
labelText,
textStyle,
spacer,
innerTextField,
dividerState,
dividerThickness,
dividerColor
)
I checked the code on my IDE. Why are you setting the size for the divider?
I changed the spacer to this and that's working fine.
Spacer(
modifier = Modifier
.fillMaxWidth()
.height(dividerThickness)
.background(dividerColor)
)
I am trying to put a TextField and a FAB inside a bottomBar using Jetpack Compose.
I wrapped the two with a box, which has the modifier "fillMaxWidth".
But the two controls dont use the full width.
Does anyone know, how to fix this issue?
Here is my Code:
#Composable
fun ChatView() {
Scaffold(
topBar= { ChannelButton() },
bottomBar = { ChatBox() },
modifier = Modifier
.padding(10.dp)
) {
ChatList()
}
}
#Composable
fun ChatBox() {
Box(modifier = Modifier
.background(DiscordDarkGray)
.fillMaxWidth()
){
Column(modifier = Modifier
.padding(10.dp)
.fillMaxWidth()) {
HorizontalCenteredRow(modifier = Modifier
.fillMaxWidth()) {
val textState = remember { mutableStateOf(TextFieldValue()) }
TextField(
value = textState.value,
onValueChange = { textState.value = it }
)
Spacer(modifier = Modifier.width(10.dp))
FloatingIconActionButton (
icon = Icons.Default.Send,
onClick = { /*TODO*/ },
backgroundColor = DiscordBlue
)
}
Spacer(modifier = Modifier.height(60.dp))
}
}
}
Here is the Code of the HorizontalCenteredRow:
#Composable
fun HorizontalCenteredRow(
modifier: Modifier = Modifier,
content: #Composable RowScope.() -> Unit
) {
Row(
modifier = modifier
.wrapContentSize(Alignment.Center),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center,
content = content
)
}
Here is the code of the FAB:
#Composable
fun FloatingIconActionButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
backgroundColor: Color = MaterialTheme.colors.secondary,
contentColor: Color = contentColorFor(backgroundColor),
elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
icon: ImageVector = Icons.Default.QuestionAnswer,
iconContentDescription: String = "",
) {
Surface(
modifier = modifier.let {
if (enabled) {
it.clickable(
onClick = onClick,
role = Role.Button,
interactionSource = interactionSource,
indication = null
)
} else it
},
shape = shape,
color = backgroundColor,
contentColor = contentColor,
elevation = elevation.elevation(interactionSource).value
) {
CompositionLocalProvider(LocalContentAlpha provides contentColor.alpha) {
ProvideTextStyle(MaterialTheme.typography.button) {
Box(
modifier = Modifier
.defaultMinSize(minWidth = FabSize, minHeight = FabSize)
.indication(interactionSource, rememberRipple()),
contentAlignment = Alignment.Center
) {
Icon(
icon,
iconContentDescription,
tint = if (enabled) {
colors().onPrimary
} else {
colors().onPrimary.transparentize(.6f)
}
)
}
}
}
}
}
Using
HorizontalCenteredRow(
modifier = Modifier.fillMaxWidth()
the Row fills all the space, but it doesn't mean that the children occupy the entire space.
If you want to fill all the space with the children you have to change the default dimensions of them.
For example you can apply modifier = Modifier.weight(1f) to the TextField.
Something like:
HorizontalCenteredRow(modifier = Modifier
.fillMaxWidth()) {
val textState = remember { mutableStateOf(TextFieldValue()) }
TextField(
value = textState.value,
onValueChange = { textState.value = it },
modifier = Modifier.weight(1f)
)
I have the following composable function to build a Chip:
#Composable
fun CategoryChip(
category: String,
isSelected: Boolean = false,
onSelectedCategoryChanged: (String) -> Unit,
onExecuteSearch: () -> Unit
) {
Surface(
modifier = Modifier.padding(end = 8.dp, bottom = 8.dp),
elevation = 8.dp,
shape = RoundedCornerShape(16.dp),
color = when {
isSelected -> colorResource(R.color.teal_200)
else -> colorResource(R.color.purple_500)
}
) {
Row(modifier = Modifier
.toggleable(
value = isSelected,
onValueChange = {
onSelectedCategoryChanged(category)
onExecuteSearch()
}
)) {
Text(
text = category,
style = MaterialTheme.typography.body2,
color = Color.White,
modifier = Modifier.padding(8.dp)
)
}
}
}
This creates the following chip:
But what I am trying to achieve is the following:
Is it possible to create a shape like that with Jetpack Compose?
Starting with M2 1.2.0-alpha02 you can use the Chip or FilterChip composable:
Chip(
onClick = { /* Do something! */ },
border = BorderStroke(
ChipDefaults.OutlinedBorderSize,
Color.Red
),
colors = ChipDefaults.chipColors(
backgroundColor = Color.White,
contentColor = Color.Red
),
leadingIcon = {
Icon(
Icons.Filled.Settings,
contentDescription = "Localized description"
)
}
) {
Text("Change settings")
}
With M3 (androidx.compose.material3) you can use one of these options:
AssistChip
FilterChip
InputChip
SuggestionChip
Something like:
AssistChip(
onClick = { /* Do something! */ },
label = { Text("Assist Chip") },
leadingIcon = {
Icon(
Icons.Filled.Settings,
contentDescription = "Localized description",
Modifier.size(AssistChipDefaults.IconSize)
)
}
)
Yes, all you have to do is add a border to your surface.
Surface(
modifier = Modifier.padding(end = 8.dp, bottom = 8.dp),
elevation = 8.dp,
shape = RoundedCornerShape(16.dp),
border = BorderStroke(
width = 1.dp,
color = when {
isSelected -> colorResource(R.color.teal_200)
else -> colorResource(R.color.purple_500)
}
)
)
Building on Code Poet's answer i wanted to show how to do a Material Chip with background color:
#Composable
fun buildChip(label: String, icon: ImageVector? = null) {
Box(modifier = Modifier.padding(8.dp)) {
Surface(
elevation = 1.dp,
shape = MaterialTheme.shapes.small,
color = Color.LightGray
) {
Row(verticalAlignment = Alignment.CenterVertically) {
if (icon != null) Icon(
icon,
modifier = Modifier
.fillMaxHeight()
.padding(horizontal = 4.dp)
)
Text(
label,
modifier = Modifier.padding(8.dp),
style = MaterialTheme.typography.button.copy(color = Color.DarkGray)
)
}
}
}
}
Simply use ChipDefaults.outlinedBorder and Defaults.outlinedChipColors():
Chip(
onClick = {},
border = ChipDefaults.outlinedBorder,
colors = ChipDefaults.outlinedChipColors(),
) {
Text(
text = "Trends",
)
}
compose version 1.2.1 , kotlinCompilerExtensionVersion 1.3.1
Also add accompanist Flow library
implementation
"com.google.accompanist:accompanist-flowlayout:0.26.4-beta"
We will use SuggestionChip composable function to create chips.
#Composable
fun SuggestionChipLayout() {
val chips by remember { mutableStateOf(listOf("India", "France", "Spain","Netherland","Austarlia","Nepal")) }
var chipState by remember { mutableStateOf("") }
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text(text = "Suggestion Chip Example")
Spacer(modifier = Modifier.height(20.dp))
FlowRow(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 10.dp),
mainAxisSpacing = 16.dp,
crossAxisSpacing = 16.dp,
) {
chips.forEach {
SuggestionChipEachRow(chip = it, it == chipState) { chip ->
chipState = chip
}
}
}
}
}
#OptIn(ExperimentalMaterial3Api::class)
#Composable
fun SuggestionChipEachRow(
chip: String,
selected: Boolean,
onChipState: (String) -> Unit
) {
SuggestionChip(onClick = {
if (!selected)
onChipState(chip)
else
onChipState("")
}, label = {
Text(text = chip)
},
border = SuggestionChipDefaults.suggestionChipBorder(
borderWidth = 1.dp,
borderColor = if (selected) Color.Transparent else PurpleGrey40
),
modifier = Modifier.padding(horizontal = 16.dp),
colors = SuggestionChipDefaults.suggestionChipColors(
containerColor = if (selected) Purple80 else Color.Transparent
),
shape = RoundedCornerShape(16.dp)
)
}
Filter Chips: In filter chip we can select multiple items at a time
compose version 1.2.1 , kotlinCompilerExtensionVersion 1.3.1 Also add accompanist Flow library
implementation
"com.google.accompanist:accompanist-flowlayout:0.26.4-beta"
we will use FilterChip composable function to create Filter Chip
#SuppressLint("MutableCollectionMutableState")
#Composable
fun FilterChipLayout() {
val originalChips by remember {
mutableStateOf(
listOf(
"chip1",
"chip2",
"chip3",
"chip4",
"chip5"
)
)
}
val temp: Set<Int> = emptySet()
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text(text = "Filter Chip Example")
Spacer(modifier = Modifier.height(20.dp))
FilterChipEachRow(chipList = originalChips, tempList = temp)
}
}
#OptIn(ExperimentalMaterial3Api::class)
#Composable
fun FilterChipEachRow(
chipList: List<String>,
tempList: Set<Int>
) {
var multipleChecked by rememberSaveable { mutableStateOf(tempList) }
FlowRow(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 10.dp),
mainAxisSpacing = 16.dp,
crossAxisSpacing = 16.dp,
) {
chipList.forEachIndexed { index, s ->
FilterChip(selected = multipleChecked.contains(index), onClick = {
multipleChecked = if (multipleChecked.contains(index))
multipleChecked.minus(index)
else
multipleChecked.plus(index)
}, label = {
Text(text = s)
},
border = FilterChipDefaults.filterChipBorder(
borderColor = if (!multipleChecked.contains(index)) PurpleGrey40 else Color.Transparent,
borderWidth = if (multipleChecked.contains(index)) 0.dp else 2.dp
),
shape = RoundedCornerShape(8.dp),
leadingIcon = {
(if (multipleChecked.contains(index)) Icons.Default.Check else null)?.let {
Icon(
it,
contentDescription = ""
)
}
}
)
}
}
}