I’m using a LazyColumn with a maximum width of 600.dp in Jetpack Compose. I want one specific item in the list to stretch and occupy the full screen width. Is there a way to achieve this without applying padding to each item?
<code> val list = listOf("Normal", "Normal", "Normal", "Normal", "Normal", "Full width", "Normal", "Normal")
LazyColumn(Modifier.widthIn(max = 600.dp)) {
items(list) {
Box(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.background(
if (it == "Full width") {
Color.Red
} else {
Color.Black
},
),
) {
Text(text = it)
}
}
}
</code>
<code> val list = listOf("Normal", "Normal", "Normal", "Normal", "Normal", "Full width", "Normal", "Normal")
LazyColumn(Modifier.widthIn(max = 600.dp)) {
items(list) {
Box(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.background(
if (it == "Full width") {
Color.Red
} else {
Color.Black
},
),
) {
Text(text = it)
}
}
}
</code>
val list = listOf("Normal", "Normal", "Normal", "Normal", "Normal", "Full width", "Normal", "Normal")
LazyColumn(Modifier.widthIn(max = 600.dp)) {
items(list) {
Box(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.background(
if (it == "Full width") {
Color.Red
} else {
Color.Black
},
),
) {
Text(text = it)
}
}
}
6
Try this
<code>val list =
listOf("Normal", "Normal", "Normal", "Normal", "Normal", "Full width", "Normal", "Normal")
LazyColumn(Modifier.widthIn(max = 600.dp)) {
items(list) {
Box(
modifier = Modifier
.then(
if (it == "Full width") {
Modifier.fillMaxWidth()
} else {
Modifier.widthIn(max = 200.dp)
}
)
.wrapContentHeight()
.background(
if (it == "Full width") {
Color.Red
} else {
Color.Black
},
),
) {
Text(text = it)
}
}
}
</code>
<code>val list =
listOf("Normal", "Normal", "Normal", "Normal", "Normal", "Full width", "Normal", "Normal")
LazyColumn(Modifier.widthIn(max = 600.dp)) {
items(list) {
Box(
modifier = Modifier
.then(
if (it == "Full width") {
Modifier.fillMaxWidth()
} else {
Modifier.widthIn(max = 200.dp)
}
)
.wrapContentHeight()
.background(
if (it == "Full width") {
Color.Red
} else {
Color.Black
},
),
) {
Text(text = it)
}
}
}
</code>
val list =
listOf("Normal", "Normal", "Normal", "Normal", "Normal", "Full width", "Normal", "Normal")
LazyColumn(Modifier.widthIn(max = 600.dp)) {
items(list) {
Box(
modifier = Modifier
.then(
if (it == "Full width") {
Modifier.fillMaxWidth()
} else {
Modifier.widthIn(max = 200.dp)
}
)
.wrapContentHeight()
.background(
if (it == "Full width") {
Color.Red
} else {
Color.Black
},
),
) {
Text(text = it)
}
}
}
1
Ended up solving it by changing modifier to
<code>Modifier
.wrapContentWidth(unbounded = true)
.fillMaxWidth()
.wrapContentHeight()
</code>
<code>Modifier
.wrapContentWidth(unbounded = true)
.fillMaxWidth()
.wrapContentHeight()
</code>
Modifier
.wrapContentWidth(unbounded = true)
.fillMaxWidth()
.wrapContentHeight()