Google Maps Custom Widget for Route Navigation (Navigation SDK)

Widgets & Design

Can someone guide me in developing a custom widget in FF for Google Maps with a navigation feature? This would be a disruptor.

What have you tried so far?

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),
      ),
    );
  }
}
Did you check FlutterFlow's Documentation for this topic?
Yes
1