jetc.dev Newsletter Issue #190

Published: 2023-11-14

This week, we peek at the latest Compose Compiler and decide whether it makes sense to load data from a remote source directly in a composition. We explore BasicTextField2() (the sequel!), optimize our composables, and explore the ramifications of JetBrains’ plans for Fleet.

Plus, we see a library with a general-purpose implementation of something I like to do after a hard day of writing newsletter issues: collapse.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

Compose Compiler 1.5.4 is out, primarily offering support for Kotlin 1.9.20. Beyond that and bug fixes, the biggest thing is a new experimental option to enable “strong skipping”, where even composables with unstable parameters can be skipped in certain cases.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Do We Fetch Data in a Composition?

The answer is: ideally, you don’t. At best, you use LaunchedEffect(), but better options stem from viewmodel integration, as we see in this week’s highlighted Stack Overflow question.

How Can I Have One Composable’s Content Depend on Another Composable’s Size?

In this case, a developer wants a row of circles to be limited by the size of some adjacent text. There are many possible solutions, of varying complexity, including creating a custom layout. Explore the options in this week’s highlighted Kotlinlang #compose Slack thread!

Composable Commentary

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

Medium: BasicTextField2: A TextField of Dreams [1/2]

Alejandra Stamato explores BasicTextField2() (which, thankfully, is a temporary name). BasicTextField() had a lot of warts in its API, which BasicTextField2() attempts to address via a dedicated TextFieldState, a more expressive way to indicate how many lines the field can use, and more.

Video: Practical magic with animations in Jetpack Compose

Google’s Rebecca Franks looks at the vast array of animation APIs available in Compose UI, from animateAsState() through AnchoredDraggable and more!

Welcome Fleet with Kotlin Multiplatform Tooling

Hadi Hariri announced a preview of Kotlin Multiplatform support for Fleet. However, buried in that announcement is:

the target audience for IntelliJ IDEA will primarily remain that of server-side developers targeting the JVM. While it will be possible to open, navigate, and build Kotlin Multiplatform projects in IntelliJ IDEA and Android Studio, other features such as platform-specific run configurations, Compose Multiplatform features, and many other things that facilitate multiplatform development will be supported in Fleet only.

This indicates that Fleet will be the Compose Multiplatform IDE of choice.

Navigating Pitfalls - When to Use derivedStateOf with remember(key) in Jetpack Compose

Saurabh Arora dives into derivedStateOf() and a particular problem you can encounter, when the value stops changing, because it was dependent on some state object that you are no longer using. The solution is to use a keyed form of remember() with derivedStateOf(), and this post outlines two specific approaches for doing that.

Implementing Biometric Authentication in Android with Jetpack Compose- A Step-by-Step Guide

Petros Efthymiou brings us an extensive post with all the details for implementing BiometricPrompt inside of a Compose UI project, from detecting if biometrics are available to displaying the prompt, finding out the result, and dealing with errors.

Navigation Drawers for Android TV using Jetpack Compose

Joe Birch is back with another Android TV post, this time exploring having a side navigation drawer, one that collapses down to icons in the closed state but expands to have captions and support selection when it is focused.

Medium: Conscious Compose optimization

Andrey Bogomolov published a massive guide to optimizing your Compose code, from @ReadOnlyComposable and LookaheadLayout() to Baseline Profiles and composition tracing.

Medium: Advance Layout Techniques in Jetpack Compose

Rafsanjani Abdul-Aziz walks us through implementing a custom Layout()-based composable, in this case implementing a CircularLayout() for laying out a collection of children in a circle with a given radius.

Other Interesting Links

• Custom Material3 Jetpack Compose Date picker
• Jetpack Compose UI Testing in Android
• Medium: Coil Compose — Loading and Caching Images in Compose
• Medium: Enhancing Accessibility in Android Compose with CollectionInfo
• Medium: Loading Local HTML files in Compose Multiplatform WebView
• Medium: Make a Ticket View with Jetpack Compose
• Medium: Shimmer effect in Jetpack Compose
• Medium: State in Widget — Jetpack Glance
• Medium: ViewPager in Android Jetpack Compose
• Medium: Window Insets In Jetpack Compose

Resource Roundup

100% pure code!

GitHub: JetBrains / lets-plot-skia

JetBrains released a Kotlin Multiplatform library for embedding Lets-Plot charts in Compose Multiplatform projects.

GitHub: evant / compose-collapsable

Eva Tatarka created a general-purpose collapse system, powered by a CollapsableColumn() composable and a CollapsableBehavior, designed to plug into Compose UI’s existing nested scrolling support.

GitHub: skydoves / Orbital

Jaewoong Eum created a library for animations, with an emphasis on shared element transitions.

GitHub: DAKSHSEMWAL / mdparserkit

DakshSemwal-zs brings us parseMarkdown() and textMarkDown() functions that convert Markdown into AnnotatedString instances for rendering in Text() composables.

Other Interesting Links

• Following Arrows (Compose Multiplatform example of arrows following the finger or mouse)
• GitHub: Aghajari / LazyFlowLayout (lazy container that follow CSS FlexBox rules)

Notable Releases

WebView for JetBrains Compose Multiplatform is up to 1.7.0, with a breaking change from Java CEF Browser to Kotlin CEF Browser for Compose Desktop.