Irregular Bottom Sheet Padding and Shadow with ModalBottomSheetLayout and Column

Question

I Have a Root Level Composable with following structure.

ModalBottomSheetLayout(
    bottomSheetNavigator = bottomSheetNavigator,
    scrimColor = MaterialTheme.colors.surface.copy(alpha = 0.5f),
    sheetContentColor = Color.Transparent,
    sheetBackgroundColor = Color.Transparent
) {
    Scaffold(
        bottomBar = {
            BottomNavigator(
                navController = navController,
                navigationItems = bottomNavItems,
                navigationDestinations = bottomNavDestinations
            )
        }
    ) {
        DestinationsNavHost(
            navGraph = NavGraphs.root,
            navController = navController,
            engine = rememberAnimatedNavHostEngine()
        )
    }
}

The Content of the Bottom Sheet is enclosed in this composable:

@Composable
@Destination(style = DestinationStyle.BottomSheet::class)
fun TaskInputSheet(
    navigator: DestinationsNavigator,
) {
    val nameState = remember {
        mutableStateOf("")
    }
    val descState = remember {
        mutableStateOf("")
    }
    val taskTypeState = remember {
        mutableStateOf(TaskType.REPS)
    }
    val viewModel: TaskListViewModel = viewModel()

    Column(
        modifier = Modifier
            .padding(16.dp)
            .border(
                width = 2.dp,
                brush = Brush.linearGradient(
                    listOf(
                        MaterialTheme.colors.primary,
                        MaterialTheme.colors.secondary
                    )
                ),
                shape = RoundedCornerShape(16.dp)
            )
            .clip(RoundedCornerShape(16.dp))
            .background(MaterialTheme.colors.surface),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // Content
    }
}

I am using compose destinations lib which itself uses accompanist material navigation. The navigation is set up perfectly fine and I am having no problems with it.

I intend to have a some padding between the bottom sheet itself and the screen edges. The issue is in this screenshot:

The First Arrow on top shows a weird shadow effect, as if there is a transparent edge and the shadow then starts from that edge. The Second arrow shows that there is no spacing between the bottom of the sheet and the bottom screen edge, but the padding is properly applied to the start and the end of the content.

What should I do to get rid of these two? Or Is this a bug?

Answer 1

I saw this issue on GitHub earlier that explained an accompanist bug with the ModalBottomSheetLayout, still not fixed. You can follow when the bug is fixed with this link: https://github.com/raamcosta/compose-destinations/issues/130

Hope it helps

btw: I'm curious about your code, if you can give a link in GitHub