How to remove bottom padding from bottom sheet in Jetpack Compose

Issue

Screenshot Of Problem

I am using Material 2 bottomsheet scaffold and while expanding bottom sheet i facing this issue, I haven’t apply any padding for bottom yet it appears and i tried many things but i was unable to resolve please help.

BottomSheetScaffold(
      scaffoldState = scaffoldState,
      modifier = Modifier.fillMaxSize(),
      sheetBackgroundColor = UiColors.MeditationBottomSheetColor,
      sheetContentColor = Color.Black,
      sheetGesturesEnabled = currentBottomSheet == 1,
      sheetPeekHeight = 0.dp,
      sheetShape = ShapeDefaults.Medium,
      sheetContent = {
          if (currentBottomSheet == 0) {
              GuidedMeditationStatisticsBottomSheetContent(
                  user = currentUser,
                  totalDurationInMs = currentPosition,
                  onDone = onDone
              )
          } else {
              InstrumentBottomSheet(
                  currentInstrument = currentInstrument,
                  instruments = instruments,
                  currentVolume = currentInstrumentVolume,
                  onVolumeChange = onVolumeChange,
                  onSelectedInstrument = onSelectedInstrument,
                  onCancel = onCancelInstrument
              )
          }
      },
      content = { 
//Content
})

This is the code for scaffold i am using.

Solution

Step 1 -Add the Composable

@Composable fun hideSystemNavBars(){
val view = LocalView.current
val windowInfo = LocalContext.current

LaunchedEffect(key1 = Unit, block = {
    val act = windowInfo as? Activity
    act?.let {
        val window  = WindowCompat.getInsetsController(it.window,view)
        window.hide(WindowInsetsCompat.Type.navigationBars())
    }
})
}

Here is a modified code

BottomSheetScaffold(
  scaffoldState = scaffoldState,
  modifier = Modifier.fillMaxSize(),
  sheetBackgroundColor = UiColors.MeditationBottomSheetColor,
  sheetContentColor = Color.Black,
  sheetGesturesEnabled = currentBottomSheet == 1,
  sheetPeekHeight = 0.dp,
  sheetShape = ShapeDefaults.Medium,
  sheetContent = {
      if (currentBottomSheet == 0) {
         //add the compose
          hideSystemNavBars()
          GuidedMeditationStatisticsBottomSheetContent(
              user = currentUser,
              totalDurationInMs = currentPosition,
              onDone = onDone
          )
      } else {
          //add the compose
          hideSystemNavBars()
          InstrumentBottomSheet(
              currentInstrument = currentInstrument,
              instruments = instruments,
              currentVolume = currentInstrumentVolume,
              onVolumeChange = onVolumeChange,
              onSelectedInstrument = onSelectedInstrument,
              onCancel = onCancelInstrument
          )
      }
  },
  content = {})

answer fetched from official docs

Answered By – praveen kumar

Answer Checked By – Timothy Miller (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *