P2-21: Home toont nu 1/1/2/3 kolommen (live geverifieerd)

Meerkoloms Home alsnog werkend gekregen. De eerdere poging faalde niet op
het grid-widget maar op de OUDER: elk tabblad op Home zat in een Column
met "Scrollable" aan (SingleChildScrollView), waardoor de hoogte
oneindig was en een masonry-grid een leeg vlak rendert. De TabBarView
zit al in een Expanded, dus de begrenzing was er wel - hij werd alleen
weggegooid.

Drie wijzigingen, alle drie nodig: component naar StaggeredView met
responsieve Cross Axis Count 1/1/2/3, Shrink Wrap uit, en per tabblad
(alle 5) de Column op Scrollable uit + het component op Expanded.
FlutterFlow blokkeert die laatste stap met "Invalid Action" zolang de
grid onbegrensd is; oplossing is Shrink Wrap tijdelijk aan te zetten.

Geverifieerd: verse export toont PagedMasonryGridView met responsieve
kolomtelling en 0 SingleChildScrollView in home_widget.dart; dart analyze
0 errors; op toestel tablet 1280dp -> 3 kolommen, telefoon 411dp -> 1
kolom met ongewijzigd uiterlijk, alle vijf tabbladen renderen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

CLAUDE.md

@@ -891,30 +891,37 @@ uit (zet 'm handmatig terug als het origineel 'm aan had), en een
 GridView krijgt er een `Child Aspect Ratio` bij die een ListView niet
 had.
 
-**Een lijst met paginering binnen een `SingleChildScrollView` laat zich
-NIET omzetten naar een grid — live bewezen 2026-09-01, en weer
-teruggedraaid.** Home plaatst `HomeUitgaantabelKaartComponent` in een
-`SingleChildScrollView > Column` (`home_widget.dart`), dus in een
-context zonder begrensde hoogte. Daar werkt alleen `PagedListView`:
-- **`PagedMasonryGridView` (StaggeredView) rendert er niets** — geen
-  kaarten, geen laadspinner, geen foutmelding, geen overflow. Puur een
-  leeg vlak. Op telefoon- én tabletformaat getest, met een baseline-build
-  ernaast die wél gewoon kaarten toonde. De API leverde intussen keurig
-  44 KB data, dus het is zuiver een renderprobleem.
-- **`PagedGridView` is óók geen oplossing**, om een andere reden: een
-  GridView bepaalt de celhoogte via `childAspectRatio` (breedte/hoogte),
-  en dat kan een **vaste** kindhoogte principieel niet volgen — binnen
-  één breekpuntband varieert de schermbreedte, dus elke waarde geeft óf
-  overflow óf grote witruimte. De kaart hier heeft een vaste responsieve
-  hoogte (160/200/240/280 + 12px padding), en met de standaard
-  `childAspectRatio: 1.0` werd een cel op 411dp ruim 400dp hoog tegen
-  184dp benodigd.
-**Gevolg:** meerkoloms op tablet vraagt eerst een herstructurering van
-de ouder (de `SingleChildScrollView` eruit, de grid zelf laten scrollen)
-— niet alleen een Replace op het component. Begin daar niet aan zonder
-live test. StaggeredView ondersteunt overigens wél gewoon paginering
-(de "Enable Infinite Scroll"-toggle staat er en genereert
-`PagedMasonryGridView`); dat was niet de blokkade.
+**Meerkoloms maken van een lijst met paginering: de grid moet een
+BEGRENSDE hoogte krijgen, anders rendert hij niets. Volledig recept,
+live bewezen 2026-09-01 op Home (telefoon 411dp -> 1 kolom, tablet
+1280dp -> 3 kolommen).**
+Symptoom als je dit mist: `PagedMasonryGridView` toont een **leeg vlak**
+— geen kaarten, geen laadspinner, geen foutmelding, geen overflow. Niets
+in `dart analyze`, niets in logcat. De data komt gewoon binnen.
+Oorzaak: Home zet elk tabblad in een **Column met "Scrollable" aan**
+(genereert `SingleChildScrollView`), en daarmee is de hoogte oneindig.
+Een `ListView` met `shrinkWrap: true` overleeft dat, een masonry-grid
+niet. De `TabBarView` zelf zit al in een `Expanded`, dus de begrenzing
+is er wél — hij wordt alleen weggegooid.
+**De drie wijzigingen (alle drie nodig):**
+1. Op het component: `ListView` → **StaggeredView** (Replace; zie het
+   pagination-recept hieronder), met `Cross Axis Count` als
+   **Responsive Value** 1/1/2/3.
+2. Op datzelfde component: **Shrink Wrap UIT**. Met shrinkWrap aan blijft
+   het leeg.
+3. Op de pagina, per tabblad: de omhullende **Column op "Scrollable"
+   uit**, én het component daarin op **Expanded** (Wrap Widget → Flex →
+   Expansion = Expanded). De grid scrollt voortaan zelf.
+Geverifieerd dat zowel "component direct in de TabBarView" als
+"Column(niet-scrollend) > Expanded > component" allebei werken; de
+tweede is in de builder het makkelijkst te klikken.
+**GridView is hier géén alternatief:** die bepaalt de celhoogte via
+`childAspectRatio`, en dat kan de vaste kaarthoogte (160/200/240/280 +
+12px padding) principieel niet volgen — binnen één breekpuntband
+varieert de schermbreedte, dus elke waarde geeft óf overflow óf grote
+witruimte. StaggeredView geeft elk kind zijn eigen hoogte en heeft dat
+veld niet eens. StaggeredView ondersteunt gewoon paginering
+(`PagedMasonryGridView` + "Enable Infinite Scroll").
 
 **Twee dialogen zijn wél te vergroten/verplaatsen — dat lost een hoop
 clipping op.** Aanvulling op het doodlopende page-zoom-spoor hieronder:

TASKS.md

@@ -3469,9 +3469,9 @@ kaarttitels op afbreken/overlopen nakijken. Ook een legitieme uitkomst:
 niet doen — dan is de app herkenbaar op kleur maar mist hij de
 kranten-uitstraling.
 
-**P2-21 · Eigenaar: Claude — bezig (sessie 2026-09-01, vervolg: Bob wil
-wél meerdere kolommen; aanpak via een kopie van Home).**
-Tabletweergave herschikken i.p.v. uitrekken. Verifiëren op `emulator-5556` (tablet) én
+**P2-21 · Eigenaar: Claude. Punt 2/3 (Home meerkoloms) is op
+2026-09-01 AFGEROND en live geverifieerd — zie punt 3. Punt 4 en 5 staan
+nog open.** Tabletweergave herschikken i.p.v. uitrekken. Verifiëren op `emulator-5556` (tablet) én
 telefoonformaat. Staat los van P1-11 (labels/overflow, al afgerond).
 
 **Meetgegevens (2026-08-31, Claude).** Breekpunten staan in
@@ -3506,50 +3506,42 @@ met een verse export bevestigd byte-identiek aan het origineel. Let op
 bij een Replace: de **Scrollable**-instelling van de `Column` gaat
 verloren en moet handmatig terug.)*
 
-**3. UITGEVOERD EN TERUGGEDRAAID op 2026-09-01 (Claude, in Bob's
-Chrome, met Bob's expliciete akkoord voor optie (a)). Uitkomst: optie
-(a) is niet haalbaar op deze plek — Home staat weer op de oude,
-werkende `PagedListView`.**
-
-De hele omzetting is technisch gelukt en exportgeverifieerd, maar op een
-echt toestel bleek het resultaat kapot:
-- De pagination-blokkade bij Replace is gewoon te omzeilen (recept staat
-  nu in `CLAUDE.md`), en **StaggeredView ondersteunt wél paginering**
-  (`PagedMasonryGridView` + "Enable Infinite Scroll") — dat was dus niet
-  de belemmering.
-- **Maar `PagedMasonryGridView` rendert niets** binnen de
-  `SingleChildScrollView > Column` waarin `home_widget.dart` dit
-  component plaatst: geen kaarten, geen spinner, geen foutmelding, geen
-  overflow — een leeg vlak, op telefoon- én tabletformaat. Een
-  baseline-build met alleen dit component teruggezet toonde op datzelfde
-  toestel wél gewoon kaarten (Knisper, Westland Comedy Café Festival,
-  Micha Wertheim); de API leverde intussen 44 KB data. Zuiver een
-  renderprobleem dus.
-- **`PagedGridView` is evenmin bruikbaar**: die bepaalt de celhoogte via
-  `childAspectRatio`, en dat kan de **vaste** kaarthoogte
-  (160/200/240/280 + 12px padding) principieel niet volgen — binnen één
-  breekpuntband varieert de schermbreedte, dus elke waarde geeft óf
-  overflow óf grote witruimte (standaard `1.0` gaf een cel van ruim
-  400dp tegen 184dp benodigd op een 411dp-telefoon).
-
-**Alles is teruggedraaid en geverifieerd**: verse export bevat 0
-treffers op `MasonryGridView`/`PagedGridView`/`crossAxisCount`/
-`childAspectRatio`/`StaggeredView`, de `PagedListView` staat er weer met
-`shrinkWrap: true` / `reverse: false` / `Axis.vertical` /
-`nextPageNumber` / `RefreshIndicator` / beide `SpinKitFadingCircle`-
-indicatoren op thema-token `primary`; `dart analyze` 0 errors. Het enige
-resterende verschil met `git HEAD` in dit bestand is een verwijderde
-tekstschaduw — dat is P1-28-werk van een andere sessie, niet hiervan.
-
-**Wat er nu nog over is aan keuze voor Bob:** meerkoloms op tablet vraagt
-een herstructurering van de **ouder** — de `SingleChildScrollView` in
-`home_widget.dart` eruit en de grid zelf laten scrollen — niet alleen een
-Replace op het component. Dat raakt het scrollgedrag van de hele
-startpagina (inclusief de sliderband erboven, die nu meescrollt) en
-verdient een eigen sessie mét live test op een toestel. Het alternatief
-blijft **optie (b)**: pagination ongemoeid laten en de kaart een
-maximumbreedte geven + centreren — lost de onleesbaar lange regels op,
-geeft geen twee kolommen, en is risicoloos.
+**3. AFGEROND 2026-09-01 — Home toont nu 1/1/2/3 kolommen, live
+geverifieerd op een toestel.** Eerste poging (alleen het component
+omzetten) is teruggedraaid omdat de grid niets rendeerde; de echte
+oorzaak lag in de **ouder**, en die is nu ook aangepakt.
+
+**Wat de blokkade was:** Home zet elk tabblad in een **Column met
+"Scrollable" aan** (genereert `SingleChildScrollView`), waardoor de
+hoogte oneindig is. Een `ListView` met `shrinkWrap` overleeft dat, een
+masonry-grid niet — die rendert dan een **leeg vlak** zonder kaarten,
+spinner, foutmelding of overflow. De `TabBarView` zit al in een
+`Expanded`, dus de begrenzing wás er; hij werd alleen weggegooid.
+
+**De drie wijzigingen (alle drie nodig):**
+1. Component `HomeUitgaantabelKaartComponent`: `ListView` →
+   **StaggeredView** (`PagedMasonryGridView`), `Cross Axis Count` als
+   Responsive Value **1/1/2/3**, paginering + pull-to-refresh +
+   beide laadindicatoren ongewijzigd behouden.
+2. Datzelfde component: **Shrink Wrap UIT**.
+3. Home, per tabblad (alle 5): omhullende **Column op "Scrollable" uit**
+   en het component erin op **Expanded**.
+
+**Volgorde-klem (belangrijk als je dit ooit herhaalt):** FlutterFlow
+weigert stap 3 met *"Invalid Action — would have caused a crashing
+error"* zolang de grid onbegrensd is. Oplossing: zet **Shrink Wrap
+tijdelijk AAN**, doe dan alle vijf de tabbladen, en zet Shrink Wrap
+daarna pas weer uit.
+
+**Geverifieerd:** verse export toont `PagedMasonryGridView` met de
+responsieve kolomtelling, **0** `SingleChildScrollView` in
+`home_widget.dart`, en op een echt toestel: tablet 1280dp → **3
+kolommen**, telefoon 411dp → **1 kolom** met exact het oude uiterlijk.
+Alle vijf tabbladen renderen.
+
+*(Onderweg gemeten met een tijdelijke debug-print: `MediaQuery` geeft op
+de tablet 1280.0 dp en op de telefoon 411.4 dp — de breekpunten kloppen
+dus.)*
 
 **4. Favorieten — kleine correctie, los van het bovenstaande.**
 `favorieten_widget.dart:339` en `:663` hebben `crossAxisCount: 2`