TopAppBar in jetpack compose without scaffold gives error

Question

TopAppBar(title = { Text(text = "Notes") },actions = {Icon(imageVector =Icons.Default.Notifications,contentDescription = "Notif",)},) {}

when I try running the above code I get the following error "None of the following functions can be called with the arguments supplied." When I look into the declaration of TopAppBar , there are two Composables of same name however only the Composable which I want cannot be used ! Any tips?

score 3 · Accepted Answer · answered Jul 26 '22 at 05:20

It happens because there is no matching functions with parameters you provided. Because of function overloading there can be several functions with slightly different parameters. Best way to avoid ambiguity is to use named parameters.

@Composable
fun TopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    navigationIcon: @Composable (() -> Unit)? = null,
    actions: @Composable RowScope.() -> Unit = {},
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = AppBarDefaults.TopAppBarElevation
)

closest one to yours is above and which can be set as

TopAppBar(
    title = { Text(text = "Notes") },
    actions = {
        Icon(
            imageVector = Icons.Default.Notifications,
            contentDescription = "Notif",
        )
    }
)

Or you can use this one

@Composable
fun TopAppBar(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = AppBarDefaults.TopAppBarElevation,
    contentPadding: PaddingValues = AppBarDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
)

such as

TopAppBar(
    // other params
) {
    Row(modifier = Modifier.fillMaxWidth()) {
        Text(text = "Notes")
        Spacer(modifier = Modifier.weight(1f))
        Icon(
            imageVector = Icons.Default.Notifications,
            contentDescription = "Notif"
        )
    }
}

score 2 · Answer 2 · answered Jul 26 '22 at 07:34

Just remove the {}

TopAppBar(
    title = { Text(text = "Notes") },
    actions = {
        Icon(
            imageVector =Icons.Default.Notifications,
            contentDescription = "Notif",
        )},
) //{} remove this part

Using the {} you are trying to use the constructor with the attribute content: @Composable RowScope.() -> Unit that doesn't have the title and the action attributes

TopAppBar in jetpack compose without scaffold gives error

2 Answers2