Passing parameters through custom widget by ontap function

Widgets & Design
Resolved

Hey everybody.

Since I haven't found any effective way to [1] open an existing component by code and [2] to pass values through parameters into it when clicking on a marker, makes me wonder if this is possible. The custom widget code below opens a new bottomsheet with messy data similar to a json return

// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/backend/schema/structs/index.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/custom_code/actions/index.dart'; // Imports custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:collection/collection.dart';

import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart' as ltlng;

class FlutterMapWidget extends StatefulWidget {
  const FlutterMapWidget({
    super.key,
    this.width,
    this.height,
    required this.centroMapa,
    this.coordenadas,
    required this.eventos,
  });

  final double? width;
  final double? height;
  final LatLng centroMapa;
  final List<LatLng>? coordenadas;
  final List<EventosRecord>? eventos;

  @override
  State<FlutterMapWidget> createState() => _FlutterMapWidgetState();
}

class DetalhesEvento extends StatelessWidget {
  final evento;

  DetalhesEvento({required this.evento});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detalhes do Evento'),
      ),
      body: Center(
        child: Text('Detalhes do evento: $evento'),
      ),
    );
  }
}

class _FlutterMapWidgetState extends State<FlutterMapWidget> {
  List<Marker> _buildMarkers() {
    try {
      return widget.coordenadas!.asMap().entries.map((entry) {
        int index = entry.key;
        var location = entry.value;

        return Marker(
          width: 80.0,
          height: 80.0,
          point: ltlng.LatLng(location.latitude, location.longitude),
          child: GestureDetector(
            onTap: () async {
              List<EventosRecord> eventos = widget.eventos!;

              var evento = eventos.isNotEmpty ? eventos[index] : null;

              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => DetalhesEvento(evento: evento),
                ),
              );          
            },
            child: Icon(Icons.location_on, size: 40.0, color: Colors.red),
          ),
        );
      }).toList();
    } catch (e) {
      print('Erro ao construir marcadores: $e');
      return [];
    }
  }

  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      options: MapOptions(
        initialCenter: ltlng.LatLng(
            widget.centroMapa.latitude, widget.centroMapa.longitude),
        initialZoom: 9.2,
      ),
      children: [
        TileLayer(
          urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
          userAgentPackageName: 'com.example.app',
        ),
        MarkerLayer(
          markers: _buildMarkers(),
        ),
      ],
    );
  }
}

The thing is that I designed a bottomsheet to receive data through parameter which is working with google maps (as set in the attached picture), but I'm transitioning to fluttermap. Any idea will be helpful.

What have you tried so far?
  • Created a class DetalhesEvento and then used it with Navigator.push cause I couldn't find any better solution to open an existing component

Did you check FlutterFlow's Documentation for this topic?
No
2
7 replies