Android Studio Question posted in
The official documentation can be found here.

Android Studio – ERROR: Composable Functions Must Be Called Within a Composable Context

"@Composable invocations can only happen from the context of a @Composable function"

I’m new to jetpack compose and constantly getting this error "@Composable invocations can only happen from the context of a @Composable function" on adding icon and label in the Text Field.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun EditNumberField(
    value: String,
    @StringRes label: Int,
    @DrawableRes icon: Int,
    keyboardOptions: KeyboardOptions,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier
){
    TextField(
        value = value,
        label = { Text(stringResource(label)) },
        icon = {  Icon(painter = painterResource(id = icon), contentDescription = null) },
        keyboardOptions = keyboardOptions,
        onValueChange = onValueChange,
        singleLine = true,
        modifier = modifier,
        colors = TextFieldDefaults.textFieldColors(
            containerColor = Color(0xFFBDFCC9))
    )
}

"TextField(), label = {Text()}, icon = {Icon()}" these lines are underlined by red showing the error mentioned above.

Tags:

2

Answers


  1. 0

    There is no parameter named icon for TextField composable. Instead you can use leadingIcon or trailingIcon according to your needs and then you can resolve the shown error.

    Here is the TextField composable from documentation for material 3:

    fun TextField(
    value: TextFieldValue,
    onValueChange: (TextFieldValue) -> Unit,
    label: @Composable (() -> Unit)? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    //... other paramteres
) {  } //... content of the composable
    Login or Signup to reply.
  2. 0

    As an answer has already been given by another one, So I modify your code to this.

    Use this composable function.

    @Composable
fun EditNumericField(
    value: String,
    label: Int,
    icon: Painter,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier
) {
    TextField(
        value = value,
        onValueChange = onValueChange,
        label = { Text(text = stringResource(id = label)) },
        leadingIcon = { Icon(painter = icon, contentDescription = "Icons") },
        singleLine = true,
        modifier = modifier,
        colors = TextFieldDefaults.colors(
            focusedContainerColor = Color(0xFFBDFCC9),
            unfocusedContainerColor = Color(0xFFBDFCC9)
        ),
        keyboardOptions = keyboardOptions
    )
}

    And here is the function calling.

    EditNumericField(
    value = "Any value",
    label = R.string.app_name,
    icon = painterResource(id = R.drawable.ic_launcher_foreground),
    keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Done),
    onValueChange = { },
    modifier = Modifier
)

    I hope this helps you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search