One thing that seems a little bit off is that our ...

# compose-desktop

[Colton Idle]

One thing that seems a little bit off is that our Desktop sample app compiles and runs just fine but has red lines all over. We're using Android Studio bumblebee canary 6. Using JDK14 as my JAVA_HOME. Using Android Gradle Plugin 7.1.0-alpha06 as well.

Edit: Used Android Studio Arctic fox and downgraded to AGP 7.0.0 and I get the same issue. /shruggie

[Alexander Kurasov[JB]]

And what are the error messages? Do you have the same issue in Arctic Fox?

[Colton Idle]

Alex, no "error" when compiling, it just says that it can't resolve MuAppTheme and ToggleButtons. Yes, I tried AF and AGP 7 instead of Bumblebee and 7.1.0-alpha0x

[Colton Idle]

Hover over MuAppTheme:

Unresolved reference: MuAppTheme

Hover over Column "error":

@Composable invocations can only happen from the context of a @Composable function

Hover over ToggleButtons

Unresolved reference: ToggleButtons

Hover over Text

@Composable invocations can only happen from the context of a @Composable function

[Colton Idle]

It's basically as if the dependency resolution isn't working, but when running the app everything resolves. But it just makes development difficult.

[Colton Idle]

If I take the multiplatform template and update it to AGP 7.0.0, gradle 7.1 then everything still works fine, so it seems like it's something in my specific setup, but yeah. Was hoping if anyone had any ideas because I'm kind of lost on why it would compile fine, but have "errors" in the IDE.

[Colton Idle]

Hm.

If I swap out my code with the code from the template then I get no red lines...

fun main() = application {
    Window(onCloseRequest = ::exitApplication) {
        DesktopMaterialTheme {
            Text("It works")
        }
    }
}

Maybe my theme is bad?

Maybe someone can tell?

commonMain contains this theme

@Composable
fun MuAppTheme(darkTheme: Boolean = false, content: @Composable () -> Unit) {
    val colors = if (darkTheme) DarkColorPalette else LightColorPalette

    ProvideMuColors(colors) {
        MaterialTheme(content = content)
    }
}

[Colton Idle]

ToggleButtons is also defined in commonMain and so now it comes up as red when I replace the theme.

[Colton Idle]

Added this to my commonMain (following the template)

@Composable
fun App2() {
    var text by remember { mutableStateOf("Hello, !") }

    Button(onClick = {
        text = "Hello, fd"
    }) {
        Text(text)
    }
}

and it auto completes just fine...

[Colton Idle]

But turns red once it's actually added.

[Colton Idle]

Anyway. I quit for now. Please let me know if this looks like a bug, or if it looks like I'm setting something up incorrectly. Sleep time!

[Alexander Kurasov[JB]]

Could you share minimal example with red lines here, please? I’ll play with it when have some spare time

[Colton Idle]

I will try to repro later today. Thanks @Alexander Kurasov[JB]

[Colton Idle]

Oooh! Able to repro in the template!!!

[Colton Idle]

Narrowing down on a smaller repro... 🤞

[Colton Idle]

The trick is that you have to invalidate caches and restart seemingly for this problems to take into effect after you cause the issue.

[Colton Idle]

@Alexander Kurasov[JB]

Got a repro!

1. Open up the multi-platform template.
2. Add Theme.kt in commonMain

[Colton Idle]

import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.Stable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.graphics.Color

private val LightColorPalette =
    MuAppColors(iconC1 = Color.Blue)

private val DarkColorPalette = MuAppColors(iconC1 = Color.Red)

@Composable
fun MuAppTheme(darkTheme: Boolean = false, content: @Composable () -> Unit) {
    val colors = if (darkTheme) DarkColorPalette else LightColorPalette

    ProvideMuAppColors(colors) {
        MaterialTheme(
            content = content
        )
    }
}

@Stable
class MuAppColors(
    iconC1: Color,
) {
    var textOrIcon_c1 by mutableStateOf(iconC1)
        private set

    fun update(other: MuAppColors) {
        textOrIcon_c1 = other.textOrIcon_c1
    }
}

@Composable
fun ProvideMuAppColors(colors: MuAppColors, content: @Composable () -> Unit) {
    val colorPalette = remember { colors }
    colorPalette.update(colors)
    CompositionLocalProvider(LocalAmbientMuProviderColors provides colorPalette, content = content)
}

private val LocalAmbientMuProviderColors =
    staticCompositionLocalOf<MuAppColors> { error("No MuColorPalette provided") }

[Colton Idle]

Use this Theme in desktop

fun main() = application {
    Window(onCloseRequest = ::exitApplication) {
        MuAppTheme {
            Text("")
        }
    }
}

then invalidate caches and restart

[Colton Idle]

"Error"