Home > Software engineering >  Production example of Jetpack Compose App?
Production example of Jetpack Compose App?

Time:09-30

Is there open source production example of Jetpack Compose App? I want to check how to work with complex state in Compose?

I am rewriting one whole app to Compose and stuck on how to represent complex states for screen and components.

For example let we have some Filter screen for Movie app where we can select/deselect genres, ratings, counties, years and so on.

How to represent the state of entire Filter screen?

enum class FilterType {
    Genre,
    Rating,
    Country,
    Year,
}

class FilterItemState1(
    val name: String,
    val type: FilterType,
    selected: Boolean
) {
    var selected by mutableStateOf(selected)
}

data class FilterItemState2(
    val name: String,
    val type: FilterType,
    val selected: Boolean,
)
Option 1:

data class FilterScreenState(
    val listOfFilters: List<FilterItemState1>
)

If you now want to change selection item you change observable selected variable:

item.selected = !item.selected
Option 2:

data class FilterScreenState(
    val listOfFilters: SnapshotStateList<FilterItemState>
)

If you now want to change selection item you change element inside observable listOfFilters:

state.listOfFilters.set(index, item.copy(selected = !item.selected))

Which option is better and when I should use one or another? It's good to have some production Compose app as reference code.

CodePudding user response:

You have:

CodePudding user response:

I highly recommended to you check the following links carefully:

Take seriously the danger of perfectionism in coding and take everything for granted. Even the example codes of Compose developed by the best Android developers have inconsistencies.

enum class FilterType {
    Genre,
    Rating,
    Country,
    Year,
}

data class FilterItem(
    val name: String,
    val type: FilterType,
    val selected: Boolean,
)

data class FilterUiState(
    val filterItems: List<FilterItem>
)

@Composable
fun FilterScreen() {
    var uiState by remember { 
        mutableStateOf(FilterUiState(filterItems = listOf(..))) 
    }
    
    SideEffect {
        val updatedItems = uiState.filterItems.mapIndexed { index, item ->
            if (index == 0) item.copy(selected = true)
        }
        uiState = uiState.copy(filterItems = updatedItems)
    }
}
  • Related