Develop Reference

Ui state not working correctly in jetpack compose

I am using MutableStateFlow UI State in jetpack compose. I am not getting proper flow of my UI event. In UI state there is Empty, Loading, Success and Error state. I setup a Empty state when I initialise a variable. When I am starting to call api before that I am trigger Loading state. On that basis I am triggering Success or Error event.
Note: I am not adding imports and package name. If you want to see full code please click a name of class you will redirect to my repository.
MainActivityViewModel.kt
class MainActivityViewModel(private val resultRepository: ResultRepository) : ViewModel() {
val stateResultFetchState = MutableStateFlow<ResultFetchState>(ResultFetchState.OnEmpty)
fun getSportResult() {
viewModelScope.launch {
stateResultFetchState.value = ResultFetchState.IsLoading
val result = resultRepository.getSportResult()
delay(5000)
result.handleResult(
onSuccess = { response ->
if (response != null) {
stateResultFetchState.value = ResultFetchState.OnSuccess(response)
} else {
stateResultFetchState.value = ResultFetchState.OnEmpty
}
},
onError = {
stateResultFetchState.value =
ResultFetchState.OnError(it.errorResponse?.errorMessage)
}
)
}
}
}
MainActivity.kt
internal lateinit var networkConnection: NetworkConnection
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
networkConnection = NetworkConnection(application)
setContent {
SportsResultTheme {
SetupConnectionView()
}
}
}
}
#Composable
fun SetupConnectionView() {
val isConnected = networkConnection.observeAsState()
if (isConnected.value == true) {
NavigationGraph()
} else {
NoInternetView()
}
}
#Composable
fun NoInternetView() {
Box(
modifier = Modifier
.fillMaxSize()
.background(getBackgroundColor()),
contentAlignment = Center,
) {
val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.nointernet))
LottieAnimation(
composition,
iterations = LottieConstants.IterateForever
)
}
}
#OptIn(ExperimentalMaterial3Api::class)
#Composable
fun SetupMainActivityView(
viewModel: MainActivityViewModel = koinViewModel(),
navigateToNext: (state: String) -> Unit,
) {
Scaffold(topBar = {
TopAppBar(
title = { Text(text = stringResource(id = R.string.app_name)) },
backgroundColor = getBackgroundColor(),
elevation = 0.dp
)
}, content = { padding ->
Column(
modifier = Modifier
.fillMaxSize()
.background(getBackgroundColor())
.padding(padding),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Button(onClick = {
viewModel.getSportResult()
}) {
Text(text = stringResource(id = R.string.get_result))
}
}
})
when (val state = viewModel.stateResultFetchState.collectAsState().value) {
is ResultFetchState.OnSuccess -> {
navigateToNext("loading $state")
}
is ResultFetchState.IsLoading -> {
LoadingFunction()
}
is ResultFetchState.OnError -> {}
is ResultFetchState.OnEmpty -> {}
}
}
#Composable
fun LoadingFunction() {
Column(
modifier = Modifier
.fillMaxSize()
.background(getBackgroundColor()),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
CircularProgressIndicator()
}
}
I am adding my navigation graph so you will clearly see what I am trying to do.
NavigationGraph.kt
#Composable
internal fun NavigationGraph() {
val navController = rememberNavController()
NavHost(navController = navController, startDestination = ScreenRoute.Home.route) {
composable(ScreenRoute.Home.route) {
SetupMainActivityView { state ->
navController.navigate(ScreenRoute.Result.route + "/{$state}")
}
}
composable(
ScreenRoute.Result.route + "/{state}",
arguments = listOf(
navArgument("state") { type = NavType.StringType }
)
) { backStackEntry ->
ResultScreen(backStackEntry.arguments?.getString("state").orEmpty())
}
}
}
ResultScreen.kt
#Composable
fun ResultScreen(state: String) {
Log.e("TAG", "ResultScreen: $state" )
}
Actual Output
when you click on Button it started Loading screen. After Loading screen my Button screen appears than my Result Screen appears. You can see in my video.
Button Screen -> Loading Screen -> Again Button Screen -> Result Screen.
Expected Output
Button Screen -> Loading Screen -> Result Screen.
My Github project link. Can you guys guide me what I am doing wrong here. Many Thanks
UPDATE
#OptIn(ExperimentalMaterial3Api::class)
#Composable
fun SetupMainActivityView(
viewModel: MainActivityViewModel = koinViewModel(),
navigateToNext: (nearestResult: ArrayList<NearestResult>) -> Unit,
) {
Scaffold(topBar = {
TopAppBar(
title = { Text(text = stringResource(id = R.string.app_name)) },
backgroundColor = getBackgroundColor(),
elevation = 0.dp
)
}, content = { padding ->
Box(
modifier = Modifier
.fillMaxSize()
.padding(padding)
.background(getBackgroundColor()),
contentAlignment = Center
) {
when (val state = viewModel.stateResultFetchState.collectAsState().value) {
is ResultFetchState.OnSuccess -> {
LaunchedEffect(Unit) {
navigateToNext(state.nearestResult)
}
}
is ResultFetchState.IsLoading -> {
LoadingFunction()
}
is ResultFetchState.OnError,
is ResultFetchState.OnEmpty -> {
ActivityContent(viewModel)
}
}
}
})
}
After doing this my ResultScreen calling twice. Is it normal?

During loading you overlap the button view with the loading view, but when you succeed you remove the loading view, so the button view appears for the transition.
Depending on the expected behavior, you can move your when inside the content, and display content only on empty/error - it might make sense to leave the option to click back to cancel the request.
content = { padding ->
Box(Modifier.fillMaxSize().padding(padding).background(getBackgroundColor())) {
when (val state = viewModel.stateResultFetchState.collectAsState().value) {
is ResultFetchState.OnSuccess -> {
LaunchedEffect(Unit){
navigateToNext("loading $state")
}
}
is ResultFetchState.IsLoading -> {
LoadingFunction()
}
is ResultFetchState.OnError, is ResultFetchState.OnEmpty -> {
YourContent()
}
}
}
})
Or add LoadingFunction() inside ResultFetchState.OnSuccess, so that this view doesn't disappear from the screen during the transition.
is ResultFetchState.OnSuccess -> {
LaunchedEffect(Unit){
navigateToNext("loading $state")
}
LoadingFunction()
}
Also see this answer for why calling navigateToNext as you do is unsafe and why I've added LaunchedEffect.

Loading spinner not working correctly in next screen in jetpack compose

I am new in Compose Navigation. I have Button and when I clicked, I called the function in Viewmodel and trigger loading event with using StateFlow. So I called the next screen through navigation and calling loading spinner. I used delay(5000) to show spinner more before getting data but spinner is loading after the data is loaded. Can someone guide me.
MainActivityViewModel.kt
class MainActivityViewModel(private val resultRepository: ResultRepository) : ViewModel() {
val stateResultFetchState = MutableStateFlow<ResultFetchState>(ResultFetchState.OnEmpty)
fun getSportResult() {
viewModelScope.launch {
stateResultFetchState.value = ResultFetchState.IsLoading
val result = resultRepository.getSportResult()
delay(5000)
result.handleResult(
onSuccess = { response ->
if (response != null) {
stateResultFetchState.value = ResultFetchState.OnSuccess(response)
} else {
stateResultFetchState.value = ResultFetchState.OnEmpty
}
},
onError = {
stateResultFetchState.value =
ResultFetchState.OnError(it.errorResponse?.errorMessage)
}
)
}
}
}
SetupMainActivityView.kt
#OptIn(ExperimentalMaterial3Api::class)
#Composable
fun SetupMainActivityView(
viewModel: MainActivityViewModel = koinViewModel(),
navigateToNext: () -> Unit,
) {
Scaffold(topBar = {
TopAppBar(
title = { Text(text = stringResource(id = R.string.app_name)) },
backgroundColor = getBackgroundColor(),
elevation = 0.dp
)
}, content = { padding ->
Column(
modifier = Modifier
.fillMaxSize()
.background(getBackgroundColor())
.padding(padding),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Button(onClick = {
viewModel.getSportResult()
}) {
Text(text = stringResource(id = R.string.get_result))
}
}
})
when (val state = viewModel.stateResultFetchState.collectAsState().value) {
is ResultFetchState.OnSuccess -> {}
is ResultFetchState.IsLoading -> {
navigateToNext()
}
is ResultFetchState.OnError -> {}
is ResultFetchState.OnEmpty -> {}
}
}
My whole project link. Can someone guide me how can I show loading spinner after loading the next screen. Thanks
UPDATE
NavigationGraph.kt
#Composable
internal fun NavigationGraph() {
val navController = rememberNavController()
NavHost(navController = navController, startDestination = ScreenRoute.Home.route) {
composable(ScreenRoute.Home.route) {
SetupMainActivityView{
navController.navigate(ScreenRoute.Result.route)
}
}
composable(ScreenRoute.Result.route) {
ResultScreen()
}
}
}
ResultScreen.kt
#Composable
fun ResultScreen() {
CircularProgressIndicator()
}
please check my repository if you need more code. I added my github link above. Thanks

I can't see your code handling the Spinner. Anyway, a general idea to handle these kinda situations is
val state = remember{mutableStateOf<ResultFetchState>(ResultFetchState.EMPTY)}
if(state == ResultFetchState.LOADING){
//show spinner
Spinner()
}
...
state.value = viewModel.stateResultFetchState.collectAsState().value

How to pass parameter to BottomSheet of Jetpack Compose?

I am trying to display a modal BottomSheet, which requires a parameter. This is how I show BottomSheet: bottomSheetState.animateTo(ModalBottomSheetValue.Expanded)
And this is my set-up:
#Composable
fun MainView() {
val navController = rememberNavController()
val modalBottomSheetState = rememberModalBottomSheetState(
initialValue = ModalBottomSheetValue.Hidden,
confirmStateChange = {
it != ModalBottomSheetValue.HalfExpanded
}
)
ModalBottomSheetLayout(
sheetState = modalBottomSheetState,
sheetContent = {
AnimationScreen()
},
sheetShape = RoundedCornerShape(topStart = Radius.l, topEnd = Radius.l)
) {
Scaffold(
bottomBar = {
BottomBar(navController)
}
) {
BottomBarMain(navController, modalBottomSheetState)
}
}
}
So, my question is: what is a good way to pass a parameter to this ModalBottomSheet.
I have a possible solution, but I don't know if it is a proper way to do it. Here how it looks like:
var animationId by remember { mutableStateOf(-1L) }
...
sheetContent = {
AnimationScreen(animationId)
}
...
BottomBarMain(navController, modalBottomSheetState) {
animationId = it
}

How to pass events to Composables?

I have two composables like this:
#Composable
fun Composable1(viewModel: MyViewModel) {
LaunchedEffect(Unit) {
viewModel.eventsFlow.collect { event ->
if(event is ShowSnackbar) {
// Send this event to Composable2 to show snackbar
}
}
}
Composable2(...) // passing some data and lambdas
}
#Composable
fun Composable2(...) {
val scaffoldState = rememberScaffoldState()
// On receiving event, show a snackbar
Scaffold(scaffoldState) {
// Other stuff
}
}
(If another ShowSnackbar event comes while one snackbar is visible, I want to ignore that new event)
How to send such an event from one composable to another?

I created a small example. I hope It is help you. In my case I generate a "event" by means of clicking a button
class ComposeActivity5 : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposeTutorialTheme {
Composable1()
}
}
}
}
#Composable
fun Composable1() {
val scaffoldState = rememberScaffoldState()
var showHide by remember { mutableStateOf(false) }
var pressCount by remember { mutableStateOf(0) }
Scaffold(
scaffoldState = scaffoldState,
content = { innerPadding ->
Column(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier
.padding(innerPadding)
.fillMaxSize()
) {
Button(onClick = {
pressCount++
showHide = true
}) {
Text(text = "Test")
}
Composable2(scaffoldState, showHide, pressCount) {
showHide = false
}
}
}
)
}
#Composable
fun Composable2(
scaffoldState: ScaffoldState,
showHide: Boolean,
pressCount: Int,
onDismiss: () -> Unit
) {
val mostRecentOnDismiss by rememberUpdatedState(onDismiss)
LaunchedEffect(scaffoldState, showHide) {
if (showHide) {
scaffoldState.snackbarHostState.showSnackbar(
message = "We are ignore press button to show Snackbar. Total number of clicks $pressCount",
actionLabel = "Close",
duration = SnackbarDuration.Short,
)
mostRecentOnDismiss()
}
}
}

How to navigate to Detail View clicking in LazyColumn item with JetPack Compose?

I am trying to create an app with JetPack Compose (first time) and I am having some problem with the navigation. The application has a bottomBar with 3 items that navigates to the selected screen.
This works, the problem is when I try to access one of the items of a LazyColumn that is in one of the screens. I would like to navigate to another screen (Profile) where the data of the selected item is displayed but I can't find a way to do it. No matter how I try to do it, I always get this "#Composable invocations can only happen from the context of a #Composable function".
Could someone help me by explaining how to do it? What I want is to learn how and why, not just copy.
Thanks
MainActivity
class MainActivity : ComponentActivity() {
#ExperimentalFoundationApi
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
val systemUiController = rememberSystemUiController()
SideEffect {
systemUiController.setStatusBarColor(color = PrimaryDark)
}
AppTheme() {
MainScreen()
}
}
}
#ExperimentalFoundationApi
#Composable
fun MainScreen() {
val navController = rememberNavController()
val navigationItems = listOf(Obras, Talleres, Ajustes)
Scaffold(bottomBar = {
BottomNavigationBar(
navController = navController,
items = navigationItems
)
}) {
NavigationHost(navController)
}
}
}
NavigationHost.kt
#ExperimentalFoundationApi
#Composable
fun NavigationHost(navController: NavHostController) {
NavHost(navController = navController, startDestination = Obras.route) {
composable(Obras.route) {
Pantalla1(navigateToProfile = { authorId ->
navController.navigate("${Profile.route}/$authorId")
})
}
composable(Talleres.route) {
Pantalla2()
}
composable(Ajustes.route) {
Pantalla3()
}
composable(
Profile.route + "/{authorId}",
arguments = listOf(navArgument("authorId") { type = NavType.StringType })
) { backStackEntry ->
val authorId = backStackEntry.arguments!!.getString("authorId")!!
Profile(authorId)
}
}
}
Pantalla1.kt
typealias AuthorId = String
#ExperimentalCoroutinesApi
#Composable
fun Pantalla1(navigateToProfile: (AuthorId) -> Unit) {
Column(
modifier = Modifier
.fillMaxSize()
.padding(
paddingValues = PaddingValues(
bottom = 50.dp
)
),
) {
AutoresInfo(navigateToProfile)
}
}
#OptIn(ExperimentalFoundationApi::class)
#Composable
fun AutoresInfo(navigateToProfile: (AuthorId) -> Unit) {
var autoresList by remember {
mutableStateOf<List<Autor>?>(null)
}
JetFirestore(path = { collection("autores") },
queryOnCollection = { orderBy("nombre", Query.Direction.ASCENDING) },
onRealtimeCollectionFetch = { value, exception ->
autoresList = value.getListOfObjects()
}) {
autoresList?.let {
val grouped = it.groupBy { it.nombre[0] }
LazyColumn(
modifier = Modifier.fillMaxSize()
) {
grouped.forEach { (initial, autoresForInitial) ->
stickyHeader {
StickyHeaderAutores(initial = initial.toString())
}
items(autoresForInitial, key = { autor -> autor.nombre }) { autor ->
Surface(modifier = Modifier.clickable { navigateToProfile(autor.nombre) }) {
#OptIn(coil.annotation.ExperimentalCoilApi::class)
AutorCard(autor)
}
}
}
}
} ?: Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
CircularProgressIndicator(
color = Color.Red,
modifier = Modifier
.size(50.dp)
)
}
}
}

Step 1. Add argument to your profile navigation route. Check out documentation about navigating with arguments
composable(
Profile.route + "/{authorId}",
arguments = listOf(navArgument("authorId") { type = NavType.StringType })
) { backStackEntry ->
val authorId = backStackEntry.arguments!!.getString("authorId")!!
Profile(authorId)
}
Step 2. You need to pass down navigateToProfile function from your NavigationHost. You can replace AuthorId with Int(or an other type) if it's not String:
typealias AuthorId = String
#Composable
fun NavigationHost(navController: NavHostController){
NavHost(navController = navController, startDestination = Obras.route) {
composable(Obras.route) {
Pantalla1(navigateToProfile = { authorId ->
navController.navigate("${Profile.route}/$authorId")
})
}
...
}
#Composable
fun Pantalla1(navigateToProfile: (AuthorId) -> Unit) {
...
AutoresInfo(navigateToProfile)
...
}
#Composable
fun AutoresInfo(navigateToProfile: (AuthorId) -> Unit) {
...
items(autoresForInitial, key = { autor -> autor.nombre }) { autor ->
Surface(modifier = Modifier.clickable {
navigateToProfile(author.id)
}) {
AutorCard(autor)
}
}
...
}
Step 3. In you profile composable you need to fetch author by id. Not sure what's JetFirestore, you probably should use it.
#Composable
fun Profile(id: AuthorId) {
JetFirestore(
// fetch author by id
)
}

create a sealed class that contains the route like below
sealed class Screen(val route:String){
object MyListScreen:Screen("my_list_screen")
object MyDetailScreen:Screen("my_detail_screen")
}
create listItem with Row that receive a list and an event of click like below
#Composable
fun MyListItem(
yourList: YourList,
onItemClick:(yourList) -> Unit
) {
Row(
modifier = Modifier
.fillMaxWidth()
.clickable {
onItemClick(yourList)
}
){
//something here
}
Inside your listScreen in LazyColoumn you can do this
LazyColumn(modifier = Modifier.fillMaxSize()){
items (state.yourfreshlist){mylist->
MyListItem(mylist = mylist, onItemClick = {
navController.navigate(Screen.MyDetailScreen.route+"/${mylist.something}")
}
)
}
}
your host will be like this
NavHost(
navController = navController,
startDestination = Screen.MyListScreen.route
) {
composable(
route = Screen.MyListScreen.route
) {
MyListScreen(navController)
}
composable(
route = Screen.MyDetailScreen.route + "/{anything here id for example}"
) {
MyDetailScreen()
}
}
For more information, you can browse the docs