# width

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/width.modifier#(androidx.compose.ui.Modifier).width(androidx.compose.foundation.layout.IntrinsicSize)(intrinsicSize: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/IntrinsicSize)` Declare the preferred width of the content to be the same as the min or max intrinsic width of the content. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/width.modifier#(androidx.compose.ui.Modifier).width(androidx.compose.ui.unit.Dp)(width: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Declare the preferred width of the content to be exactly `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/width.modifier#(androidx.compose.ui.Modifier).width(androidx.compose.ui.unit.Dp)`dp. | Cmn |

## Functions

### Modifier.width

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Intrinsic.kt+function:width) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.0.0)

```
fun Modifier.width(intrinsicSize: IntrinsicSize): Modifier
```

Declare the preferred width of the content to be the same as the min or max intrinsic width of the content. The incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` may override this value, forcing the content to be either smaller or larger.

See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/height.modifier#(androidx.compose.ui.Modifier).height(androidx.compose.foundation.layout.IntrinsicSize)` for options of sizing to intrinsic height. Also see `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/width.modifier#(androidx.compose.ui.Modifier).width(androidx.compose.foundation.layout.IntrinsicSize)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/widthIn.modifier#(androidx.compose.ui.Modifier).widthIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` for other options to set the preferred width.

Example usage for min intrinsic:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// Builds a layout containing three Box having the same width as the widest one.
//
// Here width min intrinsic is adding a width premeasurement pass for the
// Column, whose minimum intrinsic width will correspond to the preferred width of the largest
// Box. Then width min intrinsic will measure the Column with tight width, the
// same as the premeasured minimum intrinsic width, which due to fillMaxWidth will force
// the Box's to use the same width.
Box {
    Column(Modifier.width(IntrinsicSize.Min).fillMaxHeight()) {
        Box(modifier = Modifier.fillMaxWidth().size(20.dp, 10.dp).background(Color.Gray))
        Box(modifier = Modifier.fillMaxWidth().size(30.dp, 10.dp).background(Color.Blue))
        Box(modifier = Modifier.fillMaxWidth().size(10.dp, 10.dp).background(Color.Magenta))
    }
}
```

Example usage for max intrinsic:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

// Builds a layout containing three Text boxes having the same width as the widest one.
//
// Here width max intrinsic is adding a width premeasurement pass for the Column,
// whose maximum intrinsic width will correspond to the preferred width of the largest
// Box. Then width max intrinsic will measure the Column with tight width, the
// same as the premeasured maximum intrinsic width, which due to fillMaxWidth modifiers will
// force the Boxs to use the same width.

Box {
    Column(Modifier.width(IntrinsicSize.Max).fillMaxHeight()) {
        Box(Modifier.fillMaxWidth().background(Color.Gray)) { Text("Short text") }
        Box(Modifier.fillMaxWidth().background(Color.Blue)) {
            Text("Extremely long text giving the width of its siblings")
        }
        Box(Modifier.fillMaxWidth().background(Color.Magenta)) { Text("Medium length text") }
    }
}
```

### Modifier.width

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Size.kt+function:width) Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.10.0)

```
fun Modifier.width(width: Dp): Modifier
```

Declare the preferred width of the content to be exactly `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/width.modifier#(androidx.compose.ui.Modifier).width(androidx.compose.ui.unit.Dp)`dp. The incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` may override this value, forcing the content to be either smaller or larger.

For a modifier that sets the width of the content regardless of the incoming constraints see `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/requiredWidth.modifier#(androidx.compose.ui.Modifier).requiredWidth(androidx.compose.foundation.layout.IntrinsicSize)`. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/height.modifier#(androidx.compose.ui.Modifier).height(androidx.compose.foundation.layout.IntrinsicSize)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/size.modifier#(androidx.compose.ui.Modifier).size(androidx.compose.ui.unit.Dp)` to set other preferred dimensions. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/widthIn.modifier#(androidx.compose.ui.Modifier).widthIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/heightIn.modifier#(androidx.compose.ui.Modifier).heightIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/sizeIn.modifier#(androidx.compose.ui.Modifier).sizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` to set a preferred size range.

Example usage:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.width
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Box { Box(Modifier.width(100.dp).aspectRatio(1f).background(Color.Magenta)) }
```