BottomSheetScaffold is not collapsing and expanding inside card composable

Question

Hello stack overflow community. In these days I'm trying to make BottomSheetScaffold composable inside my app so i have problem, i want to collapse and expand when i click IconButton inside card composable like Facebook app, how can i do that, i have tried but unfortunately i could not do. I know that there is similar questions about this subject but i want to help me right now

@OptIn(ExperimentalMaterialApi::class, ExperimentalCoroutinesApi::class)
@Composable
fun ddd(
    navController: NavController,
    viewModel: SearchingClickingViewModel
) {

val scope = rememberCoroutineScope()
val scaffoldState = rememberBottomSheetScaffoldState()

BottomSheetScaffold(
    scaffoldState = scaffoldState,
    sheetPeekHeight = 10.dp,
    sheetContent = {
        Box(
            Modifier
                .fillMaxWidth()
                .height(128.dp),
                //.background(Color.Cyan),
            contentAlignment = Alignment.Center
        ) {
            Text("Swipe up to expand sheet")
        }
        Column(
            Modifier
                .fillMaxWidth()
                .padding(64.dp),
                //.background(Color.Gray),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text("Sheet content")
            Spacer(Modifier.height(20.dp))
            Button(
                onClick = {
                    scope.launch { scaffoldState.bottomSheetState.collapse() }
                }
            ) {
                Text("Click to collapse sheet")
            }
        }
    },
    topBar = {
        TopAppBar(
            title = {
                Text(text = "All Calling Customers")
            },
            navigationIcon = {
                IconButton(onClick = {
                    navController.navigate(Screen.Home.route) {
                        popUpTo(Screen.Home.route) {
                            inclusive = true
                        }
                    }
                }) {
                    Icon(Icons.Filled.ArrowBack, "backIcon")
                }
            },
            backgroundColor = MaterialTheme.colors.primary,
            contentColor = MaterialTheme.colors.primary,
            elevation = 0.dp
        )
    },
    drawerContent = {
        Column(
            Modifier
                .fillMaxWidth()
                .padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text("Drawer content")
            Spacer(Modifier.height(20.dp))
            Button(onClick = {
                scope.launch { scaffoldState.drawerState.close() }
            }) {
                Text("Click to close drawer")
            }
        }
    }
) {

    LazyColumn(
        contentPadding = PaddingValues(
            horizontal = 0.dp,
            vertical = 0.dp
        ),
        verticalArrangement = Arrangement.spacedBy(10.dp)
    ) {
        items(100) {
            Cards_SearchingClicking(data = it!!, navController)
        }
    }
}
}



@OptIn(ExperimentalMaterialApi::class)
@Composable
fun Cards_SearchingClicking(
    data: SearchingClickingItems,
    navController: NavController
) {
val context = LocalContext.current

val scope = rememberCoroutineScope()
val scaffoldState = rememberBottomSheetScaffoldState()

Card(
    modifier = Modifier
        .fillMaxSize(),

    RoundedCornerShape(0.dp),
    elevation = 1.dp
) {
    Column(
        modifier = Modifier
            //.background(Color.Green)
            .fillMaxSize()
            .padding(20.dp)
    ) {

        Row(
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceBetween,
            modifier = Modifier
                .fillMaxWidth()
        ) {
            IconButton(
                onClick = {
                    scope.launch {

                        if (scaffoldState.bottomSheetState.isCollapsed) {
                            scaffoldState.bottomSheetState.expand()
                        } else {
                            scaffoldState.bottomSheetState.collapse()
                        }

                    }
                },
                modifier = Modifier
                    //.background(Color.Gray)
                    //.padding(0.dp)
                    .size(35.dp)
            ) {
                Icon(
                    Icons.Filled.MoreVert,
                    contentDescription = null
                )
            }
        }

    }

} //END Card

}

Answer 1

The scaffoldState in Cards_SearchingClicking is not the same instance, as the one used in ddd. You need to pass the scaffoldState from ddd to the Cards_SearchingClicking.

@OptIn(ExperimentalMaterialApi::class, ExperimentalCoroutinesApi::class)
@Composable
fun ddd(
    navController: NavController,
    viewModel: SearchingClickingViewModel
) {

val scope = rememberCoroutineScope()
val scaffoldState = rememberBottomSheetScaffoldState()

BottomSheetScaffold(
    scaffoldState = scaffoldState,
    sheetPeekHeight = 10.dp,
    sheetContent = {
        Box(
            Modifier
                .fillMaxWidth()
                .height(128.dp),
                //.background(Color.Cyan),
            contentAlignment = Alignment.Center
        ) {
            Text("Swipe up to expand sheet")
        }
        Column(
            Modifier
                .fillMaxWidth()
                .padding(64.dp),
                //.background(Color.Gray),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text("Sheet content")
            Spacer(Modifier.height(20.dp))
            Button(
                onClick = {
                    scope.launch { scaffoldState.bottomSheetState.collapse() }
                }
            ) {
                Text("Click to collapse sheet")
            }
        }
    },
    topBar = {
        TopAppBar(
            title = {
                Text(text = "All Calling Customers")
            },
            navigationIcon = {
                IconButton(onClick = {
                    navController.navigate(Screen.Home.route) {
                        popUpTo(Screen.Home.route) {
                            inclusive = true
                        }
                    }
                }) {
                    Icon(Icons.Filled.ArrowBack, "backIcon")
                }
            },
            backgroundColor = MaterialTheme.colors.primary,
            contentColor = MaterialTheme.colors.primary,
            elevation = 0.dp
        )
    },
    drawerContent = {
        Column(
            Modifier
                .fillMaxWidth()
                .padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text("Drawer content")
            Spacer(Modifier.height(20.dp))
            Button(onClick = {
                scope.launch { scaffoldState.drawerState.close() }
            }) {
                Text("Click to close drawer")
            }
        }
    }
) {

    LazyColumn(
        contentPadding = PaddingValues(
            horizontal = 0.dp,
            vertical = 0.dp
        ),
        verticalArrangement = Arrangement.spacedBy(10.dp)
    ) {
        items(100) {
            Cards_SearchingClicking(data = it!!, navController, scaffoldState)
        }
    }
}
}



@OptIn(ExperimentalMaterialApi::class)
@Composable
fun Cards_SearchingClicking(
    data: SearchingClickingItems,
    navController: NavController,
    scaffoldState: BottomSheetScaffoldState,
) {
val context = LocalContext.current

val scope = rememberCoroutineScope()

Card(
    modifier = Modifier
        .fillMaxSize(),

    RoundedCornerShape(0.dp),
    elevation = 1.dp
) {
    Column(
        modifier = Modifier
            //.background(Color.Green)
            .fillMaxSize()
            .padding(20.dp)
    ) {

        Row(
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceBetween,
            modifier = Modifier
                .fillMaxWidth()
        ) {
            IconButton(
                onClick = {
                    scope.launch {

                        if (scaffoldState.bottomSheetState.isCollapsed) {
                            scaffoldState.bottomSheetState.expand()
                        } else {
                            scaffoldState.bottomSheetState.collapse()
                        }

                    }
                },
                modifier = Modifier
                    //.background(Color.Gray)
                    //.padding(0.dp)
                    .size(35.dp)
            ) {
                Icon(
                    Icons.Filled.MoreVert,
                    contentDescription = null
                )
            }
        }

    }

} //END Card

}