CODEWITHSUNDEEP
androidkotlinandroid-jetpack-composekotlin-multiplatform
Vlad Alexeev
Vlad Alexeev

Reputation: 2214

Compose Preview not showing in Android Studio kotlin multiplatform project

My latest jellyfish Android studio doesn't show me preview for Compose mutliplatform composable functions. Here's build.gradle :

sourceSets {
    val desktopMain by getting
    
    androidMain.dependencies {
        implementation(libs.compose.ui.tooling.preview)
        implementation(libs.androidx.activity.compose)
    }
    commonMain.dependencies {
        implementation(compose.runtime)
        implementation(compose.foundation)
        implementation(compose.material)
        implementation(compose.ui)
        implementation(compose.components.resources)
        implementation(libs.kotlinx.serialization.json)
        implementation(compose.components.uiToolingPreview)
        implementation(libs.navigation.compose)
        implementation(libs.androidx.lifecycle.viewmodel.compose)
    }
    desktopMain.dependencies {
        implementation(compose.desktop.currentOs)
    }
}

here's lib.versions.toml :

compose-ui-tooling-preview = { module = "androidx.compose.ui:ui-tooling-preview", version.ref = "compose" }

here's my code :

@Composable
fun MainMenuContent(
    viewState: MainMenuState
) {
    Column {
        repeat(5) {
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                IconTextRow(Icons.Rounded.Home, stringResource(Res.string.all_purpose))
                IconTextRow(Icons.Rounded.Home, stringResource(Res.string.all_purpose))
                IconTextRow(Icons.Rounded.Home, stringResource(Res.string.all_purpose))
            }
        }
    }
}

private class MainMenuParameterProvider : PreviewParameterProvider<MainMenuState> {
    override val values: Sequence<MainMenuState>
    init {
        val defaultState = MainMenuState(isPaid = false)
        values = sequenceOf(
            defaultState,
            defaultState.copy(isPaid = true)
        )
    }
}

@Preview
@Composable
private fun MainMenuPreview(
    @PreviewParameter(MainMenuParameterProvider::class) param: MainMenuState
) {
    MaterialTheme {
        MainMenuContent(
            param
        )
    }
}

Upvotes: 7

Views: 1133

Answers (1)

Jadu
Jadu

Reputation: 729

Origin post : Jetpack Compose preview can no longer be rendered

This happened while I was working with Kotlin Multiplatform and thanks to @aga for the answer, the implementation is a quite different but concept remains the same

In you build.gradle.kts go to the bottom end of the file and define the dependencies and add this debugImplementation "androidx.compose.ui:ui-tooling"

dependencies {
    debugImplementation("androidx.compose.ui:ui-tooling")
}

How to use it

sync the project and Now go to android[main] and create a Kotlin file and annotate with @androidx.compose.ui.tooling.preview.Preview and @composable

Example

@androidx.compose.ui.tooling.preview.Preview
@Composable
fun preview() {
    Yourcomposable()
}

That's all, Happy coding

Upvotes: 1

Related Questions