Updating a Compsable outside of the compose function using a flow

Question

I am working on a project with list-based menu options. These menu items interact with each other. For example, you could be customizing a pizza, and for a specific deal you get 3 free toppings. They can be meat, veg etc. Once 3 items are chosen the other items states will change. Either the toppings will show as disabled; or they will show the extra cost to add the additional toppings. We don't want to have to redraw all of the items to update the views. What would be better would be to have a flow or a manager that the items subscribe to; and then they would change their presentation when there is an event change. Could be a addCost event, or a disableOption etc.

I have seen some options in this SO post. Can we do this with flows?

Update State outside the composable function. (Jetpack compose)

Thank you!

Answer 1

Yes, you can use flows to update the state outside the Composable function in Jetpack Compose. Using flows is a good way to manage shared state across different Composables or components. Here's a general approach to achieve this:

1. Create a StateFlow or MutableStateFlow object in your ViewModel or another shared component. The choice between StateFlow and MutableStateFlow depends on whether the state is read-only or read-write.

// ViewModel or shared component
val menuStateFlow = MutableStateFlow<MenuState>(initialMenuState)

2. In your Composables, collect the menuStateFlow using the collectAsState extension function to observe changes in the flow and automatically recompose when the flow emits a new value.

@Composable
fun MenuOptions() {
    val menuState by viewModel.menuStateFlow.collectAsState()

    // Use the `menuState` to build your Composable UI
    // For example, you can conditionally disable or highlight options based on the state.
}

3. To update the state from outside the Composable, simply modify the menuStateFlow in your ViewModel or shared component. The changes will be automatically reflected in any Composables that collect the flow.

// ViewModel or shared component
fun updateMenuState(newMenuState: MenuState) {
    menuStateFlow.value = newMenuState
}

4. Whenever you want to update the state, call the updateMenuState function with the new state.

This way, you can use flows to manage the shared state and update the Composables without the need to redraw all of the items when the state changes. You can use events like addCost or disableOption to update the menuStateFlow and trigger Composable recomposition.

Make sure to manage your state changes in a thread-safe manner, especially if you're updating the state from different parts of your code.