P2-12 volledig afgerond: blurhash laad-placeholder op alle 9 live CachedNetworkImage-plekken

Resterende 6 plekken uit de eerste helft van sessie 43 (event_current
(2x), evenement_horecagelegenheid (2x), horecagelegenheid_event_tabel
_component_copy, uitgaantabel_kaart) kregen dezelfde 'Use Blur Hash' +
vaste neutrale hash-toggle als de eerste 3. 2 bevestigd dode orphans
(uitgaantabel_kaart_component, evenement_component) bewust
overgeslagen, zie P2-7.

Bevestigd via verse export (6x BlurHashImage met de juiste hash-string
teruggevonden) + flutter analyze (0 errors, alleen bestaande
info/warning-lints). TASKS.md bijgewerkt: P2-12 uit de lijst verwijderd.

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

TASKS.md

@@ -1,9 +1,9 @@
 # Uitgaanskrant — takenlijst
 
-**Deze sessie (2026-08-21, sessie 43, ~1.5u builder-werk via gedeelde
-Chrome-browserautomatisering, na expliciete toestemming in de chat):**
-drie taken opgepakt, alle drie bevestigd via verse export + gerichte
-`flutter analyze` (0 errors, alleen bestaande info/warning-lints).
+**Deze sessie (2026-08-21, sessie 43, ~2.5u builder-werk via gedeelde
+Chrome-browserautomatisering, na expliciete toestemming in de chat,
+in 2 blokken):** drie taken opgepakt, alle bevestigd via verse export +
+gerichte `flutter analyze` (0 errors, alleen bestaande info/warning-lints).
 1. **P1-25 afgerond** — RenderFlex-overflow op
    `home_uitgaantabel_kaart_component_widget.dart:359` bleek de
    `plaats`-Text te zijn die als enige van 4 buurvelden geen
@@ -19,17 +19,20 @@ drie taken opgepakt, alle drie bevestigd via verse export + gerichte
    per ongeluk overschreven worden"-valkuil uit `CLAUDE.md` deed zich
    opnieuw voor (typen in de zoekbalk landde in het Component
    Name-veld) — meteen hersteld, geen blijvende schade.
-3. **P2-12 gedeeltelijk afgerond** — laad-placeholder via FlutterFlow's
-   "Use Blur Hash"-toggle + een vaste neutrale hash-string (nieuw
-   recept, zie `CLAUDE.md`), toegepast op 3 van de ~9 live
-   `CachedNetworkImage`-plekken (horeca-overzichtskaart, Home-kaart,
-   horeca-detail-fotocarousel) — resterende plekken staan genoteerd bij
-   P2-12.
-**Live geverifieerd vóór afsluiting:** `ff-run-fvm.sh`-build op
-emulator-5554 draaide succesvol, geen nieuwe excepties — de enige nog
-optredende exceptie is exact het al gedocumenteerde open P1-24-restpunt
-(`HomeUitgaantabelKaartComponent`'s JSON-Path-guard). Gecommit + gepusht
-(`f505a71`).
+3. **P2-12 volledig afgerond** (2e blok, op Bob's "ga nog maar even
+   door") — laad-placeholder via FlutterFlow's "Use Blur Hash"-toggle +
+   een vaste neutrale hash-string (nieuw recept, zie `CLAUDE.md`),
+   toegepast op alle 9 live `CachedNetworkImage`-plekken in het project
+   (2 bevestigd dode orphans bewust overgeslagen, zie P2-7).
+**Live geverifieerd na blok 1:** `ff-run-fvm.sh`-build op emulator-5554
+draaide succesvol, geen nieuwe excepties — de enige optredende
+exceptie was exact het al gedocumenteerde open P1-24-restpunt
+(`HomeUitgaantabelKaartComponent`'s JSON-Path-guard). Blok 2 alleen
+geverifieerd via verse export + `flutter analyze` (geen tweede live
+emulator-launch meer gedaan, `emulator-5554` was tussentijds
+gestopt/verdwenen uit `adb devices` — puur additieve wijziging
+(laad-placeholder), laag risico). Beide blokken gecommit + gepusht
+(`f505a71`, `14f97e3`, en het commit van blok 2 hieronder).
 
 ---
 
@@ -2183,43 +2186,41 @@ niet-uitgevoerde vervolgstappen — zie de oorspronkelijke analyse in de
 sessiegeschiedenis als dat ooit weer relevant wordt. Uit deze lijst
 verwijderd.)*
 
-**P2-12 · Eigenaar: Claude/Onbepaald — gedeeltelijk afgerond sessie 43,
-resterende plekken hieronder.** Geen laad-placeholder/skeleton bij
-afbeeldingen (carousel-kaarten, horeca-logo's) — gezien 2026-08-20 op
-zowel telefoon als tablet: een kaart toont eerst een lege witte vlek,
-en pas 1-2 seconden later verschijnt de venue-foto/het logo (bv. het
-Fluor33-logo op Home's carousel). Geen crash/bug (bevestigd: uiteindelijk
-laadt de juiste afbeelding altijd), maar oogt bij een trage verbinding
-als een kapotte/lege kaart.
-
-**Werkend recept gevonden (2026-08-21, sessie 43, Claude, builder):**
-niet via een handmatige `Shimmer`/`Container`-wrap (geen los
-"Placeholder"-veld beschikbaar op FlutterFlow's Image-widget), maar via
-de bestaande **"Use Blur Hash"**-toggle (Image-widget → rechterpaneel →
-zoek "blur") + een **vaste, algemene Blur Hash String**
+*(P2-12 afgerond 2026-08-21, sessie 43 — Claude, builder, bevestigd via
+verse export + `flutter analyze` (0 errors). Geen laad-placeholder/
+skeleton bij afbeeldingen (carousel-kaarten, horeca-logo's) — gezien
+2026-08-20 op zowel telefoon als tablet: een kaart toonde eerst een
+lege witte vlek, pas 1-2 seconden later de venue-foto/het logo. Geen
+crash/bug, maar oogde bij een trage verbinding als een kapotte/lege
+kaart.
+
+**Werkend recept:** niet via een handmatige `Shimmer`/`Container`-wrap
+(geen los "Placeholder"-veld beschikbaar op FlutterFlow's Image-widget),
+maar via de bestaande **"Use Blur Hash"**-toggle (Image-widget →
+rechterpaneel → zoek "blur") + een **vaste, algemene Blur Hash String**
 (`L6PZfSi_.AyE_3t7t7R**0o#DgR4` — een neutrale grijze placeholder-hash,
 niet gekoppeld aan de echte foto, want dit project heeft geen
 per-afbeelding blurhash-data uit Drupal). Genereert automatisch een
 `OctoImage` met `placeholderBuilder: (_) => Image(image:
 BlurHashImage('...'), fit: BoxFit.cover)` rond de bestaande
-`CachedNetworkImageProvider` — geen widget-tree-wijziging nodig, puur
-2 property-velden op de bestaande Image-node. **Val op:** het
-tekstveld verschijnt pas ná de eerste klik op de toggle en moet
-soms 2x aangeklikt/getypt worden vóór de tekst blijft staan (zelfde
-"ziet er leeg uit, moet nogmaals"-patroon als elders in CLAUDE.md) —
-altijd verifiëren via een verse export dat de string niet leeg bleef.
-**Toegepast en bevestigd (verse export, 3 plekken):**
-`horecagelegenheidoverzicht_kaart_widget.dart` (hoofdoverzichtskaart),
-`home_uitgaantabel_kaart_component_widget.dart` (Home-kaart),
-`horecagelegenheid_current_widget.dart` (foto-carousel op de
-detailpagina).
-
-**Resterende plekken (zelfde 2-klikken-recept, niet meer gedaan wegens
-tijd deze sessie):** `event_current_widget.dart`,
-`evenement_component_widget.dart`, `evenement_horecagelegenheid_widget.dart`,
+`CachedNetworkImageProvider` — geen widget-tree-wijziging nodig, puur 2
+property-velden op de bestaande Image-node. **Val op:** het
+"Blur Hash String"-tekstveld registreerde bij vrijwel elke widget de
+**eerste** typing niet (bleef leeg na Tab/blur), de **tweede** poging
+(zelfde klik-en-typ-actie herhaald) lukte steevast wel — altijd
+verifiëren via een verse export.
+
+**Alle 9 live `CachedNetworkImage`-plekken afgerond** (2 bevestigd
+confirmed-dode orphans bewust overgeslagen — `uitgaantabel_kaart_component_widget.dart`
+en `evenement_component_widget.dart`, zie P2-7):
+`horecagelegenheidoverzicht_kaart_widget.dart`,
+`home_uitgaantabel_kaart_component_widget.dart`,
+`horecagelegenheid_current_widget.dart` (foto-carousel), `event_current_widget.dart`
+(2x — foto-carousel + venue-logo), `evenement_horecagelegenheid_widget.dart`
+(2x — foto-carousel + establishment-logo),
 `horecagelegenheid_event_tabel_component_copy_widget.dart`,
-`uitgaantabel_kaart_widget.dart`/`uitgaantabel_kaart_component_widget.dart`
-(laatste is mogelijk de bevestigd dode P2-7-orphan, dan niet nodig).
+`uitgaantabel_kaart_widget.dart` (Favorieten Tab 1). Uit deze lijst
+verwijderd.)*
 
 **P2-13 · Eigenaar: Bob (Drupal-theme, geen FlutterFlow/Claude-taak —
 puur advies, niet uitgevoerd).** Op Bob's vraag (2026-08-21) ook de

android/app/build.gradle

@@ -55,7 +55,7 @@ android {
     defaultConfig {
         // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
         applicationId "com.uitgaanskrant.app"
-        minSdkVersion flutter.minSdkVersion
+        minSdkVersion 23
         targetSdkVersion 36
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName

android/build.gradle

@@ -43,6 +43,6 @@ subprojects {
     project.evaluationDependsOn(':app')
 }
 
-tasks.register("clean", Delete) {
-    delete rootProject.layout.buildDirectory
+task clean(type: Delete) {
+    delete rootProject.buildDir
 }

ios/Runner.xcodeproj/project.pbxproj

@@ -44,8 +44,8 @@
 		97C146FB1CF9000F007C117D /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Main.storyboard; sourceTree = "<group>"; };
 		97C146FD1CF9000F007C117D /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
 		97C147001CF9000F007C117D /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
-		6436409027A31CD400820AF7 /* nl */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = nl; path = nl.lproj/InfoPlist.strings; sourceTree = "<group>"; };
-		6436409027A31CD200820AF7 /* en */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = en; path = en.lproj/InfoPlist.strings; sourceTree = "<group>"; };
+		6436409C27A31CD300820AF7 /* nl */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = nl; path = nl.lproj/InfoPlist.strings; sourceTree = "<group>"; };
+		6436409227A31CD000820AF7 /* en */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = en; path = en.lproj/InfoPlist.strings; sourceTree = "<group>"; };
 		97C147021CF9000F007C117D /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
@@ -225,8 +225,8 @@
 		6436409C27A31CD800820AF7 /* InfoPlist.strings */ = {
 			isa = PBXVariantGroup;
 			children = (
-				6436409027A31CD400820AF7 /* nl */,
-				6436409027A31CD200820AF7 /* en */,
+				6436409C27A31CD300820AF7 /* nl */,
+				6436409227A31CD000820AF7 /* en */,
 			);
 			name = InfoPlist.strings;
 			sourceTree = "<group>";

lib/evenement/evenement_horecagelegenheid/evenement_horecagelegenheid_model.dart

@@ -9,8 +9,10 @@ import 'evenement_horecagelegenheid_widget.dart'
 import 'package:carousel_slider/carousel_slider.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_blurhash/flutter_blurhash.dart';
 import 'package:flutter_spinkit/flutter_spinkit.dart';
 import 'package:google_fonts/google_fonts.dart';
+import 'package:octo_image/octo_image.dart';
 import 'package:provider/provider.dart';
 
 class EvenementHorecagelegenheidModel

lib/evenement/evenement_horecagelegenheid/evenement_horecagelegenheid_widget.dart

@@ -7,8 +7,10 @@ import '/index.dart';
 import 'package:carousel_slider/carousel_slider.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_blurhash/flutter_blurhash.dart';
 import 'package:flutter_spinkit/flutter_spinkit.dart';
 import 'package:google_fonts/google_fonts.dart';
+import 'package:octo_image/octo_image.dart';
 import 'package:provider/provider.dart';
 import 'evenement_horecagelegenheid_model.dart';
 export 'evenement_horecagelegenheid_model.dart';
@@ -316,10 +318,17 @@ class _EvenementHorecagelegenheidWidgetState
                           if (fotoosItem != null && fotoosItem != '') {
                             return ClipRRect(
                               borderRadius: BorderRadius.circular(8.0),
-                              child: CachedNetworkImage(
-                                fadeInDuration: Duration(milliseconds: 500),
-                                fadeOutDuration: Duration(milliseconds: 500),
-                                imageUrl: fotoosItem,
+                              child: OctoImage(
+                                placeholderBuilder: (_) => SizedBox.expand(
+                                  child: Image(
+                                    image: BlurHashImage(
+                                        'L6PZfSi_.AyE_3t7t7R**0o#DgR4'),
+                                    fit: BoxFit.cover,
+                                  ),
+                                ),
+                                image: CachedNetworkImageProvider(
+                                  fotoosItem,
+                                ),
                                 width: 200.0,
                                 height: 200.0,
                                 fit: BoxFit.cover,
@@ -474,14 +483,22 @@ class _EvenementHorecagelegenheidWidgetState
                                     '')
                               ClipRRect(
                                 borderRadius: BorderRadius.circular(8.0),
-                                child: CachedNetworkImage(
-                                  fadeInDuration: Duration(milliseconds: 500),
-                                  fadeOutDuration: Duration(milliseconds: 500),
-                                  imageUrl: valueOrDefault<String>(
-                                    EstablishmentInfoCall.establshmentLogo(
-                                      columnEstablishmentInfoResponse.jsonBody,
+                                child: OctoImage(
+                                  placeholderBuilder: (_) => SizedBox.expand(
+                                    child: Image(
+                                      image: BlurHashImage(
+                                          'L6PZfSi_.AyE_3t7t7R**0o#DgR4'),
+                                      fit: BoxFit.cover,
+                                    ),
+                                  ),
+                                  image: CachedNetworkImageProvider(
+                                    valueOrDefault<String>(
+                                      EstablishmentInfoCall.establshmentLogo(
+                                        columnEstablishmentInfoResponse
+                                            .jsonBody,
+                                      ),
+                                      'Logo',
                                     ),
-                                    'Logo',
                                   ),
                                   width:
                                       MediaQuery.sizeOf(context).width * 0.15,

lib/horecagelegenhedenoverzicht/event_current/event_current_model.dart

@@ -15,8 +15,10 @@ import 'package:aligned_tooltip/aligned_tooltip.dart';
 import 'package:carousel_slider/carousel_slider.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_blurhash/flutter_blurhash.dart';
 import 'package:flutter_spinkit/flutter_spinkit.dart';
 import 'package:google_fonts/google_fonts.dart';
+import 'package:octo_image/octo_image.dart';
 import 'package:provider/provider.dart';
 import 'package:share_plus/share_plus.dart';
 

lib/horecagelegenhedenoverzicht/event_current/event_current_widget.dart

@@ -14,8 +14,10 @@ import 'package:aligned_tooltip/aligned_tooltip.dart';
 import 'package:carousel_slider/carousel_slider.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_blurhash/flutter_blurhash.dart';
 import 'package:flutter_spinkit/flutter_spinkit.dart';
 import 'package:google_fonts/google_fonts.dart';
+import 'package:octo_image/octo_image.dart';
 import 'package:provider/provider.dart';
 import 'package:share_plus/share_plus.dart';
 import 'event_current_model.dart';
@@ -258,12 +260,18 @@ class _EventCurrentWidgetState extends State<EventCurrentWidget>
                                 if (fotoosItem != null && fotoosItem != '') {
                                   return ClipRRect(
                                     borderRadius: BorderRadius.circular(8.0),
-                                    child: CachedNetworkImage(
-                                      fadeInDuration:
-                                          Duration(milliseconds: 500),
-                                      fadeOutDuration:
-                                          Duration(milliseconds: 500),
-                                      imageUrl: fotoosItem,
+                                    child: OctoImage(
+                                      placeholderBuilder: (_) =>
+                                          SizedBox.expand(
+                                        child: Image(
+                                          image: BlurHashImage(
+                                              'L6PZfSi_.AyE_3t7t7R**0o#DgR4'),
+                                          fit: BoxFit.cover,
+                                        ),
+                                      ),
+                                      image: CachedNetworkImageProvider(
+                                        fotoosItem,
+                                      ),
                                       width: 200.0,
                                       height: 200.0,
                                       fit: BoxFit.cover,
@@ -615,15 +623,21 @@ class _EventCurrentWidgetState extends State<EventCurrentWidget>
                                         child: ClipRRect(
                                           borderRadius:
                                               BorderRadius.circular(8.0),
-                                          child: CachedNetworkImage(
-                                            fadeInDuration:
-                                                Duration(milliseconds: 500),
-                                            fadeOutDuration:
-                                                Duration(milliseconds: 500),
-                                            imageUrl: EvenementCall.eventLogog(
-                                              eventCurrentEvenementResponse
-                                                  .jsonBody,
-                                            )!,
+                                          child: OctoImage(
+                                            placeholderBuilder: (_) =>
+                                                SizedBox.expand(
+                                              child: Image(
+                                                image: BlurHashImage(
+                                                    'L6PZfSi_.AyE_3t7t7R**0o#DgR4'),
+                                                fit: BoxFit.cover,
+                                              ),
+                                            ),
+                                            image: CachedNetworkImageProvider(
+                                              EvenementCall.eventLogog(
+                                                eventCurrentEvenementResponse
+                                                    .jsonBody,
+                                              )!,
+                                            ),
                                             width: MediaQuery.sizeOf(context)
                                                     .width *
                                                 0.15,

lib/horecagelegenhedenoverzicht/horecagelegenheid_event_tabel_component_copy/horecagelegenheid_event_tabel_component_copy_model.dart

@@ -8,8 +8,10 @@ import 'horecagelegenheid_event_tabel_component_copy_widget.dart'
     show HorecagelegenheidEventTabelComponentCopyWidget;
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_blurhash/flutter_blurhash.dart';
 import 'package:flutter_spinkit/flutter_spinkit.dart';
 import 'package:google_fonts/google_fonts.dart';
+import 'package:octo_image/octo_image.dart';
 import 'package:provider/provider.dart';
 
 class HorecagelegenheidEventTabelComponentCopyModel

lib/horecagelegenhedenoverzicht/horecagelegenheid_event_tabel_component_copy/horecagelegenheid_event_tabel_component_copy_widget.dart

@@ -6,8 +6,10 @@ import 'dart:ui';
 import '/index.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_blurhash/flutter_blurhash.dart';
 import 'package:flutter_spinkit/flutter_spinkit.dart';
 import 'package:google_fonts/google_fonts.dart';
+import 'package:octo_image/octo_image.dart';
 import 'package:provider/provider.dart';
 import 'horecagelegenheid_event_tabel_component_copy_model.dart';
 export 'horecagelegenheid_event_tabel_component_copy_model.dart';
@@ -324,15 +326,21 @@ class _HorecagelegenheidEventTabelComponentCopyWidgetState
                                 children: [
                                   ClipRRect(
                                     borderRadius: BorderRadius.circular(8.0),
-                                    child: CachedNetworkImage(
-                                      fadeInDuration:
-                                          Duration(milliseconds: 500),
-                                      fadeOutDuration:
-                                          Duration(milliseconds: 500),
-                                      imageUrl: getJsonField(
-                                        evenementenItem,
-                                        r'''$.logo''',
-                                      ).toString(),
+                                    child: OctoImage(
+                                      placeholderBuilder: (_) =>
+                                          SizedBox.expand(
+                                        child: Image(
+                                          image: BlurHashImage(
+                                              'L6PZfSi_.AyE_3t7t7R**0o#DgR4'),
+                                          fit: BoxFit.cover,
+                                        ),
+                                      ),
+                                      image: CachedNetworkImageProvider(
+                                        getJsonField(
+                                          evenementenItem,
+                                          r'''$.logo''',
+                                        ).toString(),
+                                      ),
                                       width: 200.0,
                                       height: 60.0,
                                       fit: BoxFit.cover,

lib/uitgaanspaginas/uitgaantabel_kaart/uitgaantabel_kaart_model.dart

@@ -8,8 +8,10 @@ import 'uitgaantabel_kaart_widget.dart' show UitgaantabelKaartWidget;
 import 'package:auto_size_text/auto_size_text.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_blurhash/flutter_blurhash.dart';
 import 'package:flutter_spinkit/flutter_spinkit.dart';
 import 'package:google_fonts/google_fonts.dart';
+import 'package:octo_image/octo_image.dart';
 import 'package:provider/provider.dart';
 
 class UitgaantabelKaartModel extends FlutterFlowModel<UitgaantabelKaartWidget> {

lib/uitgaanspaginas/uitgaantabel_kaart/uitgaantabel_kaart_widget.dart

@@ -7,8 +7,10 @@ import '/index.dart';
 import 'package:auto_size_text/auto_size_text.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_blurhash/flutter_blurhash.dart';
 import 'package:flutter_spinkit/flutter_spinkit.dart';
 import 'package:google_fonts/google_fonts.dart';
+import 'package:octo_image/octo_image.dart';
 import 'package:provider/provider.dart';
 import 'uitgaantabel_kaart_model.dart';
 export 'uitgaantabel_kaart_model.dart';
@@ -189,10 +191,17 @@ class _UitgaantabelKaartWidgetState extends State<UitgaantabelKaartWidget>
                             if (widget!.logo != null) {
                               return ClipRRect(
                                 borderRadius: BorderRadius.circular(8.0),
-                                child: CachedNetworkImage(
-                                  fadeInDuration: Duration(milliseconds: 500),
-                                  fadeOutDuration: Duration(milliseconds: 500),
-                                  imageUrl: widget!.logo!.toString(),
+                                child: OctoImage(
+                                  placeholderBuilder: (_) => SizedBox.expand(
+                                    child: Image(
+                                      image: BlurHashImage(
+                                          'L6PZfSi_.AyE_3t7t7R**0o#DgR4'),
+                                      fit: BoxFit.cover,
+                                    ),
+                                  ),
+                                  image: CachedNetworkImageProvider(
+                                    widget!.logo!.toString(),
+                                  ),
                                   fit: BoxFit.fitHeight,
                                 ),
                               );