Jetpack Compose Academy · Lección

Mapear y combinar Flows

Transforme los streams antes de que lleguen a la pantalla.

Mapear y combinar Flows es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Jetpack Compose Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Jetpack Compose Academy incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

Shape Data Before the UI

Raw data rarely matches what the screen needs. You use flow operators to transform a stream into ready-to-render UI state.

Transform with map

The map operator runs a function on each emission and passes the result downstream, leaving the original stream untouched.

val names = users.map { it.name }

Filter Out Noise

Use filter to drop emissions you do not care about, so only the items that pass your condition reach the UI.

val active = users.filter { it.isActive }

Combine Two Streams

The combine operator merges multiple flows and re-runs whenever any of them emits, giving you the latest value from each.

combine(query, results) { q, r -> SearchUi(q, r) }

Combine Builds UI State

A common pattern is to combine several source flows into one immutable UiState object that fully describes the screen.

combine(items, loading, error) { i, l, e ->
    UiState(i, l, e)
}

Wait for All with zip

While combine fires on any change, zip pairs emissions one-to-one and waits until both flows have produced a new value.

flowA.zip(flowB) { a, b -> a + b }

Switch to a New Stream

With flatMapLatest a new value cancels the previous inner flow and switches to a fresh one, perfect for live search.

query.flatMapLatest { repo.search(it) }

Operators Are Cold by Default

Transformations like map and filter are cold: they describe work but do nothing until something downstream collects.

Chain Operators Freely

You can chain operators into a pipeline. Each one reads the stream above it and feeds the one below, top to bottom.

users.filter { it.isActive }
    .map { it.name }

Handle Errors in the Chain

The catch operator intercepts exceptions upstream so you can emit a fallback instead of crashing the whole stream.

repo.load().catch { emit(emptyList()) }

Keep Logic in the ViewModel

Do your combine and map work in the ViewModel, then expose one clean state flow. The Composable stays simple and dumb.

Quick Check

Pick the operator for the job.

Recap: Mapping & Combining

Great work! Operators like map, filter, and combine reshape and merge streams in the ViewModel so the UI gets exactly the state it needs. 🎯

Preguntas frecuentes

¿La lección «Mapear y combinar Flows» es gratis?

Sí — el texto completo de «Mapear y combinar Flows» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Jetpack Compose Academy, actualiza a CoddyKit PRO. El curso de Jetpack Compose Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Mapear y combinar Flows»?

Transforme los streams antes de que lleguen a la pantalla. Practicas Jetpack Compose Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Jetpack Compose Academy?

No se requiere experiencia previa. Jetpack Compose Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Mapear y combinar Flows»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Jetpack Compose Academy?

Sí. Cada lección de Jetpack Compose Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Jetpack Compose Academy