Develop Reference

How do I cancel an event after another one has started?

I am having an issue, where after a Snackbar appears the FAB won't perform navigation for the period of the Snackbar message. If I click it multiple times when the Snackbar is displayed it will stack and open multiple instances of one screen (only after the Snackbar is gone). How do I cancel showing the Snackbar on click of the FAB and preserve the functionality of the FAB at all times?
TasksList.kt:
#OptIn(ExperimentalMaterial3Api::class)
#Composable
fun TasksListScreen(
modifier: Modifier = Modifier,
onNavigate: (UiEvent.Navigate) -> Unit,
viewModel: TaskListViewModel = hiltViewModel()
) {
val tasks = viewModel.tasks.collectAsState(initial = emptyList())
val snackbarHostState = remember { SnackbarHostState() }
LaunchedEffect(key1 = true) {
viewModel.uiEvent.collect { event ->
when (event) {
is UiEvent.ShowSnackbar -> {
val result = snackbarHostState.showSnackbar(
message = event.message,
actionLabel = event.action,
duration = SnackbarDuration.Long,
)
if (result == SnackbarResult.ActionPerformed) {
viewModel.onEvent(TaskListEvent.OnUndoDeleteTask)
}
}
is UiEvent.Navigate -> onNavigate(event)
else -> Unit
}
}
}
Scaffold(
snackbarHost = {
SnackbarHost(snackbarHostState) { data ->
Snackbar(
shape = RoundedShapes.medium,
actionColor = MaterialTheme.colorScheme.primary,
contentColor = MaterialTheme.colorScheme.background,
snackbarData = data
)
}
},
floatingActionButton = {
FloatingActionButton(
shape = RoundedShapes.medium,
onClick = { viewModel.onEvent(TaskListEvent.OnAddTask) },
containerColor = MaterialTheme.colorScheme.primary,
contentColor = MaterialTheme.colorScheme.background
) {
Icon(
imageVector = Icons.Default.Add,
contentDescription = stringResource(R.string.fab_cd)
)
}
},
topBar = {
TopAppBar(
title = { Text(stringResource(R.string.app_name)) },
colors = TopAppBarDefaults.topAppBarColors(
containerColor = MaterialTheme.colorScheme.primary,
titleContentColor = MaterialTheme.colorScheme.background
)
)
},
) { padding ->
LazyColumn(
state = rememberLazyListState(),
verticalArrangement = spacedBy(12.dp),
contentPadding = PaddingValues(vertical = 16.dp),
modifier = modifier
.fillMaxSize()
.padding(padding)
.padding(horizontal = 16.dp),
) {
items(items = tasks.value, key = { task -> task.hashCode() }) { task ->
val currentTask by rememberUpdatedState(newValue = task)
val dismissState = rememberDismissState(confirmValueChange = {
if (it == DismissValue.DismissedToStart) {
viewModel.onEvent(TaskListEvent.OnDeleteTask(currentTask))
}
true
})
SwipeToDismiss(state = dismissState,
directions = setOf(DismissDirection.EndToStart),
background = { },
dismissContent = {
TaskItem(
task = task, modifier = modifier
)
})
}
}
}
}
TaskListViewModel:
#HiltViewModel
class TaskListViewModel #Inject constructor(private val repository: TaskRepositoryImplementation) :
ViewModel() {
val tasks = repository.getTasks()
private val _uiEvent = Channel<UiEvent>()
val uiEvent = _uiEvent.receiveAsFlow()
private var deletedTask: Task? = null
fun onEvent(event: TaskListEvent) {
when (event) {
is TaskListEvent.OnAddTask -> {
sendUiEvent(UiEvent.Navigate(Routes.ADD_EDIT_TASK))
}
is TaskListEvent.OnEditClick -> {
sendUiEvent(UiEvent.Navigate(Routes.ADD_EDIT_TASK + "?taskId=${event.task.id}"))
}
is TaskListEvent.OnDeleteTask -> {
val context = TaskApp.instance?.context
viewModelScope.launch(Dispatchers.IO) {
deletedTask = event.task
repository.deleteTask(event.task)
if (context != null) {
sendUiEvent(
UiEvent.ShowSnackbar(
message = context.getString(R.string.snackbar_deleted),
action = context.getString(R.string.snackbar_action)
)
)
}
}
}
is TaskListEvent.OnUndoDeleteTask -> {
deletedTask?.let { task ->
viewModelScope.launch {
repository.addTask(task)
}
}
}
}
}
private fun sendUiEvent(event: UiEvent) {
viewModelScope.launch(Dispatchers.IO) {
_uiEvent.send(event)
}
}
}

How to show bottom sheet dialog in Jetpack compose on EachRow item click?

I am facing an issue while showing the bottom sheet dialog in jetpack compose on each row item click. When I click on an item the app crashes.
Here is my LazyColumn code:
//Setup Recyclerview
#OptIn(ExperimentalMaterialApi::class)
#SuppressLint("CoroutineCreationDuringComposition")
#Composable
fun SetRecyclerview(viewModel: UserViewModel, paddingValues: PaddingValues) {
val isLoading = viewModel.isLoading.value
var showSheet by remember { mutableStateOf(false) }
var sheetUser: User? by remember { mutableStateOf(null) }
//Creating a variable for the StateFlow variable
val userList = viewModel.userData.collectAsState().value
if (showSheet) {
ShowBottomSheetDialog(user = sheetUser!!)
sheetScope.launch {
sheetState.show()
}
}
if (isLoading) {
ProgressBarComponent()
} else {
LazyColumn(
modifier = Modifier.padding(0.dp, 5.dp, 0.dp, 5.dp)
) {
userList.forEach { user ->
items(user.results.size) {
EachRow(user = user.results[it], onClick = {
showSheet = true
sheetUser = user.results[it]
})
}
}
}
}
}
Here is my ShowBottomSheetDialog function:
//ShowBottomSheetDialog
#SuppressLint("CoroutineCreationDuringComposition")
#OptIn(ExperimentalMaterialApi::class)
#Composable
fun ShowBottomSheetDialog(user: User) {
sheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)
sheetScope = rememberCoroutineScope()
ModalBottomSheetLayout(
sheetState = sheetState,
sheetContent = { BottomSheetItem(user = user) },
sheetBackgroundColor = Color.White,
sheetShape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp),
) {}
}
Here is BottomSheetItem function:
//Bottom Sheet Item
#Composable
fun BottomSheetItem(user: User) {
Log.e("TAG", "BottomSheetItem: " + user.email)
}

Jetpack Compose Navigation calls navigate function repeatedly and freezes

Using a when function, I need to navigate to particular graph in my compose navigation tree. The issue is when navigating away from the current screen to the new one, the screen repeatedly flashes and freezes up. Checking the debugger, it shows me that the code just constantly jumps between LaunchedEffect and navController.navigate(ProDashboardScreens.ProDashboardGraph.route).
Can anyone see a problem in my set up?
composable(BasicDashboardScreens.Manager.route) {
val managerViewModel: ManagerViewModel = hiltViewModel()
val managerState by managerViewModel.state.collectAsState()
ManagerScreen(managerState, managerViewModel)
LaunchedEffect(key1 = managerViewModel.navigationEvent) {
managerViewModel.navigationEvent.collect {
when (it) {
AuthenticationScreens.Login -> {
navController.navigate(AuthenticationScreens.Login.route)
}
AuthenticationScreens.Register -> {
navController.navigate(AuthenticationScreens.Register.route)
}
ProDashboardScreens.ProDashboardGraph -> {
navController.navigate(ProDashboardScreens.ProDashboardGraph.route)
}
else -> Unit
}
}
}
}
when {
!state.userAuthenticated -> {
UnauthenticatedScreen(
title = {
Text(
text = stringResource(id = R.string.login_or_register),
style = MaterialTheme.typography.subtitle1.copy(
fontWeight = FontWeight.Bold
),
textAlign = TextAlign.Center
)
},
buttonOne = {
AppButton(
modifier = Modifier
.fillMaxWidth()
.height(64.dp),
buttonText = stringResource(id = R.string.login),
buttonColor = Color.Blue,
enabled = true,
onClick = {
events.loginClicked()
}
)
},
buttonTwo = {
AppButton(
modifier = Modifier
.fillMaxWidth()
.height(64.dp),
buttonText = stringResource(id = R.string.register),
buttonColor = Color.Blue,
enabled = true,
onClick = {
events.registerClicked()
}
)
}
)
}
state.userAuthenticated && !state.userProfile.proVersion -> {
UnauthenticatedScreen(
title = {
Text(
text = stringResource(id = R.string.purchase_pro_enable_access),
style = MaterialTheme.typography.subtitle1.copy(
fontWeight = FontWeight.Bold
),
textAlign = TextAlign.Center
)
},
buttonOne = {
AppButton(
modifier = Modifier
.fillMaxWidth()
.height(64.dp),
buttonText = stringResource(id = R.string.purchase_pro),
buttonColor = Color.Blue,
enabled = true,
onClick = {
events.purchaseProClicked()
}
)
}
)
}
else -> {
events.navigateToProGraph()
}
}
#HiltViewModel
class ManagerViewModel #Inject constructor(
private val userProfileDao: UserProfileDao,
private val authManager: AuthManager
) : ViewModel(), ManagerEvents {
private val _state = MutableStateFlow(ManagerState.defaultState)
val state: StateFlow<ManagerState> = _state
private val _navigationEvent = MutableSharedFlow<NavigationRoute>()
val navigationEvent: SharedFlow<NavigationRoute> = _navigationEvent
init {
viewModelScope.launch {
_state.value = state.value.copy(
userProfile = userProfileDao.getUserProfile().first() ?: UserProfile.defaultState,
userAuthenticated = authManager.isAuthenticated()
)
}
}
override fun loginClicked() {
viewModelScope.launch {
_navigationEvent.emit(AuthenticationScreens.Login)
}
}
override fun registerClicked() {
viewModelScope.launch {
_navigationEvent.emit(AuthenticationScreens.Register)
}
}
override fun navigateToProGraph() {
viewModelScope.launch {
_navigationEvent.emit(ProDashboardScreens.ProDashboardGraph)
}
}
}

How to enable Compose snackbar's swipe-to-dismiss behavior

Simple code below for showing the Compose Snackbar
This code correctly shows the Snackbar, when onClick event occurs.
val scaffoldState = rememberScaffoldState() // this contains the `SnackbarHostState`
val coroutineScope = rememberCoroutineScope()
Scaffold(
modifier = Modifier,
scaffoldState = scaffoldState // attaching `scaffoldState` to the `Scaffold`
) {
Button(
onClick = {
coroutineScope.launch { // using the `coroutineScope` to `launch` showing the snackbar
// taking the `snackbarHostState` from the attached `scaffoldState`
val snackbarResult = scaffoldState.snackbarHostState.showSnackbar(
message = "This is your message",
actionLabel = "Do something."
)
when (snackbarResult) {
SnackbarResult.Dismissed -> Log.d("SnackbarDemo", "Dismissed")
SnackbarResult.ActionPerformed -> Log.d("SnackbarDemo", "Snackbar's button clicked")
}
}
}
) {
Text(text = "A button that shows a Snackbar")
}
}
How to dismiss snackbar on right/left-swipe?

The SnackbarHost has no such functionality. But you can extend it with the nackbarHost argument.
Also if you want the snackbar to disappear only with a swipe, you probably need to set the duration to Indefinite:
Scaffold(
modifier = Modifier,
scaffoldState = scaffoldState,
snackbarHost = { SwipeableSnackbarHost(it) } // modification 1
) {
Button(
onClick = {
coroutineScope.launch {
val snackbarResult = scaffoldState.snackbarHostState.showSnackbar(
message = "This is your message",
actionLabel = "Do something.",
duration = SnackbarDuration.Indefinite, // modification 2
)
when (snackbarResult) {
SnackbarResult.Dismissed -> Log.d("SnackbarDemo", "Dismissed")
SnackbarResult.ActionPerformed -> Log.d(
"SnackbarDemo",
"Snackbar's button clicked"
)
}
}
}
) {
Text(text = "A button that shows a Snackbar")
}
}
SwipeableSnackbarHost inspired by this answer
enum class SwipeDirection {
Left,
Initial,
Right,
}
#Composable
fun SwipeableSnackbarHost(hostState: SnackbarHostState) {
if (hostState.currentSnackbarData == null) { return }
var size by remember { mutableStateOf(Size.Zero) }
val swipeableState = rememberSwipeableState(SwipeDirection.Initial)
val width = remember(size) {
if (size.width == 0f) {
1f
} else {
size.width
}
}
if (swipeableState.isAnimationRunning) {
DisposableEffect(Unit) {
onDispose {
when (swipeableState.currentValue) {
SwipeDirection.Right,
SwipeDirection.Left -> {
hostState.currentSnackbarData?.dismiss()
}
else -> {
return#onDispose
}
}
}
}
}
val offset = with(LocalDensity.current) {
swipeableState.offset.value.toDp()
}
SnackbarHost(
hostState,
snackbar = { snackbarData ->
Snackbar(
snackbarData,
modifier = Modifier.offset(x = offset)
)
},
modifier = Modifier
.onSizeChanged { size = Size(it.width.toFloat(), it.height.toFloat()) }
.swipeable(
state = swipeableState,
anchors = mapOf(
-width to SwipeDirection.Left,
0f to SwipeDirection.Initial,
width to SwipeDirection.Right,
),
thresholds = { _, _ -> FractionalThreshold(0.3f) },
orientation = Orientation.Horizontal
)
)
}

LazyColumn how to fit in screen with other Composable?

#Composable
fun ShowScreen(viewModel: UseListViewModel){
Column() {
ShowList(viewModel = viewModel)
Buttons(viewModel)
}
}
#Composable
private fun ShowList(viewModel: UseListViewModel) {
LazyColumn() {
items(viewModel.itemListMutableState.value?: emptyList()){
ShowItem(it,viewModel)
}
}
}
#Composable
private fun ShowItem(item: IBaseDataModel, viewModel: UseListViewModel) {
Row (horizontalArrangement = Arrangement.SpaceBetween,verticalAlignment= Alignment.CenterVertically,
modifier = Modifier
.background(Color(AppConstants.itemHolderBackgroundColor(item.state)))
.clickable { viewModel.selectItem(item) }
.fillMaxWidth()
){
Text(text = item.idString)
Text(text = item.date1String)
Checkbox(checked = item.isSelected,onCheckedChange = { viewModel.setIsSelectedItem(item,it)})
Button(onClick = {viewModel.deleteItem(item)}) {
Text(text = "delete")
}
}
}
#Composable
private fun Buttons(viewModel: UseListViewModel){
Row (verticalAlignment = Alignment.Bottom,modifier = Modifier.fillMaxWidth(),horizontalArrangement = Arrangement.SpaceEvenly){
Button(onClick = {viewModel.refreshClick()}) {
Text(text = "refresh")
}
Button(onClick = {viewModel.addClick()}) {
Text(text = "add")
}
val a=if(viewModel.itemListMutableState.value!=null) viewModel.buttonsViewViewModel.buttonNext.visibility else 8
if(a==0){
Button(onClick = {viewModel.nextStateClick()}) {
Text(text = "next")
}
}
}
}
when the list items fill the screen the buttons disapear ..
how to keep the Buttons on screen bottom ?
Many apps need to display collections of items. This document explains how you can efficiently do this in Jetpack Compose.
If you know that your use case does not require any scrolling, you may wish to use a simple Column or Row (depending on the direction), and emit each item’s content by iterating over a list like so:

Use weight() method like this:
#Composable
fun ShowScreen(viewModel: UseListViewModel) {
Column(Modifier.fillMaxSize()) { // <-- new
ShowList(
modifier = Modifier.weight(1f), // <-- new
viewModel = viewModel
)
Buttons(viewModel)
}
}
#Composable
private fun ShowList(
modifier: Modifier, // <-- new
viewModel: UseListViewModel
) {
LazyColumn(modifier) { // <-- new
items(viewModel.itemListMutableState.value ?: emptyList()) {
ShowItem(it, viewModel)
}
}
}
#Composable
private fun ShowItem(item: IBaseDataModel, viewModel: UseListViewModel) {
Row(horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier
.background(Color(AppConstants.itemHolderBackgroundColor(item.state)))
.clickable { viewModel.selectItem(item) }
.fillMaxWidth()
) {
Text(text = item.idString)
Text(text = item.date1String)
Checkbox(
checked = item.isSelected,
onCheckedChange = { viewModel.setIsSelectedItem(item, it) })
Button(onClick = { viewModel.deleteItem(item) }) {
Text(text = "delete")
}
}
}
#Composable
private fun Buttons(viewModel: UseListViewModel) {
Row(
// verticalAlignment = Alignment.Bottom, // remove this
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceEvenly
) {
Button(onClick = { viewModel.refreshClick() }) {
Text(text = "refresh")
}
Button(onClick = { viewModel.addClick() }) {
Text(text = "add")
}
val a =
if (viewModel.itemListMutableState.value != null) viewModel.buttonsViewViewModel.buttonNext.visibility else 8
if (a == 0) {
Button(onClick = { viewModel.nextStateClick() }) {
Text(text = "next")
}
}
}
}

You can remove Column and use just one LazyColumn for the ShowScreen.
ShowList can now be an extension function for LazyListScope, this will allow calling items of parent LazyColumn directly within the ShowList function.
#Composable
fun ShowScreen(viewModel: UseListViewModel){
LazyColumn {
ShowList(viewModel)
item {
Buttons(viewModel)
}
}
}
private fun LazyListScope.ShowList(viewModel: UseListViewModel) {
items(viewModel.itemListMutableState.value?: emptyList()){
ShowItem(it,viewModel)
}
}
Note that ShowList is not a #Composable function now.