Jetpack Compose Cheat Sheet 2026 — Every Component and Modifier

// Column — vertical stack
Column {
    Text("First")
    Text("Second")
}

// Row — horizontal stack
Row {
    Text("Left")
    Spacer(Modifier.weight(1f))
    Text("Right")
}

// Box — stack on top of each other
Box {
    Image(...)           // background
    Text("Overlay")      // on top
}

// LazyColumn — scrollable vertical list (RecyclerView replacement)
LazyColumn {
    items(list) { item ->
        Text(item.name)
    }
}

// LazyRow — scrollable horizontal list
LazyRow {
    items(list) { item ->
        Card { Text(item.name) }
    }
}

// LazyVerticalGrid — grid layout
LazyVerticalGrid(columns = GridCells.Fixed(2)) {
    items(list) { item ->
        Card { Text(item.name) }
    }
}

// Padding THEN background — padding is outside the color
Box(Modifier.padding(16.dp).background(Color.Red))

// Background THEN padding — padding is inside the color
Box(Modifier.background(Color.Red).padding(16.dp))

// remember — survives recomposition
var count by remember { mutableStateOf(0) }

// rememberSaveable — survives configuration changes (rotation)
var name by rememberSaveable { mutableStateOf("") }

// derivedStateOf — computed state that only updates when dependencies change
val isValid by remember {
    derivedStateOf { name.isNotBlank() && name.length >= 3 }
}

// Collecting Flow as State
val uiState by viewModel.uiState.collectAsStateWithLifecycle()

// Stateless composable — state is "hoisted" to the caller
@Composable
fun Counter(count: Int, onIncrement: () -> Unit) {
    Button(onClick = onIncrement) {
        Text("Count: $count")
    }
}

// Stateful parent
@Composable
fun CounterScreen() {
    var count by remember { mutableStateOf(0) }
    Counter(count = count, onIncrement = { count++ })
}

// Define routes as data classes
@Serializable data object Home
@Serializable data class Detail(val id: String)

// Setup
val navController = rememberNavController()
NavHost(navController, startDestination = Home) {
    composable<Home> { HomeScreen(navController) }
    composable<Detail> { backStackEntry ->
        val detail = backStackEntry.toRoute<Detail>()
        DetailScreen(detail.id)
    }
}

// Navigate
navController.navigate(Detail(id = "42"))

// Navigate and clear back stack
navController.navigate(Home) {
    popUpTo<Home> { inclusive = true }
}

// Go back
navController.popBackStack()

// Scaffold — app structure with top bar, bottom bar, FAB
Scaffold(
    topBar = { TopAppBar(title = { Text("My App") }) },
    bottomBar = { NavigationBar { /* items */ } },
    floatingActionButton = {
        FloatingActionButton(onClick = { }) { Icon(Icons.Default.Add, null) }
    }
) { padding ->
    // Content goes here
    Column(Modifier.padding(padding)) { }
}

// Card
Card(
    modifier = Modifier.fillMaxWidth().padding(8.dp),
    elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
) {
    Text("Card content", Modifier.padding(16.dp))
}

// AlertDialog
AlertDialog(
    onDismissRequest = { showDialog = false },
    title = { Text("Confirm") },
    text = { Text("Are you sure?") },
    confirmButton = { TextButton(onClick = { }) { Text("Yes") } },
    dismissButton = { TextButton(onClick = { }) { Text("No") } }
)

// BottomSheet
ModalBottomSheet(onDismissRequest = { }) {
    Column(Modifier.padding(16.dp)) {
        Text("Bottom sheet content")
    }
}

// Access current theme values anywhere
MaterialTheme.colorScheme.primary
MaterialTheme.colorScheme.surface
MaterialTheme.colorScheme.onSurface
MaterialTheme.typography.headlineMedium
MaterialTheme.typography.bodyLarge
MaterialTheme.shapes.medium

// Load data when screen appears
LaunchedEffect(Unit) {
    viewModel.loadData()
}

// Cleanup a listener
DisposableEffect(lifecycleOwner) {
    val observer = LifecycleEventObserver { _, event -> }
    lifecycleOwner.lifecycle.addObserver(observer)
    onDispose { lifecycleOwner.lifecycle.removeObserver(observer) }
}

// Launch coroutine from a click handler
val scope = rememberCoroutineScope()
Button(onClick = { scope.launch { doWork() } }) {
    Text("Start")
}

// AnimatedVisibility — show/hide with animation
AnimatedVisibility(visible = isVisible) {
    Text("I fade in and out")
}

// animateContentSize — smooth size changes
Column(Modifier.animateContentSize()) {
    Text("Title")
    if (expanded) {
        Text("Extra content that animates in")
    }
}

// Animate a value
val alpha by animateFloatAsState(if (visible) 1f else 0f)
Box(Modifier.alpha(alpha)) { Text("Fading") }

// Crossfade between composables
Crossfade(targetState = currentTab) { tab ->
    when (tab) {
        Tab.Home -> HomeScreen()
        Tab.Profile -> ProfileScreen()
    }
}

// FlowRow — wraps items to next line when full
FlowRow(
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    tags.forEach { tag ->
        AssistChip(onClick = { }, label = { Text(tag) })
    }
}

// FlowColumn — vertical wrapping
FlowColumn(
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    items.forEach { Text(it) }
}

when (val state = uiState) {
    is UiState.Loading -> CircularProgressIndicator()
    is UiState.Error -> Text("Error: ${state.message}")
    is UiState.Success -> LazyColumn {
        items(state.data) { item -> ItemCard(item) }
    }
}

var query by remember { mutableStateOf("") }
LaunchedEffect(query) {
    delay(300) // debounce 300ms
    viewModel.search(query)
}
OutlinedTextField(value = query, onValueChange = { query = it })

// Material 3 pull-to-refresh
val pullState = rememberPullToRefreshState()
PullToRefreshBox(
    isRefreshing = isRefreshing,
    onRefresh = { viewModel.refresh() },
    state = pullState
) {
    LazyColumn { /* content */ }
}