Unable to align a text and a Switch in a Row lambda in jetpack compose

Question

ISSUE

I am trying to align the text Enable Notifications and the switch on the same line. If I were to use XML layouts, then I would have gone with constraint layout, but I am trying to figure out how to do this with Compose.

SET UP

@Composable
fun Settings() {
    val viewModel: SettingsViewModel = viewModel()
    val uiState: SettingsState = viewModel.uiState.collectAsState().value
    SettingsList(uiState = uiState, viewModel)
}

@Composable
fun SettingsList(uiState: SettingsState, viewModel: SettingsViewModel, modifier: Modifier = Modifier) {
    val scaffoldState = rememberScaffoldState()
    Scaffold(
        modifier = Modifier, scaffoldState = scaffoldState,
        backgroundColor = MaterialTheme.colors.background,
        topBar = {
            TopAppBar(
                modifier = Modifier.semantics {
                    heading()
                },
                backgroundColor = MaterialTheme.colors.surface,
                contentPadding = PaddingValues(start = 12.dp)
            ) {
                Icon(
                    tint = MaterialTheme.colors.onSurface,
                    imageVector = Icons.Default.ArrowBack,
                    contentDescription = stringResource(id = R.string.header_settings_back)
                )
                Spacer(modifier = modifier.width(16.dp))
                Text(
                    text = stringResource(id = R.string.header_settings),
                    fontSize = 18.sp,
                    color = MaterialTheme.colors.onSurface
                )
            }
        }
    ) {
        val scrollState = rememberScrollState()
        Column(
            modifier = Modifier
                .verticalScroll(scrollState).padding(paddingValues = it)
        ) {
            NotificationSettingsComposable(uiState.notificationsEnabled, {
                viewModel.toggleNotificationSettings()
            }, Modifier.fillMaxWidth())
        }
    }
}

@Composable
fun NotificationSettingsComposable(checked: Boolean, onCheckedChanged: (Boolean) -> Unit, modifier: Modifier = Modifier) {
    Surface(modifier = modifier.padding(12.dp)) {
        Row {
            Text(
                text = stringResource(id = R.string.body_enable_notifications), fontSize = 16.sp,
                color = MaterialTheme.colors.onSurface,
            )
            Switch(checked = checked, onCheckedChange = onCheckedChanged, modifier = Modifier.align(Alignment.Top))
        }
    }
}

However the text and the switch are not being aligned on the same line.

DESIRED OUTCOME

The text and the switch should be aligned on the same line as shown in this picture.

This is what I am getting

What I want to achieve

Answer 1

Add verticalAlignment = Alignment.CenterVertically in the Row:

Something like:

Row(
    verticalAlignment = Alignment.CenterVertically
) {
    Text(
        text = "Enable Notification", fontSize = 16.sp,
    )

    Switch(
        checked = checkedState.value,
        onCheckedChange = { checkedState.value = it }
    )
}