solex
 · CEO at DropDeli

Custom marker icon On map

Custom Code

Hi Greetings flutterflow builders

Please I have this code and to for live tracking and it's working as I expected but I have tried to add a custom marker and when I add it from assets it's showing on the map please help me out here is the code

What have you tried so far?

I have added the image from assets but it's not showing on the map

Please help me to achieve this here is my code

/ 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 '../../flutter_flow/flutter_flow_google_map.dart';

import 'package:flutter/rendering.dart';

import 'package:flutter/cupertino.dart';
import 'package:flutter/painting.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';

import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:flutter_polyline_points/flutter_polyline_points.dart'; // Import PolylinePoints

import 'package:google_maps_flutter/google_maps_flutter.dart'
    as google_maps; // Use alias for Google Maps LatLng

import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:flutter/services.dart'; // For rootBundle

import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:flutter_polyline_points/flutter_polyline_points.dart'; // Import PolylinePoints

import 'package:google_maps_flutter/google_maps_flutter.dart' as google_maps;

class LiveTrack extends StatefulWidget {
  const LiveTrack({
    super.key,
    this.width,
    this.height,
    this.restaurantLat,
    this.restaurantLng,
    this.riderLat,
    this.riderLng,
    this.deliveryLat,
    this.deliveryLng,
    required this.riderAssigned,
    this.pickedUp,
  });

  final double? width;
  final double? height;
  final double? restaurantLat;
  final double? restaurantLng;
  final double? riderLat;
  final double? riderLng;
  final double? deliveryLat;
  final double? deliveryLng;
  final bool riderAssigned;
  final bool? pickedUp;

  @override
  State<LiveTrack> createState() => _LiveTrackState();
}

class _LiveTrackState extends State<LiveTrack> {
  late google_maps.GoogleMapController _mapController;
  final Completer<google_maps.GoogleMapController> _controller =
      Completer<google_maps.GoogleMapController>();

  @override
  void initState() {
    super.initState();
  }

  Set<google_maps.Marker> _getMarkers() {
    Set<google_maps.Marker> markers = {};

    // Always show the delivery marker
    if (widget.deliveryLat != null && widget.deliveryLng != null) {
      markers.add(
        google_maps.Marker(
          markerId: google_maps.MarkerId('delivery'),
          position:
              google_maps.LatLng(widget.deliveryLat!, widget.deliveryLng!),
          icon: google_maps.BitmapDescriptor.defaultMarkerWithHue(
            google_maps.BitmapDescriptor.hueRed,
          ),
        ),
      );
    }

    // Show the restaurant marker based on conditions
    if (widget.restaurantLat != null &&
        widget.restaurantLng != null &&
        !(widget.pickedUp ?? false)) {
      markers.add(
        google_maps.Marker(
          markerId: google_maps.MarkerId('restaurant'),
          position:
              google_maps.LatLng(widget.restaurantLat!, widget.restaurantLng!),
          icon: google_maps.BitmapDescriptor.defaultMarkerWithHue(
            google_maps.BitmapDescriptor.hueOrange,
          ),
        ),
      );
    }

    // Show the rider marker if rider is assigned
    if (widget.riderAssigned &&
        widget.riderLat != null &&
        widget.riderLng != null) {
      markers.add(
        google_maps.Marker(
          markerId: google_maps.MarkerId('rider'),
          position: google_maps.LatLng(widget.riderLat!, widget.riderLng!),
          icon: google_maps.BitmapDescriptor.defaultMarkerWithHue(
            google_maps.BitmapDescriptor.hueBlue,
          ),
        ),
      );
    }

    return markers;
  }

  Set<google_maps.Polyline> _getPolylines() {
    Set<google_maps.Polyline> polylines = {};

    if (widget.riderAssigned &&
        widget.riderLat != null &&
        widget.riderLng != null) {
      if (widget.pickedUp ?? false) {
        // Polyline only from rider to delivery location
        if (widget.deliveryLat != null && widget.deliveryLng != null) {
          polylines.add(
            google_maps.Polyline(
              polylineId: google_maps.PolylineId('riderToDelivery'),
              points: [
                google_maps.LatLng(widget.riderLat!, widget.riderLng!),
                google_maps.LatLng(widget.deliveryLat!, widget.deliveryLng!),
              ],
              color: Colors.blue,
              width: 5,
            ),
          );
        }
      } else {
        // Polyline from rider to restaurant, and from restaurant to delivery location
        if (widget.restaurantLat != null && widget.restaurantLng != null) {
          polylines.add(
            google_maps.Polyline(
              polylineId: google_maps.PolylineId('riderToRestaurant'),
              points: [
                google_maps.LatLng(widget.riderLat!, widget.riderLng!),
                google_maps.LatLng(
                    widget.restaurantLat!, widget.restaurantLng!),
              ],
              color: Colors.blue,
              width: 5,
            ),
          );
        }
        if (widget.deliveryLat != null && widget.deliveryLng != null) {
          polylines.add(
            google_maps.Polyline(
              polylineId: google_maps.PolylineId('restaurantToDelivery'),
              points: [
                google_maps.LatLng(
                    widget.restaurantLat!, widget.restaurantLng!),
                google_maps.LatLng(widget.deliveryLat!, widget.deliveryLng!),
              ],
              color: Colors.blue,
              width: 5,
            ),
          );
        }
      }
    }

    return polylines;
  }

  void _updateCameraPosition() {
    google_maps.LatLngBounds bounds;
    final deliveryLocation =
        widget.deliveryLat != null && widget.deliveryLng != null
            ? google_maps.LatLng(widget.deliveryLat!, widget.deliveryLng!)
            : null;
    final restaurantLocation =
        widget.restaurantLat != null && widget.restaurantLng != null
            ? google_maps.LatLng(widget.restaurantLat!, widget.restaurantLng!)
            : null;
    final riderLocation = widget.riderLat != null && widget.riderLng != null
        ? google_maps.LatLng(widget.riderLat!, widget.riderLng!)
        : null;

    if (widget.riderAssigned) {
      if (widget.pickedUp ?? false) {
        // Fit camera to rider and delivery locations
        if (riderLocation != null && deliveryLocation != null) {
          bounds = google_maps.LatLngBounds(
            southwest: google_maps.LatLng(
              min(riderLocation.latitude, deliveryLocation.latitude),
              min(riderLocation.longitude, deliveryLocation.longitude),
            ),
            northeast: google_maps.LatLng(
              max(riderLocation.latitude, deliveryLocation.latitude),
              max(riderLocation.longitude, deliveryLocation.longitude),
            ),
          );
        } else if (riderLocation != null) {
          bounds = google_maps.LatLngBounds(
            southwest: riderLocation,
            northeast: riderLocation,
          );
        } else if (deliveryLocation != null) {
          bounds = google_maps.LatLngBounds(
            southwest: deliveryLocation,
            northeast: deliveryLocation,
          );
        } else {
          return;
        }
      } else {
        // Fit camera to all markers (rider, restaurant, and delivery)
        final List<google_maps.LatLng> points = [
          if (riderLocation != null) riderLocation,
          if (restaurantLocation != null) restaurantLocation,
          if (deliveryLocation != null) deliveryLocation,
        ];

        if (points.isNotEmpty) {
          final southwestLat =
              points.map((p) => p.latitude).reduce((a, b) => a < b ? a : b);
          final southwestLng =
              points.map((p) => p.longitude).reduce((a, b) => a < b ? a : b);
          final northeastLat =
              points.map((p) => p.latitude).reduce((a, b) => a > b ? a : b);
          final northeastLng =
              points.map((p) => p.longitude).reduce((a, b) => a > b ? a : b);

          bounds = google_maps.LatLngBounds(
            southwest: google_maps.LatLng(southwestLat, southwestLng),
            northeast: google_maps.LatLng(northeastLat, northeastLng),
          );
        } else {
          return;
        }
      }
    } else {
      // Fit camera to restaurant and delivery locations
      final List<google_maps.LatLng> points = [
        if (restaurantLocation != null) restaurantLocation,
        if (deliveryLocation != null) deliveryLocation,
      ];

      if (points.isNotEmpty) {
        final southwestLat =
            points.map((p) => p.latitude).reduce((a, b) => a < b ? a : b);
        final southwestLng =
            points.map((p) => p.longitude).reduce((a, b) => a < b ? a : b);
        final northeastLat =
            points.map((p) => p.latitude).reduce((a, b) => a > b ? a : b);
        final northeastLng =
            points.map((p) => p.longitude).reduce((a, b) => a > b ? a : b);

        bounds = google_maps.LatLngBounds(
          southwest: google_maps.LatLng(southwestLat, southwestLng),
          northeast: google_maps.LatLng(northeastLat, northeastLng),
        );
      } else {
        return;
      }
    }

    _mapController.animateCamera(
      google_maps.CameraUpdate.newLatLngBounds(bounds, 50),
    );
  }

  @override
  Widget build(BuildContext context) {
    return google_maps.GoogleMap(
      onMapCreated: (controller) {
        _controller.complete(controller);
        _mapController = controller;
        _updateCameraPosition();
      },
      markers: _getMarkers(),
      polylines: _getPolylines(),
      initialCameraPosition: google_maps.CameraPosition(
        target: google_maps.LatLng(
          widget.riderLat ?? widget.restaurantLat ?? widget.deliveryLat ?? 0,
          widget.riderLng ?? widget.restaurantLng ?? widget.deliveryLng ?? 0,
        ),
        zoom: 14,
      ),
    );
  }
}
Did you check FlutterFlow's Documentation for this topic?
No
1
1 reply