If you use compose multiplatform you might face the issue of not being able to preview your common code UI as its not officially supported yet. you can use Fleet to get a preview but i prefere Android Studio. here is how you can have previews in your common code in 2 simple steps.
1.Creating our annotation
In your compose multiplatform project go to composeApp > commonMain > kotlin and create a new nasted directories “androidx/compose/desktop/ui/tooling/preview” (you can copy and paste this to the new directory box)
create a new kotlin file called Preview, in this file create an expectation class like below:
package androidx.compose.desktop.ui.tooling.preview
@OptIn(ExperimentalMultiplatform::class)
@OptionalExpectation
expect annotation class Preview()2.Install the plugin
Install the Multiplatform IDE support plugin from the marketplace.
Finally use the annotation in common main!, make sure to import our newly created annotation instead of the one the comes from “org.jetbrains.compose.ui.tooling.preview.Preview”. now all you need to do is click on the little compose icon that appears next to your function name and you should see the preview window with your preview.
3.Refreshing the preview with a keystroke (optional)
Open android studio settings and go to keymap and search for “previewaction” you should see the action from the ide like below, right click on it and add your keystroke and press ok. now you should be able to refresh the preview with your keyboard shortcut without clicking on the icon with your mouse.
Thats it! if you find this useful comment below!