Compose Material Design — Spacers, Margin, Padding 📊

In Jetpack Compose, spacing is a crucial for creating well-structured and visually appealing layouts.

👉 What are spacers ?

• This are the space between two panes in a layout.
• Spaces are measured in dp scale.
• A spacer can contain a drag handle that adjusts the size and layout of the panes. The handle’s touch target slightly overlaps the panes.

👉How to convert from dp to px ?

@Composable
fun Dp.dpToPx() = with(LocalDensity.current) { this@dpToPx.toPx() }

👉How to convert from px to dp?

@Composable
fun Int.pxToDp() = with(LocalDensity.current) { this@pxToDp.toDp() }

or

/**
 * Create a [Dp] using an [Int]:
 *     val left = 10
 *     val x = left.dp
 *     // -- or --
 *     val y = 10.dp
 */
@Stable
inline val Int.dp: Dp get() = Dp(this.toFloat())

👉We can have different Space Types:

👉How to create your spacer in dimension file?

data class Dimensions(
    val spacing: Spacing =…