跪拜 Guibai
← All articles
Frontend · Flutter · Android

Compose 1.12 Lands: Mesh Gradients, WCG/HDR Pipeline, and Deferred Animation for Predictive Back

By 恋猫de小郭 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Compose 1.12 closes the startup performance gap with Views and delivers the deferred animation infrastructure that Predictive Back and gesture-driven navigation depend on — two blockers for teams shipping modern Android UX. The mesh gradient and WCG/HDR pipeline also mean Compose can now render the fluid, color-accurate designs that product teams have been asking for without workarounds.

Summary

The August release of Jetpack Compose core module 1.12 fills in several UI framework gaps rather than reworking architecture. A new Mesh Gradient API uses GPU interpolation across a 2D grid of colored vertices, landing as a `Painter` rather than a Modifier to keep animation straightforward. The wide-color gamut and HDR pipeline is now end-to-end: Compose Color flows through Paint, Shader, and Canvas without being clamped to sRGB on API 29+.

Rich text editing gets a lift as `TextFieldBuffer` gains native style APIs — `addStyle()`, `getSpanStyles()`, `getParagraphStyles()` — so formatting lives inside the editing model instead of being layered on at render time. Programmatic text selection arrives via `SelectionState`, letting code select, extend, and query selected text across multiple Composables. Deferred animation primitives (`DeferredAnimatedContent`, `DeferredAnimatedVisibility`) graduate from experimental, connecting gesture-driven phases to automatic transitions with velocity transfer, which directly enables Predictive Back and drag-to-dismiss interactions.

Performance work brings a keyed `SideEffect` that can be up to 90% faster than `LaunchedEffect` for lightweight side effects, and startup time (TTID) now matches traditional Views in Google's benchmarks. Other additions include Grid named areas for adaptive layouts, Credential Manager integration for TextField, and a `LayerOutsets` API to prevent clipping on offscreen graphics layers.

Takeaways
Mesh gradients are exposed as a `MeshGradientPainter` used with `Modifier.paint()`, backed by hardware-accelerated `Canvas.drawMesh`.
The WCG/HDR pipeline now preserves Display P3 and Adobe RGB color through the full Compose → Paint → Shader → Canvas chain on API 29+.
`TextFieldBuffer` supports `addStyle()`, `getSpanStyles()`, and `getParagraphStyles()`, moving rich-text formatting into the editing state model.
`SelectionState` enables programmatic selection, extension by word, and cross-Composable text queries via `getSelectableTexts()`.
`DeferredAnimatedContent` and `DeferredAnimatedVisibility` connect gesture-controlled animation phases to automatic transitions with velocity transfer.
Grid named areas let components declare `areaId` strings while layout structure is defined separately in a configuration block, targeting foldable and multi-screen devices.
A keyed `SideEffect` API runs up to 90% faster than `LaunchedEffect` for lightweight side effects and executes earlier in the composition cycle.
Startup TTID now matches Views in Google's benchmarks; scrolling jank rate has held at 0.21% since Compose 1.9.
TextField gains Credential Manager integration via `credentialRequest` semantics, supporting passkeys and saved credentials on API 34+.
`LayerOutsets` expands `GraphicsLayer` visual bounds to prevent clipping of blur, shadow, and offscreen-rendered content.
Compose 1.12 requires `compileSdk` API 37 and AGP 9.2.0 minimum.
Conclusions

Stabilizing mesh gradients as a `Painter` rather than a Modifier keeps the API composable with existing animation infrastructure — vertices and colors flow through the normal draw pipeline instead of requiring a parallel rendering path.

The deferred animation velocity transfer solves a long-standing UX papercut where gesture-driven transitions would visibly restart after finger lift, which is essential for Predictive Back to feel native rather than bolted-on.

Moving rich-text styles into `TextFieldBuffer` state rather than layering them via `OutputTransformation` eliminates the fragile offset-mapping problem that made building WYSIWYG editors in Compose painful.

Grid named areas decouple layout structure from component identity, which directly serves Android's multi-form-factor push without requiring components to know about screen size.

The 90% speedup claim for keyed `SideEffect` is real but narrow — it only applies when no coroutine work is needed, and the earlier execution order means it cannot blindly replace `LaunchedEffect` or `DisposableEffect`.

TTID parity with Views removes one of the last quantitative arguments against adopting Compose for performance-sensitive apps, though TTFD still trails and wasn't updated in this release.

Concepts & terms
Mesh Gradient
A gradient defined by a 2D grid of vertices, each with a position and color. The GPU interpolates colors across the mesh surface, producing organic, multi-color fluid backgrounds that single-axis gradients cannot.
Wide Color Gamut (WCG) / HDR Pipeline
The rendering path that preserves extended color spaces like Display P3 or Adobe RGB from app code through to the platform's graphics layer, without intermediate clamping to the narrower sRGB color space.
Deferred Animation
A Compose animation pattern that splits a transition into two phases: a gesture-controlled phase (e.g., finger drag) and an automatic phase that takes over on finger lift, carrying forward the gesture's velocity for seamless motion.
Predictive Back
An Android system navigation gesture where a back swipe shows a preview of the destination screen before the navigation commits, requiring the animation to follow the finger and then complete automatically.
TTID / TTFD
Time To Initial Display measures cold-start time to the first rendered frame; Time To Full Display measures time until all content is loaded and interactive. TTID parity with Views means Compose no longer adds measurable startup latency.
LayerOutsets
A Compose Graphics API that expands the visual bounds of a `GraphicsLayer` beyond its measured size, preventing content like blurs and shadows from being clipped when the layer is promoted to an offscreen buffer.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗