mapbox_polyline_points 0.0.6

A Flutter package that allow you to access mapbox direction api into google map.

mapbox_polyline_points

A flutter plugin that allow you to user mapbox direction api into google map

Getting Started

This package contains List of List coordinates that allow you to more that one routes

Usage

To use this package, add mapbox_polyline_points as a dependency in your pubspec.yaml file.

Import the package

import 'package:mapbox_polyline_points/mapbox_polyline_points.dart';

method

Get the list of points by Geo-coordinate, this return an instance of MapboxPolylineResult, which contains the status of the api, the errorMessage, and the list of decoded points.

MapboxPolylinePoints mapboxPolylinePoints = MapboxPolylinePoints();
MapboxPolylineResult result = await mapboxPolylinePoints.getRouteBetweenCoordinates(mapboxAPiKey,
        _originLatitude, _originLongitude, _destLatitude, _destLongitude);
print(result.points);

example

import 'dart:convert';
import 'package:barbar_saloon/common/colors.dart';
import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:mapbox_polyline_points/mapbox_polyline_points.dart';

const LatLng _currentPosition = LatLng(28.6817149, 77.0534036);
const LatLng _currentPosition1 = LatLng(28.6277039, 77.1424405);
const LatLng _currentPosition2 = LatLng(40.698432, -73.924038);
const LatLng _currentPosition3 = LatLng(28.6730915, 77.0384241);
const LatLng _currentPosition4 = LatLng(28.6730915, 77.0384241);

class MapScreen extends StatefulWidget {
  static const String routerName = "/map_screen";
  const MapScreen({super.key});
  @override
  State<MapScreen> createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  List<Marker>? _markers = [];
  bool? _serviceEnabled;
  late Position _locationData;
  LatLng? _center;
  List<List<LatLng>> polylineCoordinates = [];
  GoogleMapController? mapController;
   Map<PolylineId, Polyline> polylines = {};
  MapboxPolylinePoints mapboxpolylinePoints = MapboxPolylinePoints();
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _determinePosition();
  }


  void _determinePosition() async {
  bool serviceEnabled;
  LocationPermission permission;

  serviceEnabled = await Geolocator.isLocationServiceEnabled();
  if (!serviceEnabled) {
    return Future.error('Location services are disabled.');
  }

  permission = await Geolocator.checkPermission();
  if (permission == LocationPermission.denied) {
    permission = await Geolocator.requestPermission();
    if (permission == LocationPermission.denied) {
      return Future.error('Location permissions are denied');
    }
  }
  
  if (permission == LocationPermission.deniedForever) {
    return Future.error(
      'Location permissions are permanently denied, we cannot request permissions.');
  } 

   _locationData = await Geolocator.getCurrentPosition();
   _getPolyline();
   setState(() {
     _center = LatLng(_locationData.latitude, _locationData.longitude);
   });
}
_addPolyLine() {
    PolylineId id = PolylineId("poly");
    Polyline polyline = Polyline(
        polylineId: id,width: 5, color: Colors.greenAccent, points: polylineCoordinates[0]);
    polylines[id] = polyline;
    setState(() {});
  }
 void _getPolyline() async {
    MapboxPolylineResult result = await mapboxpolylinePoints.getRouteBetweenCoordinates(
        'pk.eyJ1IjoiYWxva2phZGhhdiIsImEiOiJjbGNnNGQxZGUwcmNiM3lrNTM3YjFnaWc4In0.4sdA4V90-ZAsGyxKxuNLiw',
        PointLatLng(latitude: _locationData.latitude,longitude:  _locationData.longitude),
        PointLatLng(latitude: _currentPosition.latitude, longitude: _currentPosition.longitude),
        TravelType.walking
        );
    if (result.points.isNotEmpty){
      for (List<PointLatLng> element in result.points) {
         polylineCoordinates.add(decodeEncodedPolyline(element));
        }
      
    }
    _addPolyLine();
  }
    List<LatLng> decodeEncodedPolyline(List<PointLatLng> encoded) {
    List<LatLng> poly = [];
    for (int i = 0; i < encoded.length; i++) {
      poly.add(LatLng(encoded[i].latitude,encoded[i].longitude));
    }
    return poly;
  }


  List<Map> listSaloon = [
    {
      "image": "assets/images/outlate.jpg",
      "shop-name": "Afzal Cutting and sallon",
      "name": "Afzal khan",
      "distance": "14km"
    },
    {
      "image": "assets/images/outlet2.jpg",
      "shop-name": "Afzal Cutting and sallon",
      "name": "Afzal khan",
      "distance": "14km"
    },
    {
      "image": "assets/images/outlet3.jpg",
      "shop-name": "Afzal Cutting and sallon",
      "name": "Afzal khan",
      "distance": "14km"
    },
    {
      "image": "assets/images/outlet4.jpg",
      "shop-name": "Afzal Cutting and sallon",
      "name": "Afzal khan",
      "distance": "14km"
    },
    {
      "image": "assets/images/outlet5.jpg",
      "shop-name": "Afzal Cutting and sallon",
      "name": "Afzal khan",
      "distance": "14km"
    },
  ];

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    return Scaffold(
        body: (_center == null)
            ? const Center(child: CircularProgressIndicator())
            : SizedBox(
                width: size.width,
                height: size.height,
                child: Stack(
                  children: [
                    SizedBox(
                      width: size.width,
                      height: size.height,
                      child: GoogleMap(
                        initialCameraPosition: CameraPosition(
                          target: _center!,
                          zoom: 16,
                        ),
                        onMapCreated: (controller) async {
                          mapController = controller;
                          var currentMarker = await BitmapDescriptor.fromAssetImage(
                                  ImageConfiguration.empty,
                                  "assets/images/location.png");
                          var markerIcon =
                              await BitmapDescriptor.fromAssetImage(
                                  ImageConfiguration.empty,
                                  "assets/images/locations.png");
                          _markers = [
                            Marker(
                                markerId: const MarkerId("djf0"),
                                position: LatLng(_locationData.latitude,
                                    _locationData.longitude),
                                    icon: currentMarker,
                                onTap: () {
                                  _center = LatLng(_locationData.latitude,
                                      _locationData.longitude);
                                  setState(() {});
                                }),
                            Marker(
                              markerId: const MarkerId("djf"),
                              position: _currentPosition,
                              icon: markerIcon,
                              onTap: () {
                                _center = _currentPosition;
                                setState(() {});
                              },
                            ),
                            Marker(
                              markerId: const MarkerId("djf1"),
                              position: _currentPosition1,
                              icon: markerIcon,
                              onTap: () {
                                _center = _currentPosition1;
                                setState(() {});
                              },
                            ),
                            Marker(
                              markerId: const MarkerId("djf2"),
                              position: _currentPosition2,
                              icon: markerIcon,
                              onTap: () {
                                _center = _currentPosition2;
                                setState(() {});
                              },
                            ),
                            Marker(
                              markerId: const MarkerId("djf3"),
                              position: _currentPosition3,
                              icon: markerIcon,
                              onTap: () {
                                _center = _currentPosition3;
                                setState(() {});
                              },
                            ),
                            Marker(
                              markerId: const MarkerId("djf5"),
                              position: _currentPosition4,
                              icon: markerIcon,
                              onTap: () {
                                _center = _currentPosition4;
                                setState(() {});
                              },
                            ),
                          ];
                          setState(() {});
                        },
                        markers: _markers!.asMap().values.toSet(),
                        myLocationButtonEnabled: true,
                        polylines: Set<Polyline>.of(polylines.values),
                      ),
                    ),
                    Positioned(
                      bottom: 4,
                      left: 0,
                      child: SizedBox(
                        width: size.width,
                        height: size.height * 0.15,
                        child: ListView.builder(
                          itemCount: listSaloon.length,
                          scrollDirection: Axis.horizontal,
                          itemBuilder: (context, index) => InkWell(
                            onTap: () => _getPolyline(),
                            child: Container(
                              width: size.width * 0.35,
                              height: size.height * 0.15,
                              margin: EdgeInsets.symmetric(horizontal: 8.0),
                              decoration: BoxDecoration(
                                  color: Colors.white,
                                  boxShadow: [
                                    BoxShadow(
                                      offset: Offset(2.5, 2.5),
                                      blurRadius: 5,
                                      color: shadowcolor,
                                    )
                                  ]),
                              child: Flex(
                                direction: Axis.vertical,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Expanded(
                                      flex: 2,
                                      child: Image.asset(
                                        listSaloon[index]["image"],
                                        fit: BoxFit.fitWidth,
                                      )),
                                  Expanded(
                                      child: Column(
                                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                        children: [
                                    Text(listSaloon[index]["shop-name"],
                                        style: TextStyle(fontSize: 10.0,fontWeight: FontWeight.w600,color:blackcolor)),
                                    
                                    Row(
                                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                      crossAxisAlignment: CrossAxisAlignment.center,
                                      children: [
                                        Text(listSaloon[index]["name"],
                                        style: TextStyle(fontSize: 8.0,fontWeight:FontWeight.w400,color:blackcolor)),
                                        Row(
                                          children: [
                                            Icon(Icons.directions_walk,size: 10,),
                                            Text(listSaloon[index]["distance"],
                                                style: TextStyle(
                                                    fontSize: 8.0,
                                                    fontWeight: FontWeight.w600,color: blackcolor))
                                          ],
                                        ),
                                      ],
                                    ),
                                  ]))
                                ],
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                    Positioned(
                      top: 30,
                      left:10,
                      child: ElevatedButton.icon(
                        style: ElevatedButton.styleFrom(
                          foregroundColor: blackcolor,
                          backgroundColor: Colors.white.withOpacity(0.2)
                        ),
                        onPressed: (){
                          Navigator.pop(context);
                        }, icon: const Icon(Icons.arrow_back), label: const Text('back')))
                  ],
                ),
              ));
  }
}


// also you can add distance and durations and result is a instance of MapboxPolylineResult

double distance = (result.distance[0].floor()) / 1000;
print(distance);

 double seconds = result.distance[0];
  
  // Convert the seconds to a Duration object
  Duration duration = Duration(seconds: seconds.toInt());
  
  // Extract the hours, minutes, and remaining seconds from the Duration
  int hours = duration.inHours;
  int minutes = duration.inMinutes.remainder(60);
  int remainingSeconds = duration.inSeconds.remainder(60);
  
  // Print the result
  print('$hours hours $minutes minutes $remainingSeconds seconds');

Hint

kindly ensure you use a valid mapbox direction api key,
If you need help generating direction api key for your project click this link