Jetpack Compose Tutorial

Introduction to Jetpack Compose Composable Functions & Preview Key Concepts State & remember Introduction Layouts: Column, Row & Box Modifiers Lists with LazyColumn State Hoisting & ViewModel Navigation in Compose Material 3 & Theming Side Effects (LaunchedEffect & more) Networking & Loading State in Compose Animations in Compose

Modifiers

June 02, 2026 • 1 min read

A Modifier decorates or configures a composable — size, padding, background, border, click handling, and much more. You chain them together.

Text(
    "Get Started",
    color = Color.White,
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
        .background(Color(0xFF0D6EFD), RoundedCornerShape(10.dp))
        .clickable { /* handle tap */ }
        .padding(vertical = 12.dp)
)
Common mistake: Order matters! .padding().background() gives a different result than .background().padding() — modifiers apply top to bottom.
  • fillMaxWidth() / fillMaxSize() / size(48.dp) for sizing.
  • padding(), background(), border(), clip() for looks.
  • clickable { } for interaction.
Tip: Accept a modifier: Modifier = Modifier parameter in your composables so callers can customise spacing/size from outside.

Summary

Modifiers configure composables in a chain where order matters. They handle sizing, styling and interaction in one consistent API.