https://kotlinlang.org logo
Title
c

Colton Idle

08/09/2021, 4:35 PM
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
👀 2
a

Alexander Kurasov[JB]

08/10/2021, 7:49 AM
And what are the error messages? Do you have the same issue in Arctic Fox?
c

Colton Idle

08/10/2021, 8:08 AM
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
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
It's basically as if the dependency resolution isn't working, but when running the app everything resolves. But it just makes development difficult.
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.
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)
    }
}
ToggleButtons is also defined in commonMain and so now it comes up as red when I replace the theme.
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...
But turns red once it's actually added.
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!
a

Alexander Kurasov[JB]

08/10/2021, 8:55 AM
Could you share minimal example with red lines here, please? I’ll play with it when have some spare time
c

Colton Idle

08/10/2021, 3:21 PM
I will try to repro later today. Thanks @Alexander Kurasov[JB]
👍 1
Oooh! Able to repro in the template!!!
Narrowing down on a smaller repro... 🤞
The trick is that you have to invalidate caches and restart seemingly for this problems to take into effect after you cause the issue.
@Alexander Kurasov[JB] Got a repro! 1. Open up the multi-platform template. 2. Add Theme.kt in commonMain
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") }
Use this Theme in desktop
fun main() = application {
    Window(onCloseRequest = ::exitApplication) {
        MuAppTheme {
            Text("")
        }
    }
}
then invalidate caches and restart
"Error"