Custom Map

Custom Code

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

What have you tried so far?
// 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,
      ),
    );
  }
}
Did you check FlutterFlow's Documentation for this topic?
No
1
1 reply