Code

Create MenuScreen.kt — the menu list

Now the screen itself. feature/menu/presentation/MenuScreen.kt.

What's inside:

  • MenuScreen(items: List<MenuItem>) — the screen takes a list of pizzas as a parameter (static for now; a ViewModel provides it in lesson 5).
  • Scaffold { TopAppBar("Pica Menu") } — the screen frame with a top bar.
  • LazyColumn { items(items) { ... } } — for each pizza we render a Card with name, description and price.
  • "€%.2f".format(item.price) — the price with two decimals.
  • sampleMenu + @Preview — a short static list so you can see the screen in Android Studio without running.

Verify. Open MenuScreen.kt, click the Split view and wait for the Preview. You should see three cards:

┌─────────────────────────────┐
│ Margherita                  │
│ Tomato, mozzarella, basil   │
│ €8.50                       │
└─────────────────────────────┘
┌─────────────────────────────┐
│ Pepperoni  …  €10.00        │
└─────────────────────────────┘

A scrollable list of pizzas — the first screen that really looks like Pica.

Gotcha. The items function inside LazyColumn needs the right import:

import androidx.compose.foundation.lazy.items

Android Studio sometimes suggests the wrong items (e.g. from androidx.compose.foundation.lazy.grid, or a plain Kotlin collections one), and then you get "items cannot be called" or the list won't compile. If items is red — check the import; it must be foundation.lazy.items.