A modern programming language that makes developers happier.

kotlinlang

Screenshot 2021-08-20 at 16.04.19.png

Hi guys, I'm fighting with a problem that seems trivial. Currently I have a `Button`  that contains a `Column` (that contains other stuff), but I want that this column fills the remaining space inside the `Button` , basically I want that the column fit all the space inside the Button. In the old world I was used to put `match_parent`  width.

`.fillMaxWidth()`  doesn't work well because in this way the buttons fills all witdh space in my composable. Any ideas?

Could you try adding `.weight(1f)` on the column’s modifiers? Is that maybe what you’re looking for?

Hmm no, this also makes it work like `.fillMaxWidth()` I think unfortunately

Already tested it doesn't works :disappointed: tnx anyway

Can you share any of your code? I'm not clear what you are setting .fillMaxWidth() to.

```@Composable
internal fun InternalGradientButton(
    text: String,
    modifier: Modifier = Modifier,
    textColor: Color,
    enabled: Boolean,
    gradientBrush: Brush,
    icon: Painter? = null,
    onClick: () -&gt; Unit = { },
) {
    Button(
        modifier = modifier
            .wrapContentWidth()
            .buttonsDefaultShadow(),
        enabled = enabled,
        shape = ShapesRounded.medium,
        elevation = null,
        colors = ButtonDefaults.buttonColors(backgroundColor = Color.Transparent),
        contentPadding = PaddingValues(),
        onClick = onClick,
    ) {
        val alphaModifier = Modifier.alpha(if (enabled) 1f else 0.6f)

        Row(
            modifier = Modifier
                .background(gradientBrush)
                .padding(vertical = CWDimen.CommonMargin16, horizontal = CWDimen.CommonMargin16)
                .then(alphaModifier),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.Center
        ) {
            Text(
                modifier = Modifier.then(alphaModifier),
                text = text,
                color = textColor,
                style = MaterialTheme.typography.button
            )
            icon?.let {
                Image(
                    painter = it,
                    modifier = Modifier
                        .padding(start = CWDimen.CommonMargin8)
                        .size(24.dp),
                    contentDescription = null
                )
            }
        }
    }
}```

this one, the hierarchy is
Button
    Row
        TextView
         Icon

the reason is that the Row has a gradient, because the color of the button is not solid

If you set your Button to .wrapContentWidth, and your Row to fillMaxWidth I would expect it to span the whole screen. What should be the width of the button?

the width should depend by passed modifier, default wrap content, and the screen width in the case it receives a modifier with fillMaxWidth

Screenshot 2021-08-20 at 16.29.06.png

Here for example the two buttons have weight `2f`  and fillMaxWidth in order to use the space 50 50

Screenshot 2021-08-20 at 16.30.00.png

in this screen the button width should be `wrap_content`  ,but with the fillMaxWidth on the `Row`  inside the `Button`  broke it

ok probably I fixed by following this issue <https://stackoverflow.com/questions/65542068/jetpack-compose-button-with-gradient-background>