Modifier properties used in composables - devrath/urban-octo-jetpack-compose GitHub Wiki

`Contents`
Modifiers
Modifiers, They can be applied multiple times

Modifiers

Modifiers are ordered collections of immutable elements used to add the behavior, decorate elements.
Some examples of what we can do with modifiers include
- Add background to them composable.
- Adding padding to the composable element.
- Adding the click listeners for composable elements thus making them intractable.
- We can make it scrollable.
- We can make the composable draggable.
- Increasing the size of the composable like fullSize,matchWidth,matchHeight,also the fraction of size.
- Modify and tweak the composable's arrangement and alignment params.
- We can add information using modifiers like accessibility labels.
Modifiers properties can be applied to any composable in the library, Like text,column,row,images,etc..

`Modifier Parameters`	`Description`
`Modifier.background(Color.Green)`	`Setting the background of the composable`
`Modifier.fillMaxHeight(0.5F)`	`Setting the height of the container to 50% of its parent`
`Modifier.fillMaxWidth(1F)`	`Setting the width of the container to 100% of its parent`
`Modifier.width(300.dp)`	`Setting the width of the composable to 300dp`
`Modifier.width(300.dp).fillMaxWidth(1F)`	`Setting the width of the composable to 300dp and later within that 300dp fill to maz width`
`Modifier.width(300.dp)`	`Setting the width of the composable to 300dp`
`Modifier.requiredWidth(900.dp)`	`Here we can force the container to streach up to certain width specified even though the screen size is less of than it`
`Modifier.padding(800.dp)`	`It usually takes the container where it is specified and pushes the contents of the container into its center. Also we can set the padding to one, two, three or all four sides`
`Modifier.offset(20.dp,30.dp)`	`Offset basically gives a position of a and y axis from the starting top most point of composable`
`Margin`	`Composable does not have the margin, and we attain it with adding padding to one more container`
`Modifier.border(5.dp, Color.Blue, shape = RectangleShape)`	`A nice handy extension for modifier is making border of the composable, This can be a substitute for a drawable which we earlier had in android`
`Modifier.clickable {}`	`Using this property of composable, we can make any composable into a clickable`

Modifiers, They can be applied multiple times

Unlike the regular properties that we had in XML, where we could apply only one on view. we can apply multiple times and modify the new required composable.

Modifier.background(Color.Gray)
        .width(300.dp)
        .fillMaxHeight(0.5F)
        .border(5.dp, Color.Blue, shape = RectangleShape)
        .padding(50.dp)
        .border(5.dp, Color.Red, shape = RectangleShape)
        .padding(50.dp)
        .border(5.dp, Color.Cyan, shape = RectangleShape)