I have code for a custom widget for Google Maps. I'm trying, by double-tapping the marker, to show a bottom sheet with a component and this component, with its texts, get the data that appears in the information balloon of each marker, that is, double-tapping would set the data to the text of the marker. component. I'm trying to turn on the options through the panel but I can't. I created a DataType and an AppState with registered data: title(string), description(string), latLng(Lat Lng) and iconPath(string). The code runs without errors and works, I just don't know how to put the information in the component texts because I don't find an option.
Dependencies:
google_maps_flutter: ^2.5.0
google_maps_flutter_web: ^0.5.2
google_maps_flutter_platform_interface: ^2.4.1
flutter_image_compress: ^1.1.0
Custom Map
Custom Code
// Automatic FlutterFlow imports
import '/backend/schema/structs/index.dart';
import '/backend/supabase/supabase.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 '/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:google_maps_flutter/google_maps_flutter.dart'
as google_maps_flutter;
import '/flutter_flow/lat_lng.dart' as latlng;
import 'dart:async';
import 'dart:typed_data';
import 'package:flutter/services.dart' show rootBundle;
import 'dart:ui' as ui;
import 'package:flutter_image_compress/flutter_image_compress.dart';
class MapSample extends StatefulWidget {
const MapSample({
Key? key,
this.width,
this.height,
this.mapData,
this.allowZoom = true,
this.showZoomControls = true,
this.showLocation = true,
this.showCompass = false,
this.showMapToolbar = false,
this.showTraffic = false,
this.centerLat = 0.0,
this.centerLng = 0.0,
this.iconSize = 24.0, // Novo parâmetro para o tamanho do ícone
}) : super(key: key);
final double? width;
final double? height;
final List<GoogleMapDataStruct>? mapData;
final bool allowZoom;
final bool showZoomControls;
final bool showLocation;
final bool showCompass;
final bool showMapToolbar;
final bool showTraffic;
final double centerLat;
final double centerLng;
final double iconSize; // Novo parâmetro para o tamanho do ícone
@override
_MapSampleState createState() => _MapSampleState();
}
class _MapSampleState extends State<MapSample> {
final Completer<google_maps_flutter.GoogleMapController> _controller =
Completer();
final Map<String, google_maps_flutter.BitmapDescriptor> _customIcons = {};
Set<google_maps_flutter.Marker> _markers = {};
late google_maps_flutter.LatLng _center;
@override
void initState() {
super.initState();
_center = google_maps_flutter.LatLng(widget.centerLat, widget.centerLng);
_loadMarkerIcons();
}
Future<Uint8List> getBytesFromAsset(String path, int width) async {
ByteData? data = await rootBundle.load(path);
if (data == null) {
throw Exception('Failed to load asset: $path');
}
ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(),
targetWidth: width);
ui.FrameInfo fi = await codec.getNextFrame();
return (await fi.image.toByteData(format: ui.ImageByteFormat.png))!
.buffer
.asUint8List();
}
Future<void> _loadMarkerIcons() async {
Set<String> uniqueIconPaths =
widget.mapData?.map((data) => data.iconPath).toSet() ?? {};
for (String path in uniqueIconPaths) {
if (path.isNotEmpty) {
google_maps_flutter.BitmapDescriptor descriptor;
if (path.contains("https")) {
// Se for uma URL, faça o download e redimensione a imagem
Uint8List? imageData = await loadNetworkImage(path);
if (imageData != null) {
descriptor =
google_maps_flutter.BitmapDescriptor.fromBytes(imageData);
} else {
descriptor = google_maps_flutter.BitmapDescriptor.defaultMarker;
}
} else {
// Se for um ativo, use o tamanho especificado
final Uint8List imageData = await getBytesFromAsset(
"assets/images/pin32x32.png", widget.iconSize.toInt());
descriptor =
google_maps_flutter.BitmapDescriptor.fromBytes(imageData);
}
_customIcons[path] = descriptor;
}
}
_updateMarkers();
}
Future<Uint8List?> loadNetworkImage(String path) async {
final ByteData? byteData = await rootBundle.load(path);
if (byteData == null) return null;
final Uint8List imageData = byteData.buffer.asUint8List();
Uint8List? resizedImageData = await FlutterImageCompress.compressWithList(
imageData,
minWidth: widget.iconSize.toInt(),
minHeight: widget.iconSize.toInt(),
quality: 100,
);
return resizedImageData;
}
void _updateMarkers() {
setState(() {
_markers = _createMarkers();
});
}
Set<google_maps_flutter.Marker> _createMarkers() {
var tmp = <google_maps_flutter.Marker>{};
widget.mapData?.forEach((mapData) {
final coordinates = mapData.latLng;
if (coordinates != null) {
final google_maps_flutter.LatLng googleMapsLatLng =
google_maps_flutter.LatLng(
coordinates.latitude, coordinates.longitude);
google_maps_flutter.BitmapDescriptor icon =
_customIcons[mapData.iconPath] ??
google_maps_flutter.BitmapDescriptor.defaultMarker;
final google_maps_flutter.Marker marker = google_maps_flutter.Marker(
markerId: google_maps_flutter.MarkerId(mapData.title),
position: googleMapsLatLng,
icon: icon,
infoWindow: google_maps_flutter.InfoWindow(
title: mapData.title, snippet: mapData.description),
);
tmp.add(marker);
}
});
return tmp;
}
void _onMapCreated(google_maps_flutter.GoogleMapController controller) {
_controller.complete(controller);
_updateMarkers();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: google_maps_flutter.GoogleMap(
onMapCreated: _onMapCreated,
zoomGesturesEnabled: widget.allowZoom,
zoomControlsEnabled: widget.showZoomControls,
myLocationEnabled: widget.showLocation,
compassEnabled: widget.showCompass,
mapToolbarEnabled: widget.showMapToolbar,
trafficEnabled: widget.showTraffic,
initialCameraPosition: google_maps_flutter.CameraPosition(
target: _center,
zoom: 11.0,
),
markers: _markers,
),
);
}
}
No
1
1 reply