Bläddra i källkod

Sync FlutterFlow state (Activiteiten-tab empty-state, Toepassen-knop, HorecagelegenheidCurrent terug-knop); update TASKS.md

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
bob 1 månad sedan
förälder
incheckning
c1d4155404

+ 97 - 28
TASKS.md

@@ -100,27 +100,48 @@ voor browse-endpoints. Drupal-niveau, geen Claude-taak.
 
 ## P1 — snel na livegang
 
-**P1-1 · Eigenaar: Claude.** Loading/foutafhandeling-patroon uitrollen
-naar overige lijst-/detailpagina's. Referentiepatroon staat inmiddels
-op `HorecagelegenhedenOverzicht` (Bob, 2026-08-04, in de builder: bij
-lege/mislukte data toont elke tab nu een standaardplaatje i.p.v. te
-crashen of te blijven laden — zie `CLAUDE.md`
-Domein/architectuurcontext). **Exacte builder-stappen nog niet
-gedocumenteerd** — check bij oppakken eerst met een verse export welke
-widget/property Bob gebruikt heeft (vermoedelijk iets als "Empty List
-Widget" op de MasonryGridView, analoog aan de Carousel-fix), en pas
-daarna hetzelfde toe op Event, HorecagelegenheidCurrent, sliders.
-
-**P1-2 · Eigenaar: Claude.** Overflow op Home-pagina. Live
-gereproduceerd tijdens testen (2026-08-03): `RenderFlex overflowed by
-7338 pixels` in een `Column` zonder `Expanded`/scrollcontainer.
-`lib/uitgaanspaginas/home/home_widget.dart:316`.
-
-**P1-3 · Eigenaar: Claude.** Sliderkaartje: datumregel mist de
-Flexible-wrap. Zelfde mechanische patroon als de twee regels eronder
-die al gefixt zijn (consistentie) — bevestigd nog open.
-`p_uitgaan_slider_kaart_component_widget.dart` (Row met
-`Icons.calendar_month` + Text zonder Flexible).
+**P1-1 · Eigenaar: Claude (deels gedaan, deels geblokkeerd).**
+Loading/foutafhandeling-patroon uitrollen naar overige lijst-/
+detailpagina's. Referentiepatroon bevestigd (2026-08-04, builder): op
+`HorecagelegenhedenOverzicht` → `StaggeredView` → rechterpaneel →
+**"Empty List Widget"** → **"Show Empty List Widget"** aan → **Widget
+Type: Image → Asset "logo800px.png"**. **Op `HorecagelegenhedenOverzicht`
+zelf inmiddels op alle 5 tabs aanwezig** (geverifieerd via verse export
+2026-08-04/05, was eerder nog niet compleet op tab Activiteiten — Bob
+heeft dat zelf afgerond).
+- **Home-sliders (`HomeUitgaanSliderComponent`) bewust NIET aangeraakt**
+  — dat is exact Bob's P0-1 (Carousel → Empty List Widget). Read-only
+  gecheckt: Widget Type staat daar nog op **"Unset"**, bevestigt Bob's
+  vermoeden dat zijn klik niet aankwam.
+- **Nieuwe bevinding (mogelijk P0-ernstig):** `PUitgaanSliderComponent`
+  (het origineel waar `HomeUitgaanSliderComponent` een kopie van is,
+  gebruikt op de provincie/gemeente-gescoopte Uitgaan-pagina) heeft
+  **geen `ConditionalBuilder`-wrapper om de Carousel** — dezelfde
+  itemCount:0-RangeError-crash die P0-1 op de Home-versie fixt, kan hier
+  dus nog optreden. Widget-pad: `PUitgaanSliderComponent` → Carousel.
+- **Geblokkeerd:** de "Show Empty List Widget"-toggle op
+  `PUitgaanSliderComponent`'s Carousel viel niet te bereiken/aanklikken
+  — rechterpaneel-clipping (zie hieronder), 2 pogingen gedaan incl.
+  sidebar-collapse-poging, geen succes.
+- **Resterend, nog niet opgepakt:** Event, HorecagelegenheidCurrent.
+
+**P1-3 · Eigenaar: Bob — geblokkeerd op rechterpaneel-clipping.**
+Sliderkaartje: datumregel mist de Flexible-wrap. Bevestigd nog open
+(2026-08-04: regels 310/351 in
+`p_uitgaan_slider_kaart_component_widget.dart` hebben `Flexible` om de
+Text, regel 273-281 niet). **Fix zit in builder:** component
+`PUitgaanSliderKaartComponent` → Widget Tree → node **"Text-datum"**
+(Text-widget, kind van de Row met `Icons.calendar_month`, tussen
+"Text-title" en de horecagelegenheid-Row) → rechterpaneel → property
+**"Expansion"** → moet net als bij "Text-horecagelegenheid"/"Text-adres"
+op **Flexible** gezet worden i.p.v. None. **Geblokkeerd:** de 3
+Expansion-type-iconen (None/Expanded/Flexible) renderen net buiten het
+zichtbare/klikbare canvas rechts van het "Flex"-invoerveld — bekend
+rechterpaneel-clippingprobleem (zie `CLAUDE.md`). Geprobeerd:
+directe klik op geschatte positie, paneel-scroll, paneel-drag-resize,
+"Wrap Widget"-dialoog (geen Flexible-optie daarin, alleen structurele
+widgets) — geen succes. Kost Bob vermoedelijk seconden op zijn eigen
+scherm.
 
 **P1-4 · Eigenaar: Bob.** EstablishmentsCall crasht zonder
 categoriefilter. `horcat ??= null!;` — bevestigd nog aanwezig, regel
@@ -160,17 +181,65 @@ risico-inschatting als het CachedNetworkImage-patroon.
 uitloggen, account verwijderen). Bovenop de login/favorieten-P0-basis.
 Account verwijderen heeft mogelijk AVG-implicaties aan Drupal-kant.
 
-**P1-8 · Eigenaar: Claude, klein batchbaar in 1 sessie.**
+**P1-8 · Eigenaar: Claude — bezig (sessie Home-cluster).**
 Toegankelijkheid & navigatie, restpunten:
 - Login-pagina: 2 icon-only knoppen zonder tooltip (veld wissen +
   wachtwoord tonen/verbergen) — `login_widget.dart` (suffixIcon van
   een `TextFormField` — standaard Tooltip-wrap werkt daar niet op, zie
-  `CLAUDE.md`; bevestigd nog open).
-- Overige icon-only knoppen buiten de header van tooltip voorzien.
-- Bevestig-stap toevoegen aan de provincie/gemeente-kiezer (nu geen
-  "Toepassen"-knop of bevestiging).
-- Vaste "terug naar hoofdlijst"-snelkoppeling op detailpagina's.
-- Deep-link/query-param robuustheid checken (ongeldig/verlopen `nid`).
+  `CLAUDE.md`; bevestigd nog open, geen fix geprobeerd — vraagt een
+  andere aanpak dan Wrap Widget, bv. het hele veld i.p.v. alleen het
+  icoon wrappen).
+- ~~Overige icon-only knoppen buiten de header van tooltip
+  voorzien~~ — **gecheckt 2026-08-04: al gedekt.** Hartje op kaarten
+  en drawer-menu-items hebben al `AlignedTooltip`. De per-pagina
+  AppBar-knoppen (hamburger/terug) zijn qua functie ook "header",
+  zowel via de gedeelde `HeaderButtonsComponent` (heeft al tooltips)
+  als de losstaande inline kopieën op sommige pagina's (bv.
+  `home_widget.dart`, `event_current_widget.dart`) — buiten scope van
+  dit punt.
+- ~~Bevestig-stap toevoegen aan de provincie/gemeente-kiezer~~ —
+  **gedaan 2026-08-04.** `SelectStateDropDownComponent` → Column
+  onder de twee dropdowns → nieuwe **Button "Toepassen"** → actie
+  **Navigate To → home**. Relevant: dit scherm is niet alleen via het
+  drawer-menu bereikbaar, het is ook het **allereerste scherm na
+  inloggen** (`nav.dart:117/124`) — stond zonder deze knop zonder
+  duidelijke vervolgstap. "Replace Route"-toggle (voorkomt dat Home
+  bovenop dit scherm gestapeld wordt i.p.v. het te vervangen) kon niet
+  aangezet worden door rechterpaneel-clipping — functioneel geen
+  probleem (back-knop vanaf Home gaat dan terug naar dit scherm i.p.v.
+  waar de gebruiker vandaan kwam), maar Bob kan 'm zelf aanzetten:
+  component `SelectStateDropDownComponent` → Button "Toepassen" →
+  Actions → "Navigate To home" → **Replace Route** aanvinken.
+- ~~Vaste "terug naar hoofdlijst"-snelkoppeling op detailpagina's~~ —
+  **`HorecagelegenheidCurrent` gedaan 2026-08-04.** Nieuwe Button "Alle
+  horecagelegenheden" onderaan de pagina-Column (na `TabBar`) → actie
+  **Navigate To → HorecagelegenhedenOverzicht**, parameter `plaats` =
+  App State `gemeenteSelectId`. Plek is bewust onderaan i.p.v. in de
+  AppBar: het invoegen van een widget in de AppBar-Row (naast
+  `HeaderButtonsComponent`) faalde herhaaldelijk stil (geen foutmelding,
+  gewoon geen insertie) — zowel via de kleine inline widget-picker als
+  via de grote centrale "Insert"-modal; de kleine inline-picker op een
+  gewone body-`Column` werkte wel meteen. Builder-observatie, geen
+  bevestigde bug — als Bob de knop liever in de AppBar wil, eerst dat
+  invoegen zelf proberen.
+  **`EventCurrent` nog open** — geen eenduidige "hoofdlijst"-pagina
+  voor events (`EventWidget`-route is een orphan, zie P2-7); Bob moet
+  kiezen welke pagina hier geldt (vermoedelijk `PUitgaanPage` met de
+  huidige `plaats`) voordat dit gebouwd kan worden.
+- Deep-link/query-param robuustheid checken (ongeldig/verlopen `nid`)
+  — **grotendeels gecheckt 2026-08-04, code-niveau, geruststellend.**
+  `HorecagelegenheidCurrentWidget` en `EventCurrentWidget` gebruiken
+  consequent `?.toList() ?? []` en `valueOrDefault<...>` rond
+  `jsonBody`-velden (i.t.t. de `HorecagelegenhedenOverzicht`-lijstpagina's
+  die wél crashten, zie P1-1) — bij een ongeldige/lege `nid` toont dit
+  fallback-tekst (`'title'`, `'logo'`, letterlijke veldnaam — het
+  bekende P1-6-patroon) i.p.v. een crash. `EventCurrent` heeft zelfs al
+  een correcte `if (getJsonField(...) != null)`-guard vóór een
+  `CachedNetworkImage` (regel 621-626) — het juiste patroon uit
+  `CLAUDE.md`. **Niet getest:** het live gedrag in de emulator/app zelf
+  (alleen code gelezen, geen `flutter run` gedaan) — als iemand dit
+  ooit live wil verifiëren, `horecagelegenheidCurrent`/`eventCurrent`
+  openen met een bewust niet-bestaand `nid` in de deep-link.
 
 **P1-9 · Eigenaar: Onbepaald.** Visuele polish (los, per pagina):
 Uitgaan-pagina (typografie/contrast/spacing), Event-pagina,

+ 4 - 4
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>"; };
-		6436409B27A31CDB00820AF7 /* nl */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = nl; path = nl.lproj/InfoPlist.strings; sourceTree = "<group>"; };
-		6436409B27A31CDA00820AF7 /* en */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = en; path = en.lproj/InfoPlist.strings; sourceTree = "<group>"; };
+		6436409627A31CDC00820AF7 /* nl */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = nl; path = nl.lproj/InfoPlist.strings; sourceTree = "<group>"; };
+		6436409927A31CD900820AF7 /* 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 = (
-				6436409B27A31CDB00820AF7 /* nl */,
-				6436409B27A31CDA00820AF7 /* en */,
+				6436409627A31CDC00820AF7 /* nl */,
+				6436409927A31CD900820AF7 /* en */,
 			);
 			name = InfoPlist.strings;
 			sourceTree = "<group>";

+ 1 - 4
lib/backend/api_requests/api_calls.dart

@@ -160,10 +160,7 @@ class FavorietenAgendaCall {
         'Accept': 'application/json',
         'X-Requested-With': 'XMLHttpRequest',
       },
-      params: {
-        'session_name': sessionName,
-        'sessionid': sessionId,
-      },
+      params: {},
       returnBody: true,
       encodeBodyUtf8: false,
       decodeUtf8: false,

+ 8 - 0
lib/flutter_flow/internationalization.dart

@@ -205,6 +205,10 @@ final kTranslationsMap = <Map<String, Map<String, String>>>[
       'nl': 'Bezorgen',
       'en': 'Bezorgen',
     },
+    'ukbd1ac9': {
+      'nl': 'Alle horecagelegenheden',
+      'en': '',
+    },
     '6gfap72a': {
       'nl': 'Home',
       'en': '',
@@ -498,6 +502,10 @@ final kTranslationsMap = <Map<String, Map<String, String>>>[
       'nl': 'Option 3',
       'en': '',
     },
+    'p3ia66ku': {
+      'nl': 'Toepassen',
+      'en': '',
+    },
   },
   // drawerComponent
   {

+ 25 - 0
lib/horecagelegenhedenoverzicht/horecagelegenheden_overzicht/horecagelegenheden_overzicht_widget.dart

@@ -509,6 +509,11 @@ class _HorecagelegenhedenOverzichtWidgetState
                                             .jsonBody,
                                         r'''$''',
                                       ).toList().take(25).toList();
+                                      if (horecagelegenheden.isEmpty) {
+                                        return Image.asset(
+                                          'assets/images/logo800px.png',
+                                        );
+                                      }
                                       _model.debugGeneratorVariables[
                                               'horecagelegenheden${horecagelegenheden.length > 100 ? ' (first 100)' : ''}'] =
                                           debugSerializeParam(
@@ -693,6 +698,11 @@ class _HorecagelegenhedenOverzichtWidgetState
                                             .jsonBody,
                                         r'''$''',
                                       ).toList().take(25).toList();
+                                      if (horecagelegenheden.isEmpty) {
+                                        return Image.asset(
+                                          'assets/images/logo800px.png',
+                                        );
+                                      }
                                       _model.debugGeneratorVariables[
                                               'horecagelegenheden${horecagelegenheden.length > 100 ? ' (first 100)' : ''}'] =
                                           debugSerializeParam(
@@ -877,6 +887,11 @@ class _HorecagelegenhedenOverzichtWidgetState
                                             .jsonBody,
                                         r'''$''',
                                       ).toList().take(25).toList();
+                                      if (horecagelegenheden.isEmpty) {
+                                        return Image.asset(
+                                          'assets/images/logo800px.png',
+                                        );
+                                      }
                                       _model.debugGeneratorVariables[
                                               'horecagelegenheden${horecagelegenheden.length > 100 ? ' (first 100)' : ''}'] =
                                           debugSerializeParam(
@@ -1061,6 +1076,11 @@ class _HorecagelegenhedenOverzichtWidgetState
                                             .jsonBody,
                                         r'''$''',
                                       ).toList().take(25).toList();
+                                      if (horecagelegenheden.isEmpty) {
+                                        return Image.asset(
+                                          'assets/images/logo800px.png',
+                                        );
+                                      }
                                       _model.debugGeneratorVariables[
                                               'horecagelegenheden${horecagelegenheden.length > 100 ? ' (first 100)' : ''}'] =
                                           debugSerializeParam(
@@ -1245,6 +1265,11 @@ class _HorecagelegenhedenOverzichtWidgetState
                                             .jsonBody,
                                         r'''$''',
                                       ).toList().take(25).toList();
+                                      if (horecagelegenheden.isEmpty) {
+                                        return Image.asset(
+                                          'assets/images/logo800px.png',
+                                        );
+                                      }
                                       _model.debugGeneratorVariables[
                                               'horecagelegenheden${horecagelegenheden.length > 100 ? ' (first 100)' : ''}'] =
                                           debugSerializeParam(

+ 1 - 0
lib/horecagelegenhedenoverzicht/horecagelegenheid_current/horecagelegenheid_current_model.dart

@@ -8,6 +8,7 @@ import '/horecagelegenhedenoverzicht/horecagelegenheid_event_tabel_component_cop
 import '/shared/drawer_component/drawer_component_widget.dart';
 import 'dart:ui';
 import '/custom_code/widgets/index.dart' as custom_widgets;
+import '/index.dart';
 import 'horecagelegenheid_current_widget.dart'
     show HorecagelegenheidCurrentWidget;
 import 'package:aligned_tooltip/aligned_tooltip.dart';

+ 61 - 9
lib/horecagelegenhedenoverzicht/horecagelegenheid_current/horecagelegenheid_current_widget.dart

@@ -8,6 +8,7 @@ import '/horecagelegenhedenoverzicht/horecagelegenheid_event_tabel_component_cop
 import '/shared/drawer_component/drawer_component_widget.dart';
 import 'dart:ui';
 import '/custom_code/widgets/index.dart' as custom_widgets;
+import '/index.dart';
 import 'package:aligned_tooltip/aligned_tooltip.dart';
 import 'package:carousel_slider/carousel_slider.dart';
 import 'package:cached_network_image/cached_network_image.dart';
@@ -115,6 +116,7 @@ class _HorecagelegenheidCurrentWidgetState
     DebugFlutterFlowModelContext.maybeOf(context)
         ?.parentModelCallback
         ?.call(_model);
+    context.watch<FFAppState>();
 
     return FutureBuilder<ApiCallResponse>(
       future: EstablishmentInfoCall.call(
@@ -190,15 +192,20 @@ class _HorecagelegenheidCurrentWidgetState
                 automaticallyImplyLeading: false,
                 actions: [],
                 flexibleSpace: FlexibleSpaceBar(
-                  background: wrapWithModel(
-                    model: _model.headerButtonsComponentModel,
-                    updateCallback: () => safeSetState(() {}),
-                    child: Builder(builder: (_) {
-                      return DebugFlutterFlowModelContext(
-                        rootModel: _model.rootModel,
-                        child: HeaderButtonsComponentWidget(),
-                      );
-                    }),
+                  background: Row(
+                    mainAxisSize: MainAxisSize.max,
+                    children: [
+                      wrapWithModel(
+                        model: _model.headerButtonsComponentModel,
+                        updateCallback: () => safeSetState(() {}),
+                        child: Builder(builder: (_) {
+                          return DebugFlutterFlowModelContext(
+                            rootModel: _model.rootModel,
+                            child: HeaderButtonsComponentWidget(),
+                          );
+                        }),
+                      ),
+                    ],
                   ),
                   centerTitle: true,
                   expandedTitleScale: 1.0,
@@ -1152,6 +1159,51 @@ class _HorecagelegenheidCurrentWidgetState
                       ),
                     ),
                   ),
+                  FFButtonWidget(
+                    onPressed: () async {
+                      context.pushNamed(
+                        HorecagelegenhedenOverzichtWidget.routeName,
+                        queryParameters: {
+                          'plaats': serializeParam(
+                            FFAppState().gemeenteSelectId,
+                            ParamType.String,
+                          ),
+                        }.withoutNulls,
+                      );
+                    },
+                    text: FFLocalizations.of(context).getText(
+                      'ukbd1ac9' /* Alle horecagelegenheden */,
+                    ),
+                    options: FFButtonOptions(
+                      height: 40.0,
+                      padding:
+                          EdgeInsetsDirectional.fromSTEB(16.0, 0.0, 16.0, 0.0),
+                      iconPadding:
+                          EdgeInsetsDirectional.fromSTEB(0.0, 0.0, 0.0, 0.0),
+                      color: FlutterFlowTheme.of(context).primary,
+                      textStyle:
+                          FlutterFlowTheme.of(context).titleSmall.override(
+                                font: GoogleFonts.interTight(
+                                  fontWeight: FlutterFlowTheme.of(context)
+                                      .titleSmall
+                                      .fontWeight,
+                                  fontStyle: FlutterFlowTheme.of(context)
+                                      .titleSmall
+                                      .fontStyle,
+                                ),
+                                color: Colors.white,
+                                letterSpacing: 0.0,
+                                fontWeight: FlutterFlowTheme.of(context)
+                                    .titleSmall
+                                    .fontWeight,
+                                fontStyle: FlutterFlowTheme.of(context)
+                                    .titleSmall
+                                    .fontStyle,
+                              ),
+                      elevation: 0.0,
+                      borderRadius: BorderRadius.circular(8.0),
+                    ),
+                  ),
                 ],
               ),
             ),

+ 1 - 0
lib/selecteer_plaats/select_state_drop_down_component/select_state_drop_down_component_model.dart

@@ -8,6 +8,7 @@ import '/flutter_flow/flutter_flow_widgets.dart';
 import '/flutter_flow/form_field_controller.dart';
 import 'dart:convert';
 import 'dart:ui';
+import '/index.dart';
 import 'select_state_drop_down_component_widget.dart'
     show SelectStateDropDownComponentWidget;
 import 'package:flutter/material.dart';

+ 31 - 0
lib/selecteer_plaats/select_state_drop_down_component/select_state_drop_down_component_widget.dart

@@ -8,6 +8,7 @@ import '/flutter_flow/flutter_flow_widgets.dart';
 import '/flutter_flow/form_field_controller.dart';
 import 'dart:convert';
 import 'dart:ui';
+import '/index.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/scheduler.dart';
 import 'package:flutter_spinkit/flutter_spinkit.dart';
@@ -314,6 +315,36 @@ class _SelectStateDropDownComponentWidgetState
               isSearchable: false,
               isMultiSelect: false,
             ),
+          FFButtonWidget(
+            onPressed: () async {
+              context.pushNamed(HomeWidget.routeName);
+            },
+            text: FFLocalizations.of(context).getText(
+              'p3ia66ku' /* Toepassen */,
+            ),
+            options: FFButtonOptions(
+              height: 40.0,
+              padding: EdgeInsetsDirectional.fromSTEB(16.0, 0.0, 16.0, 0.0),
+              iconPadding: EdgeInsetsDirectional.fromSTEB(0.0, 0.0, 0.0, 0.0),
+              color: FlutterFlowTheme.of(context).primary,
+              textStyle: FlutterFlowTheme.of(context).titleSmall.override(
+                    font: GoogleFonts.interTight(
+                      fontWeight:
+                          FlutterFlowTheme.of(context).titleSmall.fontWeight,
+                      fontStyle:
+                          FlutterFlowTheme.of(context).titleSmall.fontStyle,
+                    ),
+                    color: Colors.white,
+                    letterSpacing: 0.0,
+                    fontWeight:
+                        FlutterFlowTheme.of(context).titleSmall.fontWeight,
+                    fontStyle:
+                        FlutterFlowTheme.of(context).titleSmall.fontStyle,
+                  ),
+              elevation: 0.0,
+              borderRadius: BorderRadius.circular(8.0),
+            ),
+          ),
         ],
       ),
     );

+ 100 - 85
lib/uitgaanspaginas/home/home_widget.dart

@@ -313,95 +313,110 @@ class _HomeWidgetState extends State<HomeWidget>
                       child: TabBarView(
                         controller: _model.tabBarController,
                         children: [
-                          Column(
-                            mainAxisSize: MainAxisSize.max,
-                            children: [
-                              wrapWithModel(
-                                model:
-                                    _model.homeUitgaantabelKaartComponentModel1,
-                                updateCallback: () => safeSetState(() {}),
-                                child: Builder(builder: (_) {
-                                  return DebugFlutterFlowModelContext(
-                                    rootModel: _model.rootModel,
-                                    child: HomeUitgaantabelKaartComponentWidget(
-                                      displayid: 'display_3',
-                                    ),
-                                  );
-                                }),
-                              ),
-                            ],
+                          SingleChildScrollView(
+                            child: Column(
+                              mainAxisSize: MainAxisSize.max,
+                              children: [
+                                wrapWithModel(
+                                  model: _model
+                                      .homeUitgaantabelKaartComponentModel1,
+                                  updateCallback: () => safeSetState(() {}),
+                                  child: Builder(builder: (_) {
+                                    return DebugFlutterFlowModelContext(
+                                      rootModel: _model.rootModel,
+                                      child:
+                                          HomeUitgaantabelKaartComponentWidget(
+                                        displayid: 'display_3',
+                                      ),
+                                    );
+                                  }),
+                                ),
+                              ],
+                            ),
                           ),
-                          Column(
-                            mainAxisSize: MainAxisSize.max,
-                            children: [
-                              wrapWithModel(
-                                model:
-                                    _model.homeUitgaantabelKaartComponentModel2,
-                                updateCallback: () => safeSetState(() {}),
-                                child: Builder(builder: (_) {
-                                  return DebugFlutterFlowModelContext(
-                                    rootModel: _model.rootModel,
-                                    child: HomeUitgaantabelKaartComponentWidget(
-                                      displayid: 'services_4',
-                                    ),
-                                  );
-                                }),
-                              ),
-                            ],
+                          SingleChildScrollView(
+                            child: Column(
+                              mainAxisSize: MainAxisSize.max,
+                              children: [
+                                wrapWithModel(
+                                  model: _model
+                                      .homeUitgaantabelKaartComponentModel2,
+                                  updateCallback: () => safeSetState(() {}),
+                                  child: Builder(builder: (_) {
+                                    return DebugFlutterFlowModelContext(
+                                      rootModel: _model.rootModel,
+                                      child:
+                                          HomeUitgaantabelKaartComponentWidget(
+                                        displayid: 'services_4',
+                                      ),
+                                    );
+                                  }),
+                                ),
+                              ],
+                            ),
                           ),
-                          Column(
-                            mainAxisSize: MainAxisSize.max,
-                            children: [
-                              wrapWithModel(
-                                model:
-                                    _model.homeUitgaantabelKaartComponentModel3,
-                                updateCallback: () => safeSetState(() {}),
-                                child: Builder(builder: (_) {
-                                  return DebugFlutterFlowModelContext(
-                                    rootModel: _model.rootModel,
-                                    child: HomeUitgaantabelKaartComponentWidget(
-                                      displayid: 'services_5',
-                                    ),
-                                  );
-                                }),
-                              ),
-                            ],
+                          SingleChildScrollView(
+                            child: Column(
+                              mainAxisSize: MainAxisSize.max,
+                              children: [
+                                wrapWithModel(
+                                  model: _model
+                                      .homeUitgaantabelKaartComponentModel3,
+                                  updateCallback: () => safeSetState(() {}),
+                                  child: Builder(builder: (_) {
+                                    return DebugFlutterFlowModelContext(
+                                      rootModel: _model.rootModel,
+                                      child:
+                                          HomeUitgaantabelKaartComponentWidget(
+                                        displayid: 'services_5',
+                                      ),
+                                    );
+                                  }),
+                                ),
+                              ],
+                            ),
                           ),
-                          Column(
-                            mainAxisSize: MainAxisSize.max,
-                            children: [
-                              wrapWithModel(
-                                model:
-                                    _model.homeUitgaantabelKaartComponentModel4,
-                                updateCallback: () => safeSetState(() {}),
-                                child: Builder(builder: (_) {
-                                  return DebugFlutterFlowModelContext(
-                                    rootModel: _model.rootModel,
-                                    child: HomeUitgaantabelKaartComponentWidget(
-                                      displayid: 'services_6',
-                                    ),
-                                  );
-                                }),
-                              ),
-                            ],
+                          SingleChildScrollView(
+                            child: Column(
+                              mainAxisSize: MainAxisSize.max,
+                              children: [
+                                wrapWithModel(
+                                  model: _model
+                                      .homeUitgaantabelKaartComponentModel4,
+                                  updateCallback: () => safeSetState(() {}),
+                                  child: Builder(builder: (_) {
+                                    return DebugFlutterFlowModelContext(
+                                      rootModel: _model.rootModel,
+                                      child:
+                                          HomeUitgaantabelKaartComponentWidget(
+                                        displayid: 'services_6',
+                                      ),
+                                    );
+                                  }),
+                                ),
+                              ],
+                            ),
                           ),
-                          Column(
-                            mainAxisSize: MainAxisSize.max,
-                            children: [
-                              wrapWithModel(
-                                model:
-                                    _model.homeUitgaantabelKaartComponentModel5,
-                                updateCallback: () => safeSetState(() {}),
-                                child: Builder(builder: (_) {
-                                  return DebugFlutterFlowModelContext(
-                                    rootModel: _model.rootModel,
-                                    child: HomeUitgaantabelKaartComponentWidget(
-                                      displayid: 'services_7',
-                                    ),
-                                  );
-                                }),
-                              ),
-                            ],
+                          SingleChildScrollView(
+                            child: Column(
+                              mainAxisSize: MainAxisSize.max,
+                              children: [
+                                wrapWithModel(
+                                  model: _model
+                                      .homeUitgaantabelKaartComponentModel5,
+                                  updateCallback: () => safeSetState(() {}),
+                                  child: Builder(builder: (_) {
+                                    return DebugFlutterFlowModelContext(
+                                      rootModel: _model.rootModel,
+                                      child:
+                                          HomeUitgaantabelKaartComponentWidget(
+                                        displayid: 'services_7',
+                                      ),
+                                    );
+                                  }),
+                                ),
+                              ],
+                            ),
                           ),
                         ],
                       ),