State & ViewModel (MVI)

Code

Create CartScreen.kt — the live total

Now — the screen that observes state. feature/cart/presentation/CartScreen.kt.

val state by viewModel.uiState.collectAsStateWithLifecycle() — subscribe to the StateFlow. When the state changes, the screen redraws automatically. WithLifecycle means "stop listening when the screen is in the background" (saving resources).
if (state.isEmpty) { ... } — an empty cart gets its own view.
LazyColumn { items(state.items) { ... } } — a card per item with the name, price and quantity controls (− / +).
Every tap is an event going up: viewModel.onEvent(CartEvent.IncreaseQuantity(...)). The screen computes nothing itself — it only sends events and shows state.
At the bottom, Total: €... from state.totalPrice.

This is the beauty of MVI: tap + → event → the ViewModel makes a new state → totalPrice is recomputed → the total on screen updates. Live, with no manual "refresh the total".

Verify. To see the cart working, temporarily add a few items (the menu does this next lesson). For example, from the CartScreen.kt preview or a temporary button, call onEvent(CartEvent.AddItem(pizza)). Then:

Tap "+" on Margherita (€8.50):
  qty: 1 → 2          Total: €8.50 → €17.00   (updates instantly)
Tap "−" down to 0:
  the item drops out of the cart

The total moves with the quantity — in real time, with no extra code.

Tip. The "Pay" button is deliberately left out here — Stripe arrives in lesson 11. For now the cart fully works in memory. Next lesson we connect the screens: the menu's "Add to cart" button will send CartEvent.AddItem, and navigation (Nav3) lets you move menu → cart.

CartScreen.kt CREATE

Create this file in app/src/main/java/eif/viko/lt/pica/feature/cart/presentation/

package eif.viko.lt.pica.feature.cart.presentation

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Card
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.collectAsStateWithLifecycle

@Composable
fun CartScreen(viewModel: CartViewModel) {
    // Observe the ViewModel's state; the UI recomposes whenever it changes.
    val state by viewModel.uiState.collectAsStateWithLifecycle()

    if (state.isEmpty) {
        Box(Modifier.fillMaxSize(), Alignment.Center) { Text("Your cart is empty") }
        return
    }

    Column(Modifier.fillMaxSize()) {
        LazyColumn(
            Modifier
                .weight(1f)
                .padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(12.dp)
        ) {
            items(state.items) { cartItem ->
                Card(Modifier.fillMaxWidth()) {
                    Row(
                        Modifier
                            .fillMaxWidth()
                            .padding(16.dp),
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Column(Modifier.weight(1f)) {
                            Text(cartItem.menuItem.name, style = MaterialTheme.typography.titleMedium)
                            Text("€%.2f".format(cartItem.menuItem.price))
                        }
                        // Every tap is an EVENT sent up to the ViewModel.
                        IconButton(onClick = {
                            viewModel.onEvent(CartEvent.DecreaseQuantity(cartItem.menuItem))
                        }) { Text("−") }
                        Text("${cartItem.quantity}")
                        IconButton(onClick = {
                            viewModel.onEvent(CartEvent.IncreaseQuantity(cartItem.menuItem))
                        }) { Text("+") }
                    }
                }
            }
        }

        // The live total — recomputed by the state every time items change.
        Surface(tonalElevation = 3.dp) {
            Row(
                Modifier
                    .fillMaxWidth()
                    .padding(16.dp),
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text("Total: €%.2f".format(state.totalPrice), style = MaterialTheme.typography.titleLarge)
                // The "Pay" button + checkout arrive in lesson 11 (Stripe).
            }
        }
    }
}