Added Directions functionality, with coloured water sources, and some restyling

lib/Components/Permissions.dart

@@ -1,5 +1,4 @@
 import 'dart:core';
-import 'package:flutter/material.dart';
 import 'package:location/location.dart';
 
 Location location = Location();

lib/Components/bottom_sheet_info.dart

@@ -1,17 +1,25 @@
+import 'package:cloud_firestore/cloud_firestore.dart';
 import 'package:flutter/material.dart';
 import 'package:flow/constants.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:flow/Components/flow_shared_preferences.dart';
+import 'package:google_maps_flutter/google_maps_flutter.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 import 'dart:convert';
+import 'package:location/location.dart';
+import 'directions/directions_model.dart';
+import 'directions/directions_repository.dart';
+import 'flow_maps.dart';
+import 'flow_location.dart';
 
 class BottomSheetInfo extends StatefulWidget {
   final String bottomSheetID;
   final String bottomSheetDescription;
   final bool bottomSheetIsTypeTap;
   final bool bottomSheetIsFlowing;
   final String distance;
+  final GeoPoint tapLocation;
 
   BottomSheetInfo({
     Key key,
@@ -20,16 +28,24 @@ class BottomSheetInfo extends StatefulWidget {
     this.bottomSheetIsTypeTap,
     this.bottomSheetIsFlowing,
     this.distance,
+    this.tapLocation,
   }) : super(key: key);
 
   @override
-  _BottomSheetInfoState createState() => _BottomSheetInfoState();
+  BottomSheetInfoState createState() => BottomSheetInfoState();
 }
 
-class _BottomSheetInfoState extends State<BottomSheetInfo> {
+class BottomSheetInfoState extends State<BottomSheetInfo> {
   String ifIsTypeTap;
   String ifIsFlowing;
   bool isSaved;
+  //Directions _info;
+  LatLng markerLocation;
+  LatLng currentLocation;
+  Directions dirInfo;
+  Widget circIndicator = SizedBox(
+    width: 2,
+  );
 
   // ignore: deprecated_member_use
   List<FlowSaved> flowList = List<FlowSaved>();
@@ -40,8 +56,10 @@ class _BottomSheetInfoState extends State<BottomSheetInfo> {
 
   @override
   void initState() {
-    initFlowSharedPreferences();
     super.initState();
+    initFlowSharedPreferences();
+    getCurrentLocation();
+    //  ifTapIsSaved();
   }
 
   ///initialising Shared Preferences
@@ -50,6 +68,15 @@ class _BottomSheetInfoState extends State<BottomSheetInfo> {
     loadSPData();
   }
 
+  getCurrentLocation() async {
+    final LocationData currentLocData = await getLocation();
+    currentLocation = LatLng(currentLocData.latitude, currentLocData.longitude);
+
+    print('current location data is $currentLocation');
+
+    return currentLocation;
+  }
+
   @override
   Widget build(BuildContext context) {
     if (widget.bottomSheetIsTypeTap == true) {
@@ -64,6 +91,11 @@ class _BottomSheetInfoState extends State<BottomSheetInfo> {
       ifIsFlowing = 'Not Flowing';
     }
 
+    markerLocation = LatLng(
+      widget.tapLocation.latitude.toDouble(),
+      widget.tapLocation.longitude.toDouble(),
+    );
+
     return Container(
       padding: EdgeInsets.all(20),
       // height: MediaQuery.of(context).size.height * .4,
@@ -130,7 +162,7 @@ class _BottomSheetInfoState extends State<BottomSheetInfo> {
                   children: [
                     BodyText(title: 'Approx. Distance:'),
                     Text(
-                      'N/A m',
+                      ' km',
                       style: TextStyle(
                         fontWeight: FontWeight.bold,
                         color: primarycolor,
@@ -154,10 +186,39 @@ class _BottomSheetInfoState extends State<BottomSheetInfo> {
                 elevation: 0,
                 label: Text('Get Directions'),
                 backgroundColor: primarycolor,
-                onPressed: () {},
+                onPressed: () async {
+                  dirInfo = await FlowMaps()
+                      .getDirections(currentLocation, markerLocation);
+                  print(
+                      'marker position is ${widget.tapLocation.latitude.toDouble()} and ${widget.tapLocation.longitude.toDouble()} ');
+                  print(currentLocation);
+                  print(dirInfo.polylinePoints);
+                  setState(() {
+                    circIndicator = CircularProgressIndicator(
+                      backgroundColor: Colors.transparent,
+                    );
+                  });
+
+                  // Future.delayed(Duration(seconds: 1), () {
+                  //   Navigator.pop(context);
+                  //   setState(() {});
+                  //
+                  //   // Navigator.push(
+                  //   //   context,
+                  //   //   MaterialPageRoute(
+                  //   //     builder: (context) => FlowMaps(
+                  //   //       directionInfo: dirInfo,
+                  //   //     ),
+                  // });
+                  Future.delayed(Duration(seconds: 1), () async {
+                    Navigator.pop(context, dirInfo);
+                  });
+                },
               ),
-              SizedBox(width: 40),
-              checkIfIsSavedFAB(),
+              SizedBox(width: 10),
+              circIndicator,
+              SizedBox(width: 20),
+              ifTapIsSaved(),
             ],
           ),
 
@@ -167,20 +228,32 @@ class _BottomSheetInfoState extends State<BottomSheetInfo> {
     );
   }
 
+  // ///Get Directions func
+  // Future<Directions> getDirections(LatLng origin, LatLng destination) async {
+  //   final directions = await DirectionsRepository()
+  //       .getDirections(origin: origin, destination: destination);
+  //
+  //   //  print(directionInfo);
+  //   // print(directions);
+  //   // setState(() {});
+  //   //return directionInfo;
+  //   return directions;
+  // }
+
   /// method to check if is saved and return appropriate icon
 
-  Widget checkIfIsSavedFAB() {
+  ifTapIsSaved() {
     Widget checkIfSaved;
 
     ///loop to go through the entire list and check if this source has been saved or not
     if (flowList.isEmpty) {
-      checkIfSaved = FABToAddTosave();
+      checkIfSaved = addToSavedFAB();
     } else {
       for (int i = 0; i < flowList.length; i++) {
         if (flowList[i].savedID == widget.bottomSheetID) {
-          checkIfSaved = FABToRemoveFromSaved();
+          checkIfSaved = removeFromSavedFAB();
         } else {
-          checkIfSaved = FABToAddTosave();
+          checkIfSaved = addToSavedFAB();
         }
       }
     }
@@ -189,7 +262,7 @@ class _BottomSheetInfoState extends State<BottomSheetInfo> {
 
   /// custom FABs to add and remove from saved
   // ignore: non_constant_identifier_names
-  Widget FABToAddTosave() {
+  Widget addToSavedFAB() {
     return FloatingActionButton(
       elevation: 0,
       backgroundColor: primarycolor.withOpacity(.2),
@@ -215,7 +288,7 @@ class _BottomSheetInfoState extends State<BottomSheetInfo> {
   }
 
   // ignore: non_constant_identifier_names
-  Widget FABToRemoveFromSaved() {
+  Widget removeFromSavedFAB() {
     return FloatingActionButton(
       elevation: 0,
       backgroundColor: secondarycolor.withOpacity(.2),
@@ -268,10 +341,9 @@ class _BottomSheetInfoState extends State<BottomSheetInfo> {
   }
 
   void loadSPData() {
-    List<String> spList = flowSharedPreferences.getStringList('list');
+    List<String> spList = (flowSharedPreferences.getStringList('list'));
     flowList = spList
         .map((savedItem) => FlowSaved.fromMap(json.decode(savedItem)))
         .toList();
-    setState(() {});
   }
 }

lib/Components/directions/directions_model.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter_polyline_points/flutter_polyline_points.dart';
+import 'package:google_maps_flutter/google_maps_flutter.dart';
+
+class Directions {
+  final LatLngBounds bounds;
+  final List<PointLatLng> polylinePoints;
+  final String totalDistance;
+  final String totalDuration;
+
+  const Directions({
+    @required this.bounds,
+    @required this.polylinePoints,
+    @required this.totalDistance,
+    @required this.totalDuration,
+  });
+  factory Directions.fromMap(Map<String, dynamic> map) {
+    //check if route is not available
+    if ((map['routes'] as List).isEmpty) {
+      print('routes list is empty');
+      return null;
+    }
+
+    // get route information
+    final data = Map<String, dynamic>.from(map['routes'][0]);
+
+    //bounds
+    final northeast = data['bounds']['northeast'];
+    final southwest = data['bounds']['southwest'];
+    final bounds = LatLngBounds(
+      southwest: LatLng(southwest['lat'], southwest['lng']),
+      northeast: LatLng(northeast['lat'], northeast['lng']),
+    );
+
+    ///Distance and Duration
+    String distance = '';
+    String duration = '';
+    if ((data['legs'] as List).isNotEmpty) {
+      final leg = data['legs'][0];
+      distance = leg['distance']['text'];
+      duration = leg['duration']['text'];
+    }
+
+    print('distance from direction model $distance');
+    print('duration from direction model $duration');
+    return Directions(
+      bounds: bounds,
+      polylinePoints:
+          PolylinePoints().decodePolyline(data['overview_polyline']['points']),
+      totalDistance: distance,
+      totalDuration: duration,
+    );
+  }
+}

lib/Components/directions/directions_repository.dart

@@ -0,0 +1,59 @@
+import 'package:dio/dio.dart';
+import 'package:flow/Components/bottom_sheet_info.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/foundation.dart';
+import 'package:google_maps_flutter/google_maps_flutter.dart';
+import '.env.dart';
+import 'directions_model.dart';
+
+class DirectionsRepository {
+  static const String _baseUrl =
+      'https://maps.googleapis.com/maps/api/directions/json?';
+
+  final Dio _dio;
+  Directions directionData;
+
+  DirectionsRepository({Dio dio}) : _dio = dio ?? Dio();
+  Future<Directions> getDirections({
+    @required LatLng origin,
+    @required LatLng destination,
+  }) async {
+    final response = await _dio.get(
+      _baseUrl,
+      queryParameters: {
+        'origin': '${origin.latitude},${origin.longitude}',
+        'destination': '${destination.latitude},${destination.longitude}',
+        'key': googleAPIKey,
+      },
+    );
+    //  check if response is successful
+    if (response.statusCode == 200) {
+      print('response is successful');
+      // print('response data from model is ${response.data}');
+      return Directions.fromMap(response.data);
+    }
+    print('an error has occured:');
+    return response.data;
+
+    // print('response from directon api${response.data}');
+    // return response.data;
+
+    // print('response is not successful');
+    // return null;
+  }
+}
+
+// getCurrentLocation() async {
+//   /// getting current position
+//   currentPosition = await location.getLocation();
+//
+//   ///listening for location changes
+//   location.onLocationChanged.listen(
+//     (LocationData currentLocation) {
+//       setState(() {
+//         currentPosition = currentLocation;
+//         return currentLocation;
+//       });
+//     },
+//   );
+// }

lib/Components/flow_bottom_nav_bar.dart

@@ -34,23 +34,24 @@ class _FlowBottomNavBarState extends State<FlowBottomNavBar> {
       bottomNavigationBar: BottomNavigationBar(
         backgroundColor: Colors.white,
         type: BottomNavigationBarType.fixed,
-        elevation: 15,
+        elevation: 10,
         selectedItemColor: primarycolor,
+        unselectedItemColor: textcolor.withOpacity(.1),
         currentIndex: currentMenuIndex,
         onTap: (value) {
           currentMenuIndex = value;
           setState(() {});
         },
-        showUnselectedLabels: true,
-        unselectedItemColor: textcolor,
+        showUnselectedLabels: false,
+        showSelectedLabels: false,
         selectedFontSize: 12,
         unselectedFontSize: 12,
         items: [
           BottomNavigationBarItem(
             label: ('Home'),
             icon: SvgPicture.asset(
               'Assets/icons/svgs/fi-rr-home.svg',
-              color: textcolor,
+              color: textcolor.withOpacity(.9),
             ),
             activeIcon: SvgPicture.asset(
               'Assets/icons/svgs/fi-rr-home.svg',
@@ -61,7 +62,7 @@ class _FlowBottomNavBarState extends State<FlowBottomNavBar> {
             label: 'Find',
             icon: SvgPicture.asset(
               'Assets/icons/svgs/fi-rr-search.svg',
-              color: textcolor,
+              color: textcolor.withOpacity(.9),
             ),
             activeIcon: SvgPicture.asset(
               'Assets/icons/svgs/fi-rr-search.svg',
@@ -72,7 +73,7 @@ class _FlowBottomNavBarState extends State<FlowBottomNavBar> {
             label: 'Saved',
             icon: SvgPicture.asset(
               'Assets/icons/svgs/fi-rr-heart.svg',
-              color: textcolor,
+              color: textcolor.withOpacity(.9),
             ),
             activeIcon: SvgPicture.asset(
               'Assets/icons/svgs/fi-rr-heart.svg',
@@ -83,7 +84,7 @@ class _FlowBottomNavBarState extends State<FlowBottomNavBar> {
             label: 'About',
             icon: SvgPicture.asset(
               'Assets/icons/svgs/fi-rr-user.svg',
-              color: textcolor,
+              color: textcolor.withOpacity(.9),
             ),
             activeIcon: SvgPicture.asset(
               'Assets/icons/svgs/fi-rr-user.svg',