Jetpack Compose Appbaricon Complains That "functions Which Invoke @composable Functions Must Be Marked With The @composable"

I used jetpack compose AppBarIcon element but I got the error: Functions which invoke @Composable functions must be marked with the @Composable' when I call a composable function

Solution 1:

First thing to note that Composable function mustonlybe called inside another Composable function. Now back to your question, onClick parameter which accept the function is not a composable function. So calling @Composable function inside a onClick isn't the option and hence throw an error Functions which invoke @Composable functions must be marked with the @Composable. Code to resolve this issue.

classtestActivity : AppCompatActivity() {
overridefunonCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    setContent {
        var loadView = +state { false }
        Column {
            AppBarIcon(+imageResource(R.drawable.dashboard)) {
                loadView.value = true
            }
            Text("Hey")
            if (loadView.value)
                composableFunction()
        }
    }
  }
}
@Composable()funcomposableFunction() {
    Text("appbar content")
}

Reason because onClick is not composable: All Composable function are called at the same time to compose the UI completely.While onClick is called later after the UI is already composed. So you need to use the state to recompose the UI and load composable function after onClick occur.