jetc.dev Newsletter Issue #218

Published: 2024-06-11

We got a tiny Compose Multiplatform patch release, plus updates to Maps for Compose, Circuit, and Compose Stable Markers!

We also look at the use of nullable slot parameters and where to log analytics events. We explore accessibility testing and having sample code pulled into KDocs. And we look at drag-and-drop and dependency inversion in Compose Multiplatform.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

Compose Multiplatform is up to 1.6.11 with a variety of bug fixes.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Can I Skip the Leading and Trailing Icons?

OutlinedTextField() supports leadingIcon and trailingIcon slot parameters. null (or not including the parameter) means “no icon, please”. When wrapping OutlinedTextField() in your own design system, if you also want to expose those icon slots in your API, you will want them to also be nullable, as we see in this week’s highlighted Stack Overflow question.

How Do I Control the Order of LifecycleEventEffect()?

What starts as a question about the order of invocation of sequential LifecycleEventEffect() calls turns into a discussion about where and how to log analytics events, especially those tied to specific screens. Google’s Ian Lake suggests integrating the analytics into the use of Navigation for Compose, as we see in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Accessibility Tests in Compose - Name, Role, Value

Eevis Panula is back, continuing her exploration of accessibility. This time, she looks at what to test with respect to accessibility and how to write those tests. Eevis focuses on WCAG’s “name, role, value” triad, with tests to confirm that our composables have proper results for each.

Medium: 🥳 Finally! — Working Samples 📚 in Android Studio

Anton Popov looks at the support for @sample in KDocs to pull in Compose sample code, available in Compose 1.7.0-beta02 and Android Studio Koala 2024.1.1 RC1. Anton explains how this works and how Google implemented it for the Compose artifacts.

Say hi like you’re AI — in Compose for Desktop

Sebastiano Poggi really liked the Google Gemini Web site’s animated text gradient and wanted to reproduce it for Compose for Desktop. This started with a reverse-engineering of the Web animation, then applying the same configuration to Compose via a ShaderBrush employing a LinearGradientShader, an Animatable, followed by more reverse-engineering and trigonometry.

Medium: Advanced Bottom Sheet With Flexible Configuration for Compose

Pavlo Stavytskyi need a more flexible bottom sheet than we get with Compose Material3, such as supporting more than two expanded states and being able to dynamically change the number and size of those states. Pavel’s solution employs SubcomposeLayout() and anchoredDraggable() as part of a custom BottomSheetScaffold().

Medium: Web-based drag-and-drop in Compose Multiplatform

Manel Martos Roldán has a desktop Lottie viewer project written in Compose Multiplatform. This supports drag-and-drop: you can drop files from macOS Finder, etc. into the LottieViewer app to view them. In this post, Manel explores adding similar drag-and-drop support for a Compose for Web/Wasm edition of the same project.

Dynamic Layouts with ContextualFlowRow and ContextualFlowColumn

Donovan LaDuke examines ContextualFlowRow() and ContextualFlowColumn(), two new lazy containers. Quoting Donovan, “These new components allow for layouts that show a fixed number or rows or columns respectively while filling the allocated space. This has major advantages for creating consistent layouts for dynamic lists without a ton of work, but also makes screens better adapt to large form factor devices like tablets and foldables.”

How I Finally Memorized Modifier Ordering in Compose

Márton Braun used to work the way I do: try one modifier order, and if that doesn’t work, shuffle the modifiers around and see if you get better results. Márton extracts a “last-to-first, inside-to-outside” pattern and explains the derivation.

Medium: Dependency Injection in Compose Multiplatform

Nishant Aanjaney Jalan explores Kodein as an option for dependency inversion with Compose Multiplatform.

Medium: ConstraintLayout in Compose

amod kanthe gives us an extensive overview of ConstraintLayout(), including comparisons between View-based layouts and their composable counterparts.

Other Interesting Links

• Getting Started with Jetpack ViewModels and DataStore in Kotlin Multiplatform
• Jetpack Compose and Nested Scrolling Interoperability
• Medium: Adaptive Navigation Suite in Jetpack Compose
• Medium: Android Jetpack Compose Keyboard Cheat Sheet
• Medium: Building a Speedometer widget using Jetpack Compose Canvas API
• Medium: Camera in Compose Multiplatform / Kotlin Multiplatform
• Medium: Creating Custom PDFViewer in Jetpack Compose Android
• Medium: Developing for Foldable and Multi-Screen Devices with Jetpack Compose
• Medium: Getting Started with Compose Multiplatform and Koin: A Practical Guide
• Medium: Handeling status bar and Top App Bar using WindowInsets usind Jetpack Compose
• Medium: How to Create a Stunning 3D Border in Jetpack Compose
• Medium: Implement Compose Navigation in Compose Multiplatform
• Medium: Jetpack Compose for Android in KMP
• Medium: Jetpack Compose: Responsive UI Two Ways
• Medium: Leverage the essentials: Jetpack Compose best practices
• Medium: Making a custom Semicircular Slider and grasping the concept of Canvas in Jetpack Compose
• Medium: Type Safe arguments in Navigation Compose on Android
• Medium: Type-Safe Navigation In Jetpack Compose
• Slides: Deriving derived state: derivedStateOf explained

Resource Roundup

100% pure code!

I came up empty-handed in my weekly search for new, documented, and interesting libraries! 🙂‍↕️ If you publish something, please let me know!

Notable Releases

Maps for Compose is up to 5.0.3, fixing a few bugs.

Circuit now has a 0.22.2 release, updating to the latest Compose Multiplatform release, updating some Jetpack dependencies, and making some tweaks to pausableState support.

Compose Stable Marker — an extracted copy of @Stable and @Immutable for use in non-Compose modules — is up to 1.0.5, extending the Compose Multiplatform support to include Compose for Web/Wasm.