How to make the Floating Action Button of a BottomAppBar transparent?

Question

I am working on Jetpack Compose in an Android application. So I want to use BottomAppBar with a transparent cutoutShape. Never found any example, can someone help? 😊

I want to make the white background around the FAB transparent.

The actual result (not the expected one) : A BottomAppBar without a transparent cutoutShape

The code I use :

val fabShape = RoundedCornerShape(50)
    Scaffold(
        floatingActionButton = {
            FloatingActionButton(
                onClick = {
                    navController.navigate(Routes.signUp)
                },
                shape = fabShape,
                backgroundColor = Color(0xFFFF8C00)
            ) {
                Icon(Icons.Filled.Add, "")
            }
        },
        isFloatingActionButtonDocked = true,
        floatingActionButtonPosition = FabPosition.Center,

        bottomBar = {
            BottomAppBar(
                cutoutShape = fabShape,
                content = {
                    BottomNavigation {
                        val navBackStackEntry by navController.currentBackStackEntryAsState()
                        val currentDestination = navBackStackEntry?.destination
                        items.forEachIndexed { index, screen ->
                                BottomNavigationItem(
                                   ...
                                )
                        }
                    }
                }
            )
        }
    ) { innerPadding ->
        internalView(innerPadding)
    }

Answer 1

If you want to allow content to scroll behind bottomAppBar just remove the innerPadding that Scaffold passes to content:

Without applying innerPadding:

Scaffold(
    //...
    content = { innerPadding ->

        Column(
            Modifier
                .fillMaxWidth()
                .verticalScroll(rememberScrollState()),
            verticalArrangement = Arrangement.Bottom,
            horizontalAlignment = Alignment.CenterHorizontally) {
            Image(painterResource(id = R.drawable.xxx),"")
        }

    }
)

Applying innerPadding:

Scaffold(
    //...
    content = { innerPadding ->

        Column(
            Modifier
                .fillMaxWidth()
                .padding(innerPadding)
                .verticalScroll(rememberScrollState()),
            verticalArrangement = Arrangement.Bottom,
            horizontalAlignment = Alignment.CenterHorizontally) {
            Image(painterResource(id = R.drawable.xxx),"")
        }

    }
)