if you want to make sure ColumnA doesn't get too skinny while letting ColumnB stretch out to fill whatever space is left when you throw in ColumnC, you can mix and match Modifier.widthIn and Modifier.weight.
ColumnA: Set a minimum width so it doesn't shrink too much.
ColumnB: Use Modifier.weight to let it expand and take up the remaining space.
ColumnC: Add it dynamically to the row.
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
@Composable
fun MyRow(paddingValues: PaddingValues, isDynamicElementAdded: Boolean) {
Row(
modifier = Modifier
.padding(paddingValues)
.fillMaxWidth()
) {
// ColumnA with a minimum width of 150 dp
ColumnA(
Modifier
.weight(1f)
.widthIn(min = 150.dp)
)
// ColumnB taking the remaining space
ColumnB(
Modifier.weight(3f)
)
// Conditionally add the dynamic element
if (isDynamicElementAdded) {
DynamicElement()
}
}
}
@Composable
fun ColumnA(modifier: Modifier) {
// Your ColumnA content here
Text("ColumnA", modifier = modifier)
}
@Composable
fun ColumnB(modifier: Modifier) {
// Your ColumnB content here
Text("ColumnB", modifier = modifier)
}
@Composable
fun DynamicElement() {
// Your dynamic element content here
Text("Dynamic Element")
}
ColumnA: Give it a minimum width of 150 dp with Modifier.widthIn(min = 150.dp).
ColumnA and ColumnB: Keep them in a 1:3 ratio using Modifier.weight.
ColumnC: Add this dynamic element to the right end of the row if the isDynamicElementAdded flag is true.
This way, ColumnA always stays at least 150 dp wide, and ColumnB stretches out to fill the rest of the space. When you add ColumnC, ColumnB will adjust its width based on what's left.
Also I think this raises another question. How do we stop the dynamic element from pushing ColumnA below its minimum width? ColumnA: Give it a minimum width of 150 dp with Modifier.widthIn(min = 150.dp).
ColumnA and ColumnB: Keep them in a 1:3 ratio using Modifier.weight.
ColumnC: Add this dynamic element to the right end of the row if the isDynamicElementAdded flag is true.
So ColumnA always stays at least 150 dp wide, and ColumnB stretches out to fill the rest of the remaining space. When you add ColumnC, ColumnB will adjust its width based on whats left
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
@Composable
fun MyRow(paddingValues: PaddingValues, isDynamicElementAdded: Boolean) {
Row(
modifier = Modifier
.padding(paddingValues)
.fillMaxWidth()
) {
// ColumnA with a minimum width of 150 dp
ColumnA(
Modifier
.weight(1f)
.widthIn(min = 150.dp)
)
// ColumnB taking the remaining space
ColumnB(
Modifier.weight(3f)
)
// Conditionally add the dynamic element
if (isDynamicElementAdded) {
DynamicElement(
Modifier.fillMaxWidth()
)
}
}
}
@Composable
fun ColumnA(modifier: Modifier) {
// Your ColumnA content here
Text("ColumnA", modifier = modifier)
}
@Composable
fun ColumnB(modifier: Modifier) {
// Your ColumnB content here
Text("ColumnB", modifier = modifier)
}
@Composable
fun DynamicElement(modifier: Modifier) {
// Your dynamic element content here
Text("Dynamic Element", modifier = modifier)
}
ColumnA always stays at least 150 dp wide and ColumnB fills up the rest of the remaining space. When you add the dynamic element (ColumnC) it takes up the remaining space without squishing ColumnA below its minimum width