Taak 89: logo boven de gemeentenaam in de gedeelde header

Bob: "bij groot scherm moet in de header de foto boven de plaats."

HeaderButtonsComponent: het logo en de gemeentenaam zitten nu samen in een
Column (mainAxisSize min) binnen de bestaande Wrap, in plaats van als twee
losse kinderen naast elkaar. De hamburger en de terugknop blijven links
staan, de VerbindingsBanner blijft ongemoeid.

Geen extra headerhoogte nodig: de Wrap-regelhoogte wordt al bepaald door de
knoppen (40/50 dp) en de gestapelde kolom is ~42 dp. Geverifieerd met een
profile-build op telefoonformaat (Home zonder terugknop en een detailpagina
mét terugknop) en op tabletformaat 1280x800 dp — geen overflow, geen
afkapping. dart analyze: 0 errors.

HeaderButtonsComponentCopy is de vangnet-kopie die Bob vooraf vroeg; die
mag hij weghalen zodra hij tevreden is (zie taak 89a in TASKS.md).

Alleen deze vier bestanden zijn gestaged: er werkt gelijktijdig een tweede
sessie in dezelfde map (P2-45), dus de rest van de export blijft ongecommit.

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

lib/components/header_buttons_component_copy_model.dart

@@ -0,0 +1,56 @@
+import '/flutter_flow/flutter_flow_icon_button.dart';
+import '/flutter_flow/flutter_flow_theme.dart';
+import '/flutter_flow/flutter_flow_util.dart';
+import '/flutter_flow/flutter_flow_widgets.dart';
+import '/custom_code/widgets/index.dart' as custom_widgets;
+import '/index.dart';
+import 'header_buttons_component_copy_widget.dart'
+    show HeaderButtonsComponentCopyWidget;
+import 'package:aligned_tooltip/aligned_tooltip.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_spinkit/flutter_spinkit.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:provider/provider.dart';
+
+class HeaderButtonsComponentCopyModel
+    extends FlutterFlowModel<HeaderButtonsComponentCopyWidget> {
+  final Map<String, DebugDataField> debugGeneratorVariables = {};
+  final Map<String, DebugDataField> debugBackendQueries = {};
+  final Map<String, FlutterFlowModel> widgetBuilderComponents = {};
+  @override
+  void initState(BuildContext context) {}
+
+  @override
+  void dispose() {}
+
+  @override
+  WidgetClassDebugData toWidgetClassDebugData() => WidgetClassDebugData(
+        widgetParameters: {
+          'showBackButton': debugSerializeParam(
+            widget?.showBackButton,
+            ParamType.bool,
+            link:
+                'https://app.flutterflow.io/project/uitgaanskrant-1qhvtd?tab=uiBuilder&page=HeaderButtonsComponentCopy',
+            searchReference:
+                'reference=SigKGAoOc2hvd0JhY2tCdXR0b24SBnloN3loNyoGEgR0cnVlcgQIBSABUABaDnNob3dCYWNrQnV0dG9u',
+            name: 'bool',
+            nullable: false,
+          )
+        }.withoutNulls.entries,
+        generatorVariables: debugGeneratorVariables.entries,
+        backendQueries: debugBackendQueries.entries,
+        componentStates: {
+          ...widgetBuilderComponents.map(
+            (key, value) => MapEntry(
+              key,
+              value.toWidgetClassDebugData(),
+            ),
+          ),
+        }.withoutNulls.entries,
+        link:
+            'https://app.flutterflow.io/project/uitgaanskrant-1qhvtd/tab=uiBuilder&page=HeaderButtonsComponentCopy',
+        searchReference:
+            'reference=OhpIZWFkZXJCdXR0b25zQ29tcG9uZW50Q29weVAAWhpIZWFkZXJCdXR0b25zQ29tcG9uZW50Q29weQ==',
+        widgetClassName: 'HeaderButtonsComponentCopy',
+      );
+}

lib/components/header_buttons_component_copy_widget.dart

@@ -0,0 +1,269 @@
+import '/flutter_flow/flutter_flow_icon_button.dart';
+import '/flutter_flow/flutter_flow_theme.dart';
+import '/flutter_flow/flutter_flow_util.dart';
+import '/flutter_flow/flutter_flow_widgets.dart';
+import '/custom_code/widgets/index.dart' as custom_widgets;
+import '/index.dart';
+import 'package:aligned_tooltip/aligned_tooltip.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_spinkit/flutter_spinkit.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:provider/provider.dart';
+import 'header_buttons_component_copy_model.dart';
+export 'header_buttons_component_copy_model.dart';
+
+/// Standaard header-knoppen (drawer + terug) voor herbruik op alle pagina's
+class HeaderButtonsComponentCopyWidget extends StatefulWidget {
+  const HeaderButtonsComponentCopyWidget({
+    super.key,
+    bool? showBackButton,
+  }) : this.showBackButton = showBackButton ?? true;
+
+  final bool showBackButton;
+
+  @override
+  State<HeaderButtonsComponentCopyWidget> createState() =>
+      _HeaderButtonsComponentCopyWidgetState();
+}
+
+class _HeaderButtonsComponentCopyWidgetState
+    extends State<HeaderButtonsComponentCopyWidget> with RouteAware {
+  late HeaderButtonsComponentCopyModel _model;
+
+  @override
+  void setState(VoidCallback callback) {
+    super.setState(callback);
+    _model.onUpdate();
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _model = createModel(context, () => HeaderButtonsComponentCopyModel());
+  }
+
+  @override
+  void dispose() {
+    routeObserver.unsubscribe(this);
+
+    _model.maybeDispose();
+
+    super.dispose();
+  }
+
+  @override
+  void didUpdateWidget(HeaderButtonsComponentCopyWidget oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    _model.widget = widget;
+  }
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    final route = DebugModalRoute.of(context);
+    if (route != null) {
+      routeObserver.subscribe(this, route);
+    }
+    debugLogGlobalProperty(context);
+  }
+
+  @override
+  void didPopNext() {
+    if (mounted && DebugFlutterFlowModelContext.maybeOf(context) == null) {
+      setState(() => _model.isRouteVisible = true);
+      debugLogWidgetClass(_model);
+    }
+  }
+
+  @override
+  void didPush() {
+    if (mounted && DebugFlutterFlowModelContext.maybeOf(context) == null) {
+      setState(() => _model.isRouteVisible = true);
+      debugLogWidgetClass(_model);
+    }
+  }
+
+  @override
+  void didPop() {
+    _model.isRouteVisible = false;
+  }
+
+  @override
+  void didPushNext() {
+    _model.isRouteVisible = false;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    DebugFlutterFlowModelContext.maybeOf(context)
+        ?.parentModelCallback
+        ?.call(_model);
+    context.watch<FFAppState>();
+
+    return Align(
+      alignment: AlignmentDirectional(0.0, 0.0),
+      child: Padding(
+        padding: EdgeInsetsDirectional.fromSTEB(0.0, 28.0, 0.0, 0.0),
+        child: Wrap(
+          spacing: 0.0,
+          runSpacing: 0.0,
+          alignment: WrapAlignment.start,
+          crossAxisAlignment: WrapCrossAlignment.center,
+          direction: Axis.horizontal,
+          runAlignment: WrapAlignment.start,
+          verticalDirection: VerticalDirection.down,
+          clipBehavior: Clip.none,
+          children: [
+            AlignedTooltip(
+              content: Padding(
+                padding: EdgeInsets.all(4.0),
+                child: Text(
+                  FFLocalizations.of(context).getText(
+                    '3ni1ywlp' /* Menu openen */,
+                  ),
+                  style: FlutterFlowTheme.of(context).bodyLarge.override(
+                        font: GoogleFonts.roboto(
+                          fontWeight:
+                              FlutterFlowTheme.of(context).bodyLarge.fontWeight,
+                          fontStyle:
+                              FlutterFlowTheme.of(context).bodyLarge.fontStyle,
+                        ),
+                        letterSpacing: 0.0,
+                        fontWeight:
+                            FlutterFlowTheme.of(context).bodyLarge.fontWeight,
+                        fontStyle:
+                            FlutterFlowTheme.of(context).bodyLarge.fontStyle,
+                      ),
+                ),
+              ),
+              offset: 4.0,
+              preferredDirection: AxisDirection.down,
+              borderRadius: BorderRadius.circular(8.0),
+              backgroundColor: FlutterFlowTheme.of(context).secondaryBackground,
+              elevation: 4.0,
+              tailBaseWidth: 24.0,
+              tailLength: 12.0,
+              waitDuration: Duration(milliseconds: 100),
+              showDuration: Duration(milliseconds: 1500),
+              triggerMode: TooltipTriggerMode.tap,
+              child: FlutterFlowIconButton(
+                borderRadius: 8.0,
+                buttonSize: 40.0,
+                fillColor: FlutterFlowTheme.of(context).secondary,
+                icon: Icon(
+                  Icons.dehaze_outlined,
+                  color: FlutterFlowTheme.of(context).info,
+                  size: 24.0,
+                ),
+                onPressed: () async {
+                  Scaffold.of(context).openDrawer();
+                },
+              ),
+            ),
+            if (widget!.showBackButton == true)
+              AlignedTooltip(
+                content: Padding(
+                  padding: EdgeInsets.all(4.0),
+                  child: Text(
+                    FFLocalizations.of(context).getText(
+                      'e8282r4h' /* Terug */,
+                    ),
+                    style: FlutterFlowTheme.of(context).bodyLarge.override(
+                          font: GoogleFonts.roboto(
+                            fontWeight: FlutterFlowTheme.of(context)
+                                .bodyLarge
+                                .fontWeight,
+                            fontStyle: FlutterFlowTheme.of(context)
+                                .bodyLarge
+                                .fontStyle,
+                          ),
+                          letterSpacing: 0.0,
+                          fontWeight:
+                              FlutterFlowTheme.of(context).bodyLarge.fontWeight,
+                          fontStyle:
+                              FlutterFlowTheme.of(context).bodyLarge.fontStyle,
+                        ),
+                  ),
+                ),
+                offset: 4.0,
+                preferredDirection: AxisDirection.down,
+                borderRadius: BorderRadius.circular(8.0),
+                backgroundColor:
+                    FlutterFlowTheme.of(context).secondaryBackground,
+                elevation: 4.0,
+                tailBaseWidth: 24.0,
+                tailLength: 12.0,
+                waitDuration: Duration(milliseconds: 100),
+                showDuration: Duration(milliseconds: 1500),
+                triggerMode: TooltipTriggerMode.tap,
+                child: Padding(
+                  padding: EdgeInsetsDirectional.fromSTEB(4.0, 0.0, 0.0, 0.0),
+                  child: FlutterFlowIconButton(
+                    borderColor: Color(0x00FF0000),
+                    borderRadius: 8.0,
+                    borderWidth: 1.0,
+                    buttonSize: 50.0,
+                    fillColor: FlutterFlowTheme.of(context).secondary,
+                    icon: Icon(
+                      Icons.arrow_back_outlined,
+                      color: Colors.white,
+                      size: 30.0,
+                    ),
+                    onPressed: () async {
+                      context.pop();
+                    },
+                  ),
+                ),
+              ),
+            ClipRRect(
+              borderRadius: BorderRadius.circular(8.0),
+              child: Image.asset(
+                'assets/images/logo800px.png',
+                width: 150.0,
+                height: 22.0,
+                fit: BoxFit.contain,
+              ),
+            ),
+            InkWell(
+              splashColor: Colors.transparent,
+              focusColor: Colors.transparent,
+              hoverColor: Colors.transparent,
+              highlightColor: Colors.transparent,
+              onTap: () async {
+                context.pushNamed(SelectprovinciegemeenteWidget.routeName);
+              },
+              child: Text(
+                valueOrDefault<String>(
+                  FFAppState().gemeenteSelectNaam,
+                  'Kies je gemeente',
+                ),
+                style: FlutterFlowTheme.of(context).bodyMedium.override(
+                      font: GoogleFonts.roboto(
+                        fontWeight:
+                            FlutterFlowTheme.of(context).bodyMedium.fontWeight,
+                        fontStyle:
+                            FlutterFlowTheme.of(context).bodyMedium.fontStyle,
+                      ),
+                      color: FlutterFlowTheme.of(context).secondary,
+                      letterSpacing: 0.0,
+                      fontWeight:
+                          FlutterFlowTheme.of(context).bodyMedium.fontWeight,
+                      fontStyle:
+                          FlutterFlowTheme.of(context).bodyMedium.fontStyle,
+                    ),
+              ),
+            ),
+            Container(
+              width: 2.0,
+              height: 2.0,
+              child: custom_widgets.VerbindingsBanner(
+                width: 2.0,
+                height: 2.0,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/components/header_buttons_component_model.dart

@@ -2,6 +2,7 @@ import '/flutter_flow/flutter_flow_icon_button.dart';
 import '/flutter_flow/flutter_flow_theme.dart';
 import '/flutter_flow/flutter_flow_util.dart';
 import '/flutter_flow/flutter_flow_widgets.dart';
+import 'dart:ui';
 import '/custom_code/widgets/index.dart' as custom_widgets;
 import '/index.dart';
 import 'header_buttons_component_widget.dart' show HeaderButtonsComponentWidget;

lib/components/header_buttons_component_widget.dart

@@ -2,6 +2,7 @@ import '/flutter_flow/flutter_flow_icon_button.dart';
 import '/flutter_flow/flutter_flow_theme.dart';
 import '/flutter_flow/flutter_flow_util.dart';
 import '/flutter_flow/flutter_flow_widgets.dart';
+import 'dart:ui';
 import '/custom_code/widgets/index.dart' as custom_widgets;
 import '/index.dart';
 import 'package:aligned_tooltip/aligned_tooltip.dart';
@@ -215,43 +216,51 @@ class _HeaderButtonsComponentWidgetState
                   ),
                 ),
               ),
-            ClipRRect(
-              borderRadius: BorderRadius.circular(8.0),
-              child: Image.asset(
-                'assets/images/logo800px.png',
-                width: 150.0,
-                height: 22.0,
-                fit: BoxFit.contain,
-              ),
-            ),
-            InkWell(
-              splashColor: Colors.transparent,
-              focusColor: Colors.transparent,
-              hoverColor: Colors.transparent,
-              highlightColor: Colors.transparent,
-              onTap: () async {
-                context.pushNamed(SelectprovinciegemeenteWidget.routeName);
-              },
-              child: Text(
-                valueOrDefault<String>(
-                  FFAppState().gemeenteSelectNaam,
-                  'Kies je gemeente',
+            Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                ClipRRect(
+                  borderRadius: BorderRadius.circular(8.0),
+                  child: Image.asset(
+                    'assets/images/logo800px.png',
+                    width: 150.0,
+                    height: 22.0,
+                    fit: BoxFit.contain,
+                  ),
                 ),
-                style: FlutterFlowTheme.of(context).bodyMedium.override(
-                      font: GoogleFonts.roboto(
-                        fontWeight:
-                            FlutterFlowTheme.of(context).bodyMedium.fontWeight,
-                        fontStyle:
-                            FlutterFlowTheme.of(context).bodyMedium.fontStyle,
-                      ),
-                      color: FlutterFlowTheme.of(context).secondary,
-                      letterSpacing: 0.0,
-                      fontWeight:
-                          FlutterFlowTheme.of(context).bodyMedium.fontWeight,
-                      fontStyle:
-                          FlutterFlowTheme.of(context).bodyMedium.fontStyle,
+                InkWell(
+                  splashColor: Colors.transparent,
+                  focusColor: Colors.transparent,
+                  hoverColor: Colors.transparent,
+                  highlightColor: Colors.transparent,
+                  onTap: () async {
+                    context.pushNamed(SelectprovinciegemeenteWidget.routeName);
+                  },
+                  child: Text(
+                    valueOrDefault<String>(
+                      FFAppState().gemeenteSelectNaam,
+                      'Kies je gemeente',
                     ),
-              ),
+                    style: FlutterFlowTheme.of(context).bodyMedium.override(
+                          font: GoogleFonts.roboto(
+                            fontWeight: FlutterFlowTheme.of(context)
+                                .bodyMedium
+                                .fontWeight,
+                            fontStyle: FlutterFlowTheme.of(context)
+                                .bodyMedium
+                                .fontStyle,
+                          ),
+                          color: FlutterFlowTheme.of(context).secondary,
+                          letterSpacing: 0.0,
+                          fontWeight: FlutterFlowTheme.of(context)
+                              .bodyMedium
+                              .fontWeight,
+                          fontStyle:
+                              FlutterFlowTheme.of(context).bodyMedium.fontStyle,
+                        ),
+                  ),
+                ),
+              ],
             ),
             Container(
               width: 2.0,