CODEWITHSUNDEEP
androidkotlinandroid-jetpack-compose
ildvzg68472
ildvzg68472

Reputation: 447

how to enable @Preview for kotlin desktop compose demo project?

I downloaded the demo project to study kotlin compose.

I try to add @Preview on a @Composable fun, but get warn that: Unresolved reference: Preview

I add implementation("androidx.compose.ui:ui-tooling-preview:1.1.1") in kotlin.sourceSets.named("CommonMain").dependencies in build.gradlw.kts:

        named("commonMain") {
            dependencies {
                api(compose.runtime)
                api(compose.foundation)
                api(compose.material)
                api(compose.materialIconsExtended)
                implementation("androidx.compose.ui:ui-tooling-preview:1.1.1")
            }
        }

But still get Unresolved reference: Preview error.

I use IDEA 2021.3.3, Build #IU-213.7172.25, built on March 16, 2022.

Upvotes: 15

Views: 15873

Answers (4)

mello
mello

Reputation: 31

As of October 2024, I have my Compose Multiplatform IDE Support plugin installed.

And then I include the org.jetbrains.compose.ui:ui-tooling-preview-desktop in my desktopMain.depencies

TAKE NOTE ITS NOT org.jetbrains.compose.ui:ui-tooling-preview USE org.jetbrains.compose.ui:ui-tooling-preview-desktop for desktop preview as is indicated in the name

enter image description here

After that make sure to remove the previous import and use the new import after syncing then your good to go

Upvotes: 1

Linden X. Quan
Linden X. Quan

Reputation: 782

Thanks @Roman,

As of now 2024.Jan, we just need to install plugin Compose Multiplatform IDE Support.

And then you will see compose ICON next to the @preview function
enter image description here

Upvotes: 3

Alexis Tamariz
Alexis Tamariz

Reputation: 896

First of all, we need to understand that we are creating our composables or views into the commonMain into the shared module. So, we can’t specify to the IDE which platform we need to preview. This should be your folder structure.

|- sharedModule
    |- androidMain
    |- desktopMain
    |- commonMain
        |- composables

Then we need to create the previews into each platform we’ll need as following.

  1. Add ui preview tooling dependency for each sourceSet we want to preview.
val compose_version = "1.4.1"

val commonMain by getting {
    dependencies {
        // we don't need add anything in here
    }
}

val desktopMain by getting {
    dependencies {
        implementation("org.jetbrains.compose.ui:ui-tooling-preview:${compose_version}")
    }
}

val androidMain by getting {
    dependencies {
        implementation("org.jetbrains.compose.ui:ui-tooling-preview:${compose_version}")
    }
}

  1. Add your preview into the specific sourceSet module.

    We imagine that we have a MyComposable view.

    // commonMain/composables/MyComposable.kt
@Composable
fun MyComposable() {
    Text(text = "Hello there!")
}

    Now, we need to create our preview into the needed preview sourceSet platform module.

    // androidMain/previews/MyComposablePreview.kt

@Composable
@Preview // now we are able to call the preview annotation
fun MyComposablePreview() {
    MyComposable()
}

    And we can add for desktop for example if needed.

    // desktopMain/previews/MyComposablePreview.kt

@Composable
@Preview
fun MyComposablePreview() {
    MyComposable()
}

    Your files should look like this.

    |- sharedModule
    |- commonMain
        |- composables
            |- MyComposable.kt
    |- desktopMain
        |- previews
            |- MyComposablePreview.kt
    |- androidMain
        |- previews
            |- MyComposablePreview.kt

    And that’s it! Hope it be helpful.

Upvotes: 25

Roman
Roman

Reputation: 860

You need to import androidx.compose.desktop.ui.tooling.preview.Preview to preview in desktop.

Go to Settings > Plugins > search in the marketplace for Compose Multiplatform IDE Support and Install this plugin.

After that, you can use Preview annotation and it will import the correct lib.

Upvotes: 49

Related Questions