Hey I have this simple logic:

val products by viewModel.productEntryFlow.collectAsState(listOf())
LazyColumn {
    items(products) {
        Text(it.content + " Done: ${it.doneBy != null}")
    }
}

And that kinda works fine when the list itself gets modified (gets new entries etc) but it doesn't work when a single item changes e.g. the "doneBy" property is now null. If I collect the flow manually I see the changes but not with collectAsState. Can I fix that?. productEntryFlow is a Flow from SQLDelight and as I said manually collecting the flow works

I'm a bit confused about the new modifier mechanism. For example if I create my own LayoutModifierNode how can I get a Node? Do I just extend Node?

Good morning. I’ve set up a new Project with: • Gradle 7.5.1 • Kotlin 1.7.20 • Android Gradle plugin 7.1.3 • Compose 1.3.0 • Compose compiler 1.3.2 Copying the setup from my previous project, but when building, I got

org.jetbrains.kotlin.backend.common.BackendException: Backend Internal error: Exception during IR lowering

…

The root cause java.lang.RuntimeException was thrown at: org.jetbrains.kotlin.backend.jvm.codegen.FunctionCodegen.generate(FunctionCodegen.kt:47)

…

Caused by: org.jetbrains.kotlin.codegen.CompilationException: Back-end (JVM) Internal error: Couldn’t inline method call: CALL ‘public final fun <get-current> (): T of androidx.compose.runtime.CompositionLocal [inline] declared in androidx.compose.runtime.CompositionLocal’ type=android.content.Context origin=GET_PROPERTY

Method: null

File is unknown

The root cause java.lang.IllegalStateException was thrown at: org.jetbrains.kotlin.codegen.inline.SourceCompilerForInlineKt.getMethodNode(SourceCompilerForInline.kt:118)

…

Caused by: java.lang.IllegalStateException: couldn’t find inline method Landroidx/compose/runtime/CompositionLocal;.getCurrent()Ljava/lang/Object;

Any idea? I’m already going crazy 😄 Currently, I got a couple of KMP modules and a couple of Android one, but I also tried changing the KMP to plain JVM, without any improvement

What's the general guidance around extending

colorScheme

for Material 3? In Material 2 I used to do

val Colors.alertHigh: Color
  @Composable get() =
    if (!isSystemInDarkTheme()) Color(0xFFD0011C) else Color(0xFFFF3B2F)

with Material 3 only difference was the

Colors

→

ColorScheme

, but as you can see the custom colours tend to stand out from the rest.

One thing I am trying to figure out where I make mistake. Have screen A and Screens B, C, D ( bottom tabs) and screen E outside of bottom tab bar. In screen A i get data from my viewmodel all good. I go to tab B than from there I open screen A. Once I am done I want to return to screen A. And I achieve it. But problem is that my viewmodel call init and make network request that I do not want to make. Any idea how to possible solve it?

I have 2 UI events that update UI state triggering simultaneously in one go. For example, I want to update my state on focus of a certain UI element, and on blur (focus lost) of another. This can happen easily if the user clicks/taps/tabs from one text field to another. Both UI elements update the state when they are focused/blurred, so in 1 user action 2 state updates are triggered. That led to a race condition: both events would call a callback with a new state, and the last one would set the state to the final value, overwriting the state set by the first one. I do this by passing state into my composable functions and a callback. I

copy

the state and pass it to the callback. I've now refactored the callback to not take a state

S

, but take a

S.() -> S

lambda instead. This leads to lambdas in lambdas everywhere. While it's not a big issue (and Kotlin's last-lambda-argument passing helps a lot here), I wonder: Is there a different idiomatic Kotlin+compose way to handle this situation? And how would you name the callback? First I had something like

onNewState: (S) -> Unit

, but now it's more verbose:

onNewStateTransform: S.() -> S

. Any better name suggestions?

Hello! I'm trying to adopt material3 to my app and stuck with button colors. I'm using Button (Filled) and after switch to M3 it's background become transparent. And there is no difference between primary and secondary colors. Do I need to make additional configurations for MaterialTheme (3) to get colored button background like it was in M2?

I want to have an universal component looking like this image. I'd like to have a one composable slot for rendering Items(). That will render that item's icon, but the connection line (and optionally gradient) would be drawn by the parent/wrapping component. I can send the item's color using a ParentDataModifier. But, Layout allows me only customize measuring/layouting, not adding an additional drawing (though drawing phase continues after it). What would be an ideal approach to this?

I've been working on form/field validation, and this is what I've come up with. Is it an abomination? Full code in thread, but I feel like I've done something wrong by using

mutableStateOf

in this way...

val totalCost by remember {
    mutableStateOf(Field(mutableStateOf("1.01"), validator = CurrencyValidator))
}

How do I optionally display a trailing icon? Right now when it has no content, it still takes up the space in the UI

trailingIcon = {
  if (enabled) {
    Icon(icon, null, Modifier.clickable { // stuff })
  } else {
    null
  }
}

this (with or without the else statement) for example doesn't work

hey I have a very specific use case for a

LazyRow

- we want all our items to have the same visible height on screen. (i.e. the smallest visible item grow to fit the other tallest visible item). We cannot have a

Row

as that requires measuring all items including offscreen items, and we may have more than 5-10 ui elements. We also dont want to measure offscreen items until they reach visible, then reset the height modifiers on only visible ones if the height is

>

the previous value We currently use an

onGloballyPositioned

modifier like so:

onGloballyPositioned {
                    if (props.rowHeight is RowHeight.MaxHeight) {
                        minHeightOnMaxHeightChange(with(density) { it.size.height.toDp() })
                    }
                }

we buffer the emission of each item so it only updates in smaller intervals if many are drawn on screen at once. It works in most cases and seems to be as performant as it can be. we then use a

CompositionLocal

to send the value to each item:

val minHeightOnMaxHeight = LocalMaxHeightValue.current
carouselIntervalContent.item.invoke(
    this,
    info.index,
    Modifier.thenIf(props.rowHeight is RowHeight.MaxHeight) {
        minHeightOnMaxHeight.takeIf { it > 0.0.dp }?.let {
            heightIn(min = it)
        } ?: rowHeightModifier
    }
)

However, we discover that some kinds of content (depending on their internals) continuously grow until they reach a too large height and crash. Is there a better way to do this?

I am still searching but thought I would ask here. How do I build an infinitely scrollable plane? ( or at least one that does not get clipped by the bounds of the device.) I am trying to build something that lays its items out in ever expanding concentric rings.

Hi All, My question as below Is collectAsStateWithLifecycle only applicable to cold flow, and not helpful for hot flow (e.g. stateFlow)? If not, can somehow show me how hotflow (e.g. stateFlow) differs when using

collectAsStateWithLifecycle

vs

collectAsState

? Thanks.

Hello! How can I set primary/secondary colors to OutlinedButton in material3 such as text and border color affected?

Another question: I see there is MaterialTheme.error. Is there such colors for success and warning? If there is no such values, how can I add them and make adoptive (for light, dark or custom theme)?

Hi all. I'm currently working with Material3 Cards. I can't manage to set card background to plain white, if I have an elevation >0. I understand that theres a dynamic "darkening" with increasing elevation, but I don't want that in my case. I know that I can set a custom color using

CardDefaults.cardColor(containerColor = ...)

but the thing is: it cannot be the exact same color representation as my Surface color (which is already #FFFFFFFF). If I set either to #FFFFFFFE it's working fine, but I don't like it. Without further research I believe that matching colors (in tone, not just refs) lead to that elevation-overlaying behavior. Is there a way around I'm not aware of?

Would it be a feasible practice to pass a

MutableSharedFlow

as a sort of event bus down the composable hierarchy that uses a sealed class with all possible actions callable on the viewModel, and then sending that in the top level composable? Or is it better to just stick to passing up all those onClicks as lambdas...?

guys is there a good sample app with custom components that I can take a look?

Text(
    text = label,
    textAligh = TextAlign.Center,
    modifier = Modifier.width(labelWidth),
)

adding

textAligh

gives me an error:

None of the following functions can be called with the arguments supplied.
Text(AnnotatedString, Modifier = ..., Color = ..., TextUnit = ..., FontStyle? = ..., FontWeight? = ..., FontFamily? = ..., TextUnit = ..., TextDecoration? = ..., TextAlign? = ..., TextUnit = ..., TextOverflow = ..., Boolean = ..., Int = ..., Map<String, InlineTextContent> = ..., (TextLayoutResult) → Unit = ..., TextStyle = ...) defined in androidx.compose.material3
Text(String, Modifier = ..., Color = ..., TextUnit = ..., FontStyle? = ..., FontWeight? = ..., FontFamily? = ..., TextUnit = ..., TextDecoration? = ..., TextAlign? = ..., TextUnit = ..., TextOverflow = ..., Boolean = ..., Int = ..., (TextLayoutResult) → Unit = ..., TextStyle = ...) defined in androidx.compose.material3

so how am supposed to show the text with

textAlign

parameter?

Is it possible to use BackHandler to intercept back event for analytics purposes, but not handle it ?

https://github.com/togisoft/jetpack_compose_country_code_picker I've Updated Jetpack Compose Country Code Picker. Anyone in need can have a look

@romainguy Can we discuss Relay here or is that not related?

I see no reason why not. Not sure we have Relay experts around though

We don’t yet - but I can rope them in 🙂

Hi. I am trying to implement WebView in ModalBottomSheetLayout. Issue is WebView content is not scrolling inside Modal. It works fine in normal fragment/compose view. Couldn't find anything workable. Is there a way to make it work. Thanks

I’m running a really simple UI Unit test that tests a very basic composable and running it on firebase testlab but leading to

Test instrumentation process crashed.

Running it on Compose version 1.3 and

Low-resolution MDPI phone, Virtual, API Level 28

Has anyone come across this? More details in thread🧵

When writing a compose UI test on a Composable, is there a simple of way finding out what is causing a ComposeNotIdleException? The composable seems to work fine when you use it in the app and layout inspector doesn’t flag any issues w/ it… It would be nice if there were some way to print out which composable is recomposing and the input causing it to w/ some sort of debug flag on composeTestRule.

Hi Team, I am planning to create a tool that will display the names of the functions from which composables were created, in real time as the user navigates through the app. So far I have not come across any libraries which can do this. 1. Radiography on github creates a tree structure for the compose hierarchy, but I am not sure it can get the name of the functions that created the composables. 2. https://github.com/YvesCheung/UInspector this lib can get the source code information for the compose views. The second option seems to be the most viable one. Both libraries use reflection to accesss private compose tooling methods/variables. But before I am start working on my lib, I wanted to know if there are better and easier options to get the information that I need.

how can I get a reference to a view in jetpack compose?