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 'package:aligned_tooltip/aligned_tooltip.dart'; import 'package:cached_network_image/cached_network_image.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 'horecagelegenheidoverzicht_kaart_model.dart'; export 'horecagelegenheidoverzicht_kaart_model.dart'; /// Create a component with a card overview of cards with the following data; /// { /// "nid": "75618", /// "titel": "Hof van Cartesius", /// "adres": "Vlampijpstraat 84-94\n", /// "plaats": "Utrecht (stad)", /// "logo": /// "https://uitgaanskrant.com/sites/uitgaanskrant.com/files/car.jpg", /// "categorie": [ /// "Ondernemen", /// "Zaalverhuur" /// ] /// }, /// i retrieve it with an api call named; Establishments /// /// The cards have a logo on the left and the details on the rigth of the /// card. /// /// Only show max 3 categorie items. Put points behind the last to expand all /// the categories. /// The categories are shown as buttons (containers) on the logo picture. class HorecagelegenheidoverzichtKaartWidget extends StatefulWidget { const HorecagelegenheidoverzichtKaartWidget({ super.key, this.titel, this.logo, this.nid, this.adres, this.plaats, this.categorie, }); final String? titel; final String? logo; final String? nid; final String? adres; final String? plaats; final List? categorie; @override State createState() => _HorecagelegenheidoverzichtKaartWidgetState(); } class _HorecagelegenheidoverzichtKaartWidgetState extends State with RouteAware { late HorecagelegenheidoverzichtKaartModel _model; @override void setState(VoidCallback callback) { super.setState(callback); _model.onUpdate(); } @override void initState() { super.initState(); _model = createModel(context, () => HorecagelegenheidoverzichtKaartModel()); } @override void dispose() { routeObserver.unsubscribe(this); _model.maybeDispose(); super.dispose(); } @override void didUpdateWidget(HorecagelegenheidoverzichtKaartWidget 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); return Padding( padding: EdgeInsetsDirectional.fromSTEB(16.0, 16.0, 16.0, 16.0), child: Container( decoration: BoxDecoration( color: FlutterFlowTheme.of(context).secondaryBackground, boxShadow: [ BoxShadow( blurRadius: 4.0, color: Color(0x33000000), offset: Offset( 0.0, 2.0, ), spreadRadius: 0.0, ) ], borderRadius: BorderRadius.circular(12.0), ), child: Padding( padding: EdgeInsets.all(12.0), child: Row( mainAxisSize: MainAxisSize.max, children: [ Flexible( child: Align( alignment: AlignmentDirectional(-1.0, 1.0), child: Stack( alignment: AlignmentDirectional(-1.0, 1.0), children: [ Builder( builder: (context) { if (widget!.logo != '') { return ClipRRect( borderRadius: BorderRadius.circular(8.0), child: CachedNetworkImage( fadeInDuration: Duration(milliseconds: 0), fadeOutDuration: Duration(milliseconds: 0), imageUrl: widget!.logo!, fit: BoxFit.cover, ), ); } else { return Icon( Icons.image_not_supported, color: FlutterFlowTheme.of(context).primaryText, size: 24.0, ); } }, ), Align( alignment: AlignmentDirectional(-1.0, 1.0), child: Padding( padding: EdgeInsetsDirectional.fromSTEB( 8.0, 0.0, 8.0, 0.0), child: Builder( builder: (context) { final categorie = (widget!.categorie?.toList() ?? []) .take(3) .toList(); _model.debugGeneratorVariables[ 'categorie${categorie.length > 100 ? ' (first 100)' : ''}'] = debugSerializeParam( categorie.take(100), ParamType.String, isList: true, link: 'https://app.flutterflow.io/project/uitgaanskrant-1qhvtd?tab=uiBuilder&page=HorecagelegenheidoverzichtKaart', name: 'String', nullable: false, ); debugLogWidgetClass(_model); return Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.start, children: List.generate(categorie.length, (categorieIndex) { final categorieItem = categorie[categorieIndex]; return Align( alignment: AlignmentDirectional(-1.0, 1.0), child: Container( decoration: BoxDecoration(), alignment: AlignmentDirectional(-1.0, 1.0), child: Padding( padding: EdgeInsetsDirectional.fromSTEB( 6.0, 0.0, 6.0, 0.0), child: Container( decoration: BoxDecoration( color: Color(0xFF9A141D), borderRadius: BorderRadius.circular(12.0), ), child: Padding( padding: EdgeInsets.all(8.0), child: Text( categorieItem, style: FlutterFlowTheme.of(context) .labelSmall .override( font: GoogleFonts.inter( fontWeight: FlutterFlowTheme.of( context) .labelSmall .fontWeight, fontStyle: FlutterFlowTheme.of( context) .labelSmall .fontStyle, ), color: Colors.white, fontSize: 10.0, letterSpacing: 0.0, fontWeight: FlutterFlowTheme.of( context) .labelSmall .fontWeight, fontStyle: FlutterFlowTheme.of( context) .labelSmall .fontStyle, ), ), ), ), ), ), ); }).divide(SizedBox(height: 4.0)), ); }, ), ), ), Align( alignment: AlignmentDirectional(1.0, -1.0), child: AlignedTooltip( content: Padding( padding: EdgeInsets.all(4.0), child: Text( FFLocalizations.of(context).getText( 'ujd0p09x' /* MessageFavoriet... */, ), style: FlutterFlowTheme.of(context) .bodyLarge .override( font: GoogleFonts.inter( 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: 32.0, fillColor: Colors.white, icon: Icon( Icons.favorite_border, color: Color(0xFFB50808), size: 24.0, ), onPressed: () { print('IconButtonFavoriet pressed ...'); }, ), ), ), ], ), ), ), Expanded( child: Container( width: () { if (MediaQuery.sizeOf(context).width < kBreakpointSmall) { return 200.0; } else if (MediaQuery.sizeOf(context).width < kBreakpointMedium) { return 250.0; } else if (MediaQuery.sizeOf(context).width < kBreakpointLarge) { return 300.0; } else { return 350.0; } }(), decoration: BoxDecoration(), child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( valueOrDefault( widget!.titel, 'titel', ), maxLines: 2, style: FlutterFlowTheme.of(context).titleMedium.override( font: GoogleFonts.interTight( fontWeight: FontWeight.w600, fontStyle: FlutterFlowTheme.of(context) .titleMedium .fontStyle, ), letterSpacing: 0.0, fontWeight: FontWeight.w600, fontStyle: FlutterFlowTheme.of(context) .titleMedium .fontStyle, ), ), Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( valueOrDefault( widget!.adres, 'adres', ), style: FlutterFlowTheme.of(context) .bodyMedium .override( font: GoogleFonts.inter( fontWeight: FlutterFlowTheme.of(context) .bodyMedium .fontWeight, fontStyle: FlutterFlowTheme.of(context) .bodyMedium .fontStyle, ), color: FlutterFlowTheme.of(context) .secondaryText, letterSpacing: 0.0, fontWeight: FlutterFlowTheme.of(context) .bodyMedium .fontWeight, fontStyle: FlutterFlowTheme.of(context) .bodyMedium .fontStyle, ), ), Text( valueOrDefault( widget!.plaats, 'plaats', ), style: FlutterFlowTheme.of(context) .bodyMedium .override( font: GoogleFonts.inter( fontWeight: FlutterFlowTheme.of(context) .bodyMedium .fontWeight, fontStyle: FlutterFlowTheme.of(context) .bodyMedium .fontStyle, ), color: FlutterFlowTheme.of(context) .secondaryText, letterSpacing: 0.0, fontWeight: FlutterFlowTheme.of(context) .bodyMedium .fontWeight, fontStyle: FlutterFlowTheme.of(context) .bodyMedium .fontStyle, ), ), ].divide(SizedBox(height: 4.0)), ), ].divide(SizedBox(height: 8.0)), ), ), ), ].divide(SizedBox(width: 16.0)), ), ), ), ); } }