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
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
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,
),
);
}
}