Hi, i have lazy column inside ModelBottomSheetLayo...
# compose
n
Hi, i have lazy column inside ModelBottomSheetLayout, and now i am trying to add SwipeRefresh to get latest list of data. Problem: whenever i try to refresh bottom sheet getting close. Any Reference for ModelBottomSheetLayout with SwipeRefresh. Thanks I have added code snippets in the Thread for SwipeRefresh inside BottomSheet. Please Review It.
j
c
Fwiw personally I would not expect swipe refresh to work in a modal bottom sheet, unless it was possible to disable to swipe behaviour of modal bottom sheet
n
Yeah but product requirements is like that only. They want to add pull refresh in bottom sheet to get latest comment which are added
c
If product also requires that the modal is swipeable, then there is a problem with the requirements. I don’t see how it is possible to do both within a modal bottom sheet.
Just my observation; I suspect you would waste a lot of time trying to satisfy both of these requirements. On the other hand, if the modal is not supposed to be swipeable, then I think you need to build something custom.
o
Maybe you want pull-up-from-bottom to refresh? That would be at least possible to implement 😅
s
Lmao that would be hilarious. Thinking outside of the box for sure, but if I was a user and had to swipe the opposite way to update I’d at least start laughing of the ingenuity of whoever though of and implemented that 😅
n
Hi , Please go through below snippet and review it. let me know if there is problem in this. Thanks in Advance
Copy code
@Composable
@ExperimentalMaterialApi
fun ModelBottomSheet() {
    val modalBottomSheetState = rememberModalBottomSheetState(
        initialValue =ModalBottomSheetValue.Hidden
    )
    val scope = rememberCoroutineScope()
    val viewModel: MyViewModel = viewModel()
    val isRefreshing by viewModel.isRefreshing.collectAsState()
    ModalBottomSheetLayout(
        sheetState = modalBottomSheetState,
        sheetContent = {
            Text(
                text = "Modal Bottom Sheet", fontSize = 20.sp, modifier = Modifier.padding(10.dp),
                color = Color.Black, fontWeight = FontWeight.ExtraBold
            )
            Divider(modifier = Modifier.padding(5.dp), color = Color.Gray)
            SwipeRefresh(state = rememberSwipeRefreshState(isRefreshing = isRefreshing),
                onRefresh = { viewModel.refresh() }) {
                LazyColumn() {
                    items(50) {
                        ListItem(
                            text = { Text("Item $it") },
                            icon = {
                                Icon(
                                    Icons.Default.ThumbUp,
                                    contentDescription = "Localized description"
                                )
                            }
                        )
                    }
                }
            }
        }
    ) {
        ModalBottomSheetMainscreenView(scope, modalBottomSheetState)
    }

}

@ExperimentalMaterialApi
@Composable
fun ModalBottomSheetMainscreenView(
    scope: CoroutineScope,
    modalBottomSheetState: ModalBottomSheetState
) {
    Box(
        Modifier
            .fillMaxWidth()
    ){
        Button(
            modifier = Modifier
                .padding(20.dp)
                .align(alignment = Alignment.TopCenter),
            onClick = {
                scope.launch{
                    modalBottomSheetState.show()
                }
            }
        ) {
            Text(
                text = "Click to show Model Bottom Sheet"
            )
        }
    }
}

class MyViewModel : ViewModel() {
    private val _isRefreshing = MutableStateFlow(false)

    val isRefreshing: StateFlow<Boolean>
        get() = _isRefreshing.asStateFlow()

    fun refresh() {
        // This doesn't handle multiple 'refreshing' tasks, don't use this
        viewModelScope.launch {
            // A fake 2 second 'refresh'
            _isRefreshing.emit(true)
            delay(2000)
            _isRefreshing.emit(false)
        }
    }
}