jetc.dev Newsletter Issue #220

Published: 2024-06-25

KotlinConf 2024 published its videos, and there was a lot of Compose coverage!

We also explore synchronized scroll states and Snapshot.withMutableSnapshot(). We examine DropDownMenu(), MVI, and using List in a @Preview. And we look at a multiplatform ConstraintLayout() and a framework for building design systems.

By the way, don’t forget that you can search the back issues for particular topics, composable names, etc.!

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Can We Synchronize Scroll States?

Suppose you have a pager containing a series of LazyColumn() composables. It is easy to give them each a separate state… but what if you want the scrolling to be synchronized, so “all” the columns scroll in tandem? That is not supported very well; see a partial solution in this week’s highlighted Stack Overflow question.

How Can I Cleanly Update My State Twice?

If you make sequential updates to a MutableStateList, you may wind up rendering composables based on that list multiple times, which may not give you a pleasant result. Use Snapshot.withMutableSnapshot() to avoid this effect, as we see in this week’s Kotlinlang #compose Slack thread.

KotlinConf 2024

JetBrains’ flagship conference for Kotlin had many Compose-related presentations, including:

• Android, Compose, Multiplatform & Server - Inject them all with Koin
• Compose Migration Side Effects - What Can Go Wrong?
• Compose Multiplatform on mobile at Instabee for over a year
• Compose Multiplatform performance on iOS
• Compose UI for… a light switch
• Diving into Advanced Compose Multiplatform Modifiers and Their Impact on Multiplatform Development
• Evolving Compose Multiplatform on iOS and Beyond
• Guide to Improving Compose Performance
• It’s Compose O’Clock, Draw on My Watch!
• Tap it! Shake it! Fling it! Sheep it! - The Compose Gesture Animations Dance!
• There’s more than a mouse

Composable Commentary

Posts, videos, and other new information related to Jetpack Compose!

Medium: Creating a DropDown Menu in Jetpack Compose

Ojiakor Michael Chiedozie walks us through the use of DropDownMenu() and DropDownMenuItem(), including using the clickable() modifier to detect menu item clicks.

Medium: Embedding Compose Multiplatform code into Medium articles

Manel Martos Roldán demonstrates how to leverage GitHub pages and JSFiddle to create an embeddable edition of a Compose for Web/JS composition that you can display in Medium posts like this one! This approach does not work for all browsers and configurations — my locked-down Firefox raises Content Security Policy issues for example — but it still suggests a promising direction for Compose Multiplatform documentation.

Medium: A robust MVI implementation with Jetpack Compose

Maxime Michel walks us through the model-view-intent (MVI) architecture pattern and demonstrates a small framework-free implementation of that pattern.

Using Lists in Compose Previews

Donovan LaDuke demonstrates the use of CollectionPreviewParameterProvider, which allows us to use a simple List as the source of sample data for a preview composable.

Medium: Efficient Search with Lazy Layouts in Jetpack Compose

Meet Patadia shows us how to implement search in Compose, including building a SearchField(), having a viewmodel emit a viewstate with the search results, and rendering those results in a LazyVerticalGrid().

JetpackCompose.app Newsletter: Dispatch

Vinay Gaba publishes a newsletter for Jetpack Compose! What a concept! 😁 Vinay’s general approach is to demonstrate a technique or API per issue. For example, Issue 3 walks us through the use of rememberGraphicsLayer().

Medium: KSP and Compose Navigation

Ali Shobeyri walks us through implementing a KSP-based annotation processor to code-generate Navigation for Compose router, akin to Compose Destinations and other libraries.

Medium: Jetpack Glance

Stefano Nitali gives us a ground-up view of how to build app widgets using Glance, with particular emphasis on using adaptive layouts to support various app widget sizes.

Other Interesting Links

• Firebase Authentication With Jetpack Compose. Part 1
• Medium: Compose Chronicles: State of the Art — produceState, derivedStateOf & snapshotFlow
• Medium: CountryCodePicker in Compose Multiplatform for Android and iOS
• Medium: Creating Interactive HTML Content in Jetpack Compose
• Medium: How to Use ViewModel with Jetpack Compose
• Medium: Implementing Motion Design With Jetpack Compose: Vertical Scrolling Effect
• Medium: Jetpack Compose Basics: From Zero to Hero in UI Design
• Medium: JetPack Compose — How To Draw Rectangle With Circular Cut Out
• Medium: Master Kotlin Multiplication navigation with Decompose
• Medium: TooltipBox in Compose Multiplatform for Android and iOS
• Medium: Type-Safe Navigation Jetpack Compose
• Seamless Screenshot Testing for Compose with Screenshotbot

Resource Roundup

100% pure code!

GitHub: Lavmee / constraintlayout-compose-multiplatform

Samuel Gagarin has been building a port of Google’s ConstraintLayout() to support Compose Multiplatform, until some day when the official edition might support more than Android.

GitHub: composablehorizons / composetheme

Alex Styl is working on a framework for defining custom design systems, with your own design tokens and custom properties. It even allows you to easily extend Compose Material and Compose Material3-based design systems.

GitHub: vinceglb / FileKit

Vincent Guillebaud brings us pickFile(), pickDirectory(), and saveFile() functions for Kotlin Multiplatform and Compose Multiplatform, providing a consistent bridge to platform-specific file and directory pickers.

GitHub: jordond / drag-select-compose

Jordon de Hoog offers us a Compose Multiplatform multi-select facility for LazyVerticalGrid() and LazyHorizontalGrid().

GitHub: iamjosephmj / Squishy

Joseph James wrote a library to help manage overscroll effects, centered around a overScroll() modifier to define the overscroll effect and fling behavior.

Notable Releases

Square’s Redwood library is up to 0.12.0, with support for Kotlin 2.0. It also removes the app.cash.redwood Gradle plugin and a bunch of deprecated APIs.

Jaewoong Eum’s Orbital library for shared element transitions and other animations is now out with a 0.4.0 release. This too supports Kotlin 2.0 and also adds support for Compose for Web/Wasm.