Can someone guide me in developing a custom widget in FF for Google Maps with a navigation feature? This would be a disruptor.
Google Maps Custom Widget for Route Navigation (Navigation SDK)
Widgets & Design
I tried to develop a custom widget but could not compile it correctly in FF..
// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/backend/schema/structs/index.dart';
import '/backend/schema/enums/enums.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:google_maps_flutter/google_maps_flutter.dart' as gmaps;
import 'package:flutter_polyline_points/flutter_polyline_points.dart';
import 'package:geolocator/geolocator.dart';
class GoogleMapNavigation extends StatefulWidget {
const GoogleMapNavigation({
super.key,
this.width,
this.height,
required this.currentLocation,
required this.destination,
});
final double? width;
final double? height;
final gmaps.LatLng currentLocation;
final gmaps.LatLng destination;
@override
State<GoogleMapNavigation> createState() => _GoogleMapNavigationState();
}
class _GoogleMapNavigationState extends State<GoogleMapNavigation> {
late gmaps.GoogleMapController mapController;
List<gmaps.LatLng> polylineCoordinates = [];
List<gmaps.LatLng> lapsedCoordinates = [];
late PolylinePoints polylinePoints;
Map<gmaps.MarkerId, gmaps.Marker> markers = {};
Map<gmaps.PolylineId, gmaps.Polyline> polylines = {};
@override
void initState() {
super.initState();
polylinePoints = PolylinePoints();
_getPolyline();
_startNavigation();
}
void _onMapCreated(gmaps.GoogleMapController controller) async {
mapController = controller;
}
void _addMarker(
gmaps.LatLng position, String id, gmaps.BitmapDescriptor descriptor) {
gmaps.MarkerId markerId = gmaps.MarkerId(id);
gmaps.Marker marker = gmaps.Marker(
markerId: markerId,
icon: descriptor,
position: position,
);
markers[markerId] = marker;
}
void _addPolyLine() {
gmaps.PolylineId id = gmaps.PolylineId("poly");
gmaps.Polyline polyline = gmaps.Polyline(
polylineId: id,
color: Colors.red,
points: polylineCoordinates,
);
polylines[id] = polyline;
setState(() {});
}
void _getPolyline() async {
PolylineRequest request = PolylineRequest(
origin: PointLatLng(
widget.currentLocation.latitude, widget.currentLocation.longitude),
destination: PointLatLng(
widget.destination.latitude, widget.destination.longitude),
mode: TravelMode.driving,
wayPoints: [
PolylineWayPoint(location: "Sabo, Yaba Lagos Nigeria")
], // Add waypoints if needed
);
PolylineResult result = await PolylinePoints().getRouteBetweenCoordinates(
googleApiKey: 'YOUR_GOOGLE_MAPS_API_KEY',
request: request,
);
if (result.points.isNotEmpty) {
result.points.forEach((PointLatLng point) {
polylineCoordinates.add(gmaps.LatLng(point.latitude, point.longitude));
});
_addPolyLine();
}
}
void _startNavigation() async {
Geolocator.getPositionStream().listen((Position position) {
gmaps.LatLng newLocation =
gmaps.LatLng(position.latitude, position.longitude);
_updateLapsedRoute(newLocation);
});
}
void _updateLapsedRoute(gmaps.LatLng newLocation) {
lapsedCoordinates.add(newLocation);
if (polylineCoordinates.isNotEmpty) {
polylineCoordinates.removeAt(0);
}
setState(() {});
}
@override
Widget build(BuildContext context) {
return Container(
width: widget.width,
height: widget.height,
child: gmaps.GoogleMap(
initialCameraPosition: gmaps.CameraPosition(
target: widget.currentLocation,
zoom: 14.0,
),
onMapCreated: _onMapCreated,
polylines: Set<gmaps.Polyline>.of(polylines.values),
markers: Set<gmaps.Marker>.of(markers.values),
),
);
}
}
Yes
1