How to arrange BottomNavigationItems in Compose?

Question

How can I arrange the two inner BottomNav Items so that they are not so close to the "+" FAB? I tried surrounding the forEach which displays the Items with a Row and use the Arrangement modifier like so:

Row(horizontalArrangement = Arrangement.SpaceBetween) { //Not working :(
items.forEach { item ->
    BottomNavigationItem(
        icon = { Icon(painterResource(id = item.icon), contentDescription = item.title) },
        label = { Text(text = item.title) },
        selectedContentColor = Color.White,
        unselectedContentColor = Color.White.copy(0.4f),
        alwaysShowLabel = true,
        selected = currentRoute == item.route,
        onClick = {
            navController.navigate(item.route) { 
                navController.graph.startDestinationRoute?.let { route ->
                    popUpTo(route) {
                        saveState = true
                    }
                } 
                launchSingleTop = true 
                restoreState = true
            }
        }
    )
}

}

Unfortunately thats not working

Answer 1

Arrangement.SpaceBetween works as expected - it adds a spacer between items:

Place children such that they are spaced evenly across the main axis, without free space before the first child or after the last child. Visually: 1##2##3

You need to let your Row know about FAB location. You can add a spacer with Modifier.weight in the middle of your row, for example like this:

items.forEachIndexed { i, item ->
    if (i == items.count() / 2) {
        Spacer(Modifier.weight(1f))
    }
    BottomNavigationItem(
        // ...