Kotlin Jetpack Compose: How to remove dp or sizefrom the Modifier fillMaxHeight

Issue

I have an Alarm Clock App I am making in order to learn and right now I have a lazy Column which I want to be as big as possible, however whenever I add the modifier 'fillMaxSize' / 'fillMaxHeight' it goes over the navBar I have at the bottom of the screen. How can I remove some size or dp off of the box which the lazyColumn is in. (Or is their a cleaner way to solve this problem)

Box(
    modifier = Modifier
        .fillMaxSize()
        .background(Color.White)
) {
    Column(
        verticalArrangement = Arrangement.SpaceBetween,
        modifier = Modifier
            .fillMaxSize()
    ) {
        Title(
            image1 = painterResource(R.drawable.ic_arrow_back),
            image2 = painterResource(R.drawable.ic_cog),
            text = "Alarms",
            onClick1 = {},
            onClick2 = {}
        )

        Column(
            modifier = Modifier
                .fillMaxSize()
        ) {

            Box(
                modifier = Modifier
                    .padding(top = 40.dp, end = 15.dp)
                    .align(Alignment.End)
            ) {
                CButton(
                    image = painterResource(R.drawable.ic_create),
                    text = "Create",
                    textColor = LSecondary,
                    bgColor = LPrimary,
                ) {}
            }

            val boxTop = 60
            Box(
                modifier = Modifier
                    .padding(top = boxTop.dp)
                    .fillMaxHeight()
            ) {
                val alarmRepo = AlarmRepository()
                val items = alarmRepo.getAllData()

                LazyColumn {
                    itemsIndexed(
                        items = items,
                        key = { index, alarm ->
                            alarm.id
                        }
                    ) { index, alarm ->
                        AlarmList(alarm = alarm)
                    }

                }
            }
        }

        NavBar(
            onScreen = 1,
            onClick1 = {},
            onClick2 = {},
            onClick3 = {},
            onClick4 = {},
        )

    }
}

}

Solution

For the specific question, you can always include a width percentage inside fillMaxHeight(...).

That being said, what you probably want to do here is have a main Scafford with your content, then add your nav bar as a bottomBar property. You may want to update your NavBar components to a BottomAppBar, but it should work.

Scaffold(
    topBar = { /* Top toolbar, if you want it. */ },
    bottomBar = { /* Bottom Nav bar, which is what you want to add. */ },
) { 
    /* App content goes here */
}

Answered By - MFazio23