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.