Hello there, I'm having an issue with handling sta...

# compose

[Marc]

Hello there,
I'm having an issue with handling state in a ``ViewModel``.
I have an app which has a Barcode-scanner to add products to my cart. The items which are in the cart should be rendered by CartList (and the CartItem subcomponent; which isn't necessary to show here). The products in cart are represented as a list in the viewmodel.

Well, when I add a ``Product`` to my ``cart`` in the ``Cart``-Viewmodel, the ``CartList`` does not re-render. Is it because it is a list of products and lists are somehow not observable? I use the ``cart.update`` function.

I use the google barcode scanner to add new products to my list. This function is nested in a FloatButton.


ViewModel

data class Product(
    val barcode: String,
    val name: String,
    val price: Double,
    val category: String,
    val image: Image?
)

class Cart : ViewModel() {
    private val _cart: MutableStateFlow<List<Product>> = MutableStateFlow(listOf())
    val cart: StateFlow<List<Product>> = _cart.asStateFlow()

    init {
        val product = Product("123456789", "Test", 13.99, "Test", null) // test product
        _cart.update { it + product }
    }

    fun addProduct(product: Product) {
        _cart.update { currentState ->
            currentState + product
        }
    }
}

My composable:

@Composable
fun CartList(padding: PaddingValues) {
    val cart: Cart = viewModel();

    LazyColumn(contentPadding = padding) {
        items(cart.cart.value) { product ->
            CartItem(product)
        }
    }
}

QR-Code-Scanner which is called from a floating button:

@Composable
fun FloatButtonScanCode() {
    // Local context
    val context = LocalContext.current
    val cart: Cart = viewModel()

    FloatingActionButton(onClick = {
        val optionsBuilder = GmsBarcodeScannerOptions.Builder()
            .setBarcodeFormats(
                Barcode.FORMAT_EAN_13, Barcode.FORMAT_EAN_8
            )
        val options = optionsBuilder.build()


        val gmsBarcodeScanner = GmsBarcodeScanning.getClient(context, optionsBuilder.build())
        gmsBarcodeScanner
            .startScan()
            .addOnSuccessListener { barcode: Barcode ->

                if (barcode.rawValue != null) {

                    cart.addProduct(Product("123456789", "Test2", 1.99, "Test", null)) // <-- this is where I add a new product to the cart, but after calling addProduct the element with the item list does not re-render
                    println("Added product: Test2 to cart") 

                    println("Cart ${cart.cart.value}") // proof that the new product is added to the cart-array
                }
            }
            .addOnFailureListener { e: Exception -> System.err.println(e) }
            .addOnCanceledListener {
                System.err.println("Cancelled")
            }
    }) {
        Icon(Icons.Outlined.AddCircle, contentDescription = "Add")
    }
}

[Ian G. Clifton]

I’d recommend going through the state codelab to better understand this (here’s the specific page but the whole thing is helpful https://developer.android.com/codelabs/jetpack-compose-state?hl=en#10). In short, Compose doesn’t know that you’re adding items to the List, so it doesn’t trigger recomposition.

[Marc]

@Ian G. Clifton just wanted to drop a thank you for the link, it helped me a lot!

[Ian G. Clifton]

Glad to hear it!