How can I preview a Compose view when it need a parameter in Android Studio?

Issue

I can run Code A in Android Studio, I hope to preview UI when I'm designing, so I added Code B to Code A.

But Code B can't work, why? How can I fix it?

Code A

class MainActivity : ComponentActivity() {

    private val handleMeter by viewModels<HandleMeter>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SoundMeterTheme {       
                Surface(color = MaterialTheme.colors.background) {
                    Greeting(handleMeter)
                }
            }
        }
    }
}

@Composable
fun Greeting(handleMeter: HandleMeter) {
  ...
}

Code B

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    SoundMeterTheme {
        val handleMeter by viewModels<HandleMeter>()
        Greeting(handleMeter)
    }
}

Solution

Unfortunately, you can't. Preview does not support creating ViewModels and NavHost yet, for our bad. But what you can do instead is to use a fake data or a static data into ui, until the design finish and when you are ready to actually run it, replace the static data with the view model data.

Answered By - Mustafa Ibrahim