8-10

lib/controller/home/map_page_controller.dart

@@ -9,6 +9,7 @@ import 'package:ride/constant/credential.dart';
 import 'package:ride/constant/links.dart';
 import 'package:ride/constant/style.dart';
 import 'package:ride/controller/functions/crud.dart';
+import 'package:ride/views/home/map_widget.dart/buttom_sheet_map_show.dart';
 
 class MapController extends GetxController {
   bool isloading = true;
@@ -20,12 +21,43 @@ class MapController extends GetxController {
   List<Marker> markers = [];
   List<Polyline> polylines = [];
   late LatLng mylocation;
+  late LatLng newMylocation = const LatLng(32.115295, 36.064773);
   LatLng mydestination = const LatLng(32.115295, 36.064773);
   final List<LatLng> polylineCoordinates = [];
   BitmapDescriptor markerIcon = BitmapDescriptor.defaultMarker;
   double height = 200;
   final location = Location();
   late LocationData currentLocation;
+  double heightMenu = 70;
+  double heightPickerContainer = 90;
+  bool heightMenuBool = false;
+  bool isPickerShown = false;
+  bool isButtomSheetShown = false;
+  double heightButtomSheetShown = 240;
+
+  void changeButtomSheetShown() {
+    isButtomSheetShown = !isButtomSheetShown;
+    heightButtomSheetShown = isButtomSheetShown == true ? 240 : 0;
+    update();
+  }
+
+  void getDrawerMenu() {
+    heightMenuBool = !heightMenuBool;
+    heightMenu = heightMenuBool == true ? 100 : 0;
+    update();
+  }
+
+  void clearPlaces() {
+    places = [];
+    update();
+  }
+
+  void changePickerShown() {
+    isPickerShown = !isPickerShown;
+    heightPickerContainer = isPickerShown == true ? 150 : 90;
+    update();
+  }
+
   changeHeight() {
     if (places.isEmpty) {
       height = 0;
@@ -108,10 +140,10 @@ class MapController extends GetxController {
         (_locationData.latitude != null && _locationData.longitude != null
             ? LatLng(_locationData.latitude!, _locationData.longitude!)
             : null)!;
-    print('accuracy' + _locationData.accuracy.toString());
+    // print('accuracy' + _locationData.accuracy.toString());
-    print(_locationData.latitude);
+    // print(_locationData.latitude);
-    print(_locationData.time);
+    // print(_locationData.time);
-    print('//////////////////////////////////////');
+    // print('//////////////////////////////////////');
     update();
   }
 
@@ -200,85 +232,130 @@ class MapController extends GetxController {
     return distance;
   }
 
+  late double totaME;
+  late double tax;
+  late double totalPassenger;
+  late double totalDriver;
+  late double averageDuration;
+  late double costDuration;
+  late double cost;
   void bottomSheet() {
+    if (data.isNotEmpty) {
       String distanceText = data[0]['distance']['text'];
       String durationText = data[0]['duration']['text'];
       double distance = getDistanceFromText(distanceText);
       double duration = getDistanceFromText(durationText);
-    double cost = distance * 0.21;
+
-    double costDuration = duration * 0.05;
+      if (distanceText.contains('km')) {
-    double totalPassenger = cost + costDuration;
+        cost = distance * 0.21;
-    Get.bottomSheet(
+      } else {
-      Container(
+        cost = distance * 0.21 / 1000;
-        height: 130,
+      }
-        color: AppColor.secondaryColor,
+      averageDuration = duration / distance;
-        child: data.isEmpty
+      costDuration = duration * averageDuration * 0.016;
-            ? Center(
+      totalDriver = cost + costDuration;
-                child: Text(
+      totalPassenger = totalDriver + (totalDriver * .16);
-                'Where are you want to go..',
+      tax = totalPassenger * .04;
-                style: AppStyle.title,
+      totaME = totalPassenger - totalDriver - tax;
-              ))
+      if (totalPassenger < 1) {
-            : Center(
+        totalPassenger = 1;
-                child: Column(
+        if (totalDriver < .5) {
-                  children: [
+          totalDriver = .85;
-                    Row(
+          totaME = .11;
-                      mainAxisAlignment: MainAxisAlignment.spaceAround,
+        } else {
-                      children: [
+          totalDriver = .95;
-                        Text(
+          totaME = .05;
-                          'distance is ${data[0]['distance']['text']}',
+        }
-                          style: AppStyle.title,
+      }
-                        ),
+    }
-                        Text(
+    buttomSheetMapPage();
-                          'duration is ${data[0]['duration']['text']}',
+    // Get.bottomSheet(
-                          style: AppStyle.title,
+    //   Container(
-                        ),
+    //     height: 130,
-                      ],
+    //     decoration: const BoxDecoration(
-                    ),
+    //         color: AppColor.secondaryColor,
-                    Row(
+    //         borderRadius: BorderRadius.only(
-                      mainAxisAlignment: MainAxisAlignment.spaceAround,
+    //             topLeft: Radius.circular(15), topRight: Radius.circular(15))),
-                      children: [
+    //     child: data.isEmpty
-                        Text(
+    //         ? Center(
-                          'Cost for .21/km $cost ',
+    //             child: Text(
-                          style: AppStyle.title,
+    //             'Where are you want to go..',
-                        ),
+    //             style: AppStyle.title,
-                        Text(
+    //           ))
-                          'Cost duration .05/m $costDuration ',
+    //         : Center(
-                          style: AppStyle.title,
+    //             child: Column(
-                        ),
+    //               children: [
-                      ],
+    //                 Row(
-                    ),
+    //                   mainAxisAlignment: MainAxisAlignment.spaceAround,
-                    Text(
+    //                   children: [
-                      'Total cost $totalPassenger ',
+    //                     Text(
-                      style: AppStyle.title,
+    //                       'distance is ${data[0]['distance']['text']}',
-                    ),
+    //                       style: AppStyle.title,
-                  ],
+    //                     ),
-                ),
+    //                     Text(
-              ),
+    //                       'duration is ${data[0]['duration']['text']}',
-      ),
+    //                       style: AppStyle.title,
-      elevation: 6,
+    //                     ),
-      enableDrag: true,
+    //                   ],
-      isDismissible: true,
+    //                 ),
-      useRootNavigator: true,
+    //                 Row(
-      backgroundColor: AppColor.secondaryColor,
+    //                   mainAxisAlignment: MainAxisAlignment.spaceAround,
-      barrierColor: AppColor.accentColor.withOpacity(.4),
+    //                   children: [
-      persistent: true,
+    //                     Text(
-    );
+    //                       'Cost for .21/km ${cost.toStringAsFixed(2)} ',
+    //                       style: AppStyle.title,
+    //                     ),
+    //                     Text(
+    //                       'costDuration ${averageDuration.toStringAsFixed(2)} is ${costDuration.toStringAsFixed(2)} ',
+    //                       style: AppStyle.title,
+    //                     ),
+    //                   ],
+    //                 ),
+    //                 Row(
+    //                   mainAxisAlignment: MainAxisAlignment.spaceAround,
+    //                   children: [
+    //                     Text(
+    //                       'Cost for passenger ${totalPassenger.toStringAsFixed(2)} ',
+    //                       style: AppStyle.title,
+    //                     ),
+    //                     Text(
+    //                       'totaME  ${totaME.toStringAsFixed(2)} ',
+    //                       style: AppStyle.title,
+    //                     ),
+    //                   ],
+    //                 ),
+    //                 Text(
+    //                   'totalDriver  ${totalDriver.toStringAsFixed(2)}',
+    //                   style: AppStyle.title,
+    //                 ),
+    //               ],
+    //             ),
+    //           ),
+    //   ),
+    //   elevation: 6,
+    //   enableDrag: true,
+    //   isScrollControlled: true,
+    //   isDismissible: true,
+    //   useRootNavigator: true,
+    //   backgroundColor: Colors.transparent,
+    //   barrierColor: AppColor.accentColor.withOpacity(.4),
+    //   persistent: true,
+    //   shape: ShapeBorder.lerp(
+    //       RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+    //       RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
+    //       0.5),
+    // );
   }
 
   List<LatLng> polylineCoordinate = [];
-  double calculateCost(double distance) {
-    const double costRate = 0.27;
-    // double distanceInKm = distance / 1000; // convert distance to kilometers
-    double cost = costRate * distance;
-    return cost;
-  }
 
   @override
   void onInit() {
     // getPolyLine();
     // getMap();
-    addCustomPicker();
     getLocation();
+    addCustomPicker();
+
     super.onInit();
   }
 }

lib/controller/home/menu_controller.dart

@@ -0,0 +1,15 @@
+import 'package:get/get.dart';
+
+class MyMenuController extends GetxController {
+  bool isDrawerOpen = true;
+
+  void getDrawerMenu() {
+    if (isDrawerOpen == true) {
+      isDrawerOpen = false;
+    } else {
+      isDrawerOpen = true;
+    }
+    print(isDrawerOpen);
+    update();
+  }
+}

lib/views/home/drawer_menu_page.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:ride/constant/colors.dart';
+
+class DrawerMenuPage extends StatelessWidget {
+  const DrawerMenuPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 500,
+      color: AppColor.secondaryColor.withOpacity(.5),
+      child: Column(
+        children: [
+          Container(
+            height: 100,
+            color: AppColor.secondaryColor,
+          ),
+          Container(
+            color: Colors.transparent,
+          )
+        ],
+      ),
+    );
+  }
+}

lib/views/home/home_page.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:get/get.dart';
 import 'package:ride/constant/colors.dart';
 import 'package:ride/constant/style.dart';
 import 'package:ride/views/widgets/circle_container.dart';
@@ -11,11 +12,20 @@ class HomePage extends StatelessWidget {
     return Scaffold(
       backgroundColor: AppColor.secondaryColor,
       appBar: AppBar(
-        elevation: 0,
         backgroundColor: AppColor.secondaryColor,
+        elevation: 0,
+        leading: IconButton(
+          onPressed: () {
+            Get.back();
+          },
+          icon: const Icon(
+            Icons.arrow_back_ios_new,
+            color: AppColor.primaryColor,
+          ),
+        ),
         title: Text(
-          'home',
+          'Home'.tr,
-          style: AppStyle.title,
+          style: AppStyle.title.copyWith(fontSize: 30),
         ),
       ),
       body: Center(

lib/views/home/map_page.dart

@@ -2,20 +2,27 @@ import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:google_maps_flutter/google_maps_flutter.dart';
 import 'package:ride/constant/colors.dart';
-import 'package:ride/constant/style.dart';
 import 'package:ride/controller/home/map_page_controller.dart';
 
+import '../../constant/style.dart';
+import '../../controller/home/menu_controller.dart';
+import 'map_widget.dart/buttom_sheet_map_show.dart';
+import 'map_widget.dart/map_menu_widget.dart';
+import 'map_widget.dart/menu_map_page.dart';
+import 'map_widget.dart/picker_animation_container.dart';
+
 class MapPage extends StatelessWidget {
   const MapPage({super.key});
 
   @override
   Widget build(BuildContext context) {
     Get.put(MapController());
+    Get.put(MyMenuController());
     return Scaffold(
-      body: GetBuilder<MapController>(
+      body: Stack(
-        builder: (controller) => Stack(
         children: [
-            GoogleMap(
+          GetBuilder<MapController>(
+            builder: (controller) => GoogleMap(
               onMapCreated: controller.onMapCreated,
               cameraTargetBounds: CameraTargetBounds(controller.boundsdata),
               minMaxZoomPreference: const MinMaxZoomPreference(6, 18),
@@ -34,12 +41,15 @@ class MapPage extends StatelessWidget {
                         '${argument.latitude.toString()},${argument.longitude.toString()}');
 
                     Get.back();
+                    controller.changeButtomSheetShown();
                     controller.bottomSheet();
                   },
                 );
               },
               onTap: (argument) {
                 controller.hidePlaces();
+
+                controller.changeButtomSheetShown();
                 controller.bottomSheet();
               },
               initialCameraPosition: CameraPosition(
@@ -59,7 +69,12 @@ class MapPage extends StatelessWidget {
                 ),
                 Marker(
                   markerId: const MarkerId('destination'),
-                    position: controller.mydestination),
+                  position: controller.mydestination,
+                  draggable: true,
+                  onDragEnd: (v) {
+                    print(v);
+                  },
+                ),
               },
               polylines: {
                 Polyline(
@@ -82,116 +97,44 @@ class MapPage extends StatelessWidget {
               buildingsEnabled: true,
               mapToolbarEnabled: true,
               onCameraMove: (position) {
-                controller.mylocation = position.target;
+                controller.newMylocation = position.target;
+                // print('my' + controller.mylocation.toString());
+                // print('new' + controller.newMylocation.toString());
               },
               myLocationEnabled: true,
               // liteModeEnabled: true,
             ),
-            Positioned(
-              top: 10,
-              left: 0,
-              right: 0,
-              child: Column(
-                children: [
-                  Padding(
-                    padding: const EdgeInsets.all(16),
-                    child: Container(
-                      decoration:
-                          const BoxDecoration(color: AppColor.secondaryColor),
-                      child: TextField(
-                        decoration: const InputDecoration(
-                            suffixIcon: Icon(Icons.search)),
-                        controller: controller.placeController,
-                        onChanged: (value) {
-                          if (controller.placeController.text.length > 6) {
-                            controller.getPlaces();
-                            controller.changeHeight();
-                          }
-                        },
-                        // onEditingComplete: () => controller.changeHeight(),
-                      ),
-                    ),
-                  ),
-                  Container(
-                    height:
-                        controller.places.isNotEmpty ? controller.height : 0,
-                    color: AppColor.secondaryColor,
-                    child: ListView.builder(
-                      itemCount: controller.places.length,
-                      itemBuilder: (BuildContext context, int index) {
-                        var res = controller.places[index];
-                        return TextButton(
-                          onPressed: () {
-                            controller.changeHeight();
-                            Get.defaultDialog(
-                              title: 'Are You sure to ride to ${res['name']}',
-                              middleText: '',
-                              onConfirm: () {
-                                controller.getMap(
-                                    '${controller.mylocation.latitude.toString()},${controller.mylocation.longitude.toString()}',
-                                    "${res['geometry']['location']['lat']},${res['geometry']['location']['lng']}");
-                                controller.places = [];
-                                Get.back();
-                              },
-                            );
-                          },
-                          child: Column(
-                            children: [
-                              Row(
-                                mainAxisAlignment:
-                                    MainAxisAlignment.spaceBetween,
-                                children: [
-                                  Image.network(
-                                    res['icon'],
-                                    width: 30,
-                                  ),
-                                  Column(
-                                    children: [
-                                      Text(
-                                        res['name'].toString(),
-                                        style: AppStyle.title,
-                                      ),
-                                      Text(
-                                        res['vicinity'].toString(),
-                                        style: AppStyle.subtitle,
           ),
+          const PickerIconOnMap(),
+          PickerAnimtionContainer(),
+          const MapMenuWidget(),
+          const MenuIconMapPageWidget(),
+          buttomSheetMapPage()
         ],
       ),
-                                  Column(
-                                    children: [
-                                      Text(
-                                        'rate',
-                                        style: AppStyle.subtitle,
-                                      ),
-                                      Text(
-                                        res['rating'].toString(),
-                                        style: AppStyle.subtitle,
-                                      ),
-                                    ],
-                                  ),
-                                ],
-                              ),
-                              const Divider(
-                                thickness: 1,
-                              )
-                            ],
-                          ),
-                        );
-                      },
-                    ),
-                  )
-                ],
-              ),
-            ),
-            // Positioned(
-            //     bottom: 0,
-            //     left: 0,
-            //     right: 0,
-            //     child: Container(
-            //         height: 130, color: AppColor.secondaryColor, child: null))
-          ],
-        ),
-      ),
     );
   }
 }
+
+class PickerIconOnMap extends StatelessWidget {
+  const PickerIconOnMap({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return GetBuilder<MapController>(
+        builder: (controller) => Positioned(
+              bottom: 0,
+              top: 0,
+              left: 0,
+              right: 0,
+              child: controller.isPickerShown
+                  ? const Icon(
+                      Icons.add_location,
+                      color: Colors.purple,
+                    )
+                  : const SizedBox(),
+            ));
+  }
+}

lib/views/home/map_widget.dart/buttom_sheet_map_show.dart

@@ -0,0 +1,132 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+
+import '../../../constant/colors.dart';
+import '../../../constant/style.dart';
+import '../../../controller/home/map_page_controller.dart';
+
+GetBuilder<MapController> buttomSheetMapPage() {
+  return GetBuilder<MapController>(
+      builder: (controller) => controller.isButtomSheetShown
+          ? Positioned(
+              left: 5,
+              bottom: 0,
+              right: 5,
+              child: AnimatedContainer(
+                // clipBehavior: Clip.antiAliasWithSaveLayer,
+                curve: Curves.easeInCirc,
+                onEnd: () {
+                  controller.height = 240;
+                },
+                height: controller.heightButtomSheetShown,
+                duration: const Duration(seconds: 2),
+                child: Column(
+                  children: [
+                    controller.data.isEmpty
+                        ? const SizedBox()
+                        : Container(
+                            // height: 100,
+                            decoration: BoxDecoration(
+                                color: AppColor.secondaryColor,
+                                boxShadow: [
+                                  const BoxShadow(
+                                      color: AppColor.accentColor,
+                                      offset: Offset(2, 2)),
+                                  BoxShadow(
+                                      color:
+                                          AppColor.accentColor.withOpacity(.4),
+                                      offset: const Offset(-2, -2))
+                                ],
+                                borderRadius: const BorderRadius.all(
+                                    Radius.circular(15))),
+                            child: Row(
+                              children: [
+                                Padding(
+                                  padding: const EdgeInsets.all(8.0),
+                                  child: Image.asset(
+                                    'assets/images/jeep.png',
+                                    width: Get.width * .2,
+                                    repeat: ImageRepeat.repeatX,
+                                  ),
+                                )
+                              ],
+                            ),
+                          ),
+                    const SizedBox(
+                      height: 5,
+                    ),
+                    Container(
+                      // height: 130,
+                      decoration: BoxDecoration(
+                          color: AppColor.secondaryColor,
+                          boxShadow: [
+                            const BoxShadow(
+                                color: AppColor.accentColor,
+                                offset: Offset(2, 2)),
+                            BoxShadow(
+                                color: AppColor.accentColor.withOpacity(.4),
+                                offset: const Offset(-2, -2))
+                          ],
+                          borderRadius:
+                              const BorderRadius.all(Radius.circular(15))),
+                      child: controller.data.isEmpty
+                          ? const SizedBox()
+                          : Center(
+                              child: Column(
+                                children: [
+                                  Row(
+                                    mainAxisAlignment:
+                                        MainAxisAlignment.spaceAround,
+                                    children: [
+                                      Text(
+                                        'distance is ${controller.data[0]['distance']['text']}',
+                                        style: AppStyle.title,
+                                      ),
+                                      Text(
+                                        'duration is ${controller.data[0]['duration']['text']}',
+                                        style: AppStyle.title,
+                                      ),
+                                    ],
+                                  ),
+                                  Row(
+                                    mainAxisAlignment:
+                                        MainAxisAlignment.spaceAround,
+                                    children: [
+                                      Text(
+                                        'Cost for .21/km ${controller.cost.toStringAsFixed(2)} ',
+                                        style: AppStyle.title,
+                                      ),
+                                      Text(
+                                        'costDuration ${controller.averageDuration.toStringAsFixed(2)} is ${controller.costDuration.toStringAsFixed(2)} ',
+                                        style: AppStyle.title,
+                                      ),
+                                    ],
+                                  ),
+                                  Row(
+                                    mainAxisAlignment:
+                                        MainAxisAlignment.spaceAround,
+                                    children: [
+                                      Text(
+                                        'totalDriver  ${controller.totalDriver.toStringAsFixed(2)}',
+                                        style: AppStyle.title,
+                                      ),
+                                      Text(
+                                        'totaME  ${controller.totaME.toStringAsFixed(2)} ',
+                                        style: AppStyle.title,
+                                      ),
+                                    ],
+                                  ),
+                                  Text(
+                                    'Cost for passenger ${controller.totalPassenger.toStringAsFixed(2)} ',
+                                    style: AppStyle.title,
+                                  ),
+                                ],
+                              ),
+                            ),
+                    ),
+                  ],
+                ),
+              ),
+            )
+          : const SizedBox());
+}

lib/views/home/map_widget.dart/form_search_places.dart

@@ -0,0 +1,125 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+
+import '../../../constant/colors.dart';
+import '../../../constant/style.dart';
+import '../../../controller/home/map_page_controller.dart';
+
+GetBuilder<MapController> formSearchPlaces() {
+  return GetBuilder<MapController>(
+      builder: (controller) => Positioned(
+            top: 5,
+            // width: Get.width * .8,
+            left: 50,
+            right: 0,
+            child: Column(
+              children: [
+                Container(
+                  height: controller.places.isNotEmpty ? controller.height : 0,
+                  color: AppColor.secondaryColor,
+                  child: ListView.builder(
+                    itemCount: controller.places.length,
+                    itemBuilder: (BuildContext context, int index) {
+                      var res = controller.places[index];
+                      return InkWell(
+                        onTap: () {
+                          controller.changeHeight();
+                          Get.defaultDialog(
+                            title: 'Are You sure to ride to ${res['name']}',
+                            middleText: '',
+                            onConfirm: () {
+                              controller.clearpolyline();
+                              controller.getMap(
+                                  '${controller.mylocation.latitude.toString()},${controller.mylocation.longitude.toString()}',
+                                  "${res['geometry']['location']['lat']},${res['geometry']['location']['lng']}");
+                              controller.places = [];
+                              Get.back();
+                              controller.bottomSheet();
+                              // Get.back();
+                            },
+                          );
+                        },
+                        child: Padding(
+                          padding: const EdgeInsets.symmetric(horizontal: 10),
+                          child: Column(
+                            children: [
+                              Row(
+                                mainAxisAlignment:
+                                    MainAxisAlignment.spaceBetween,
+                                children: [
+                                  Image.network(
+                                    res['icon'],
+                                    width: 30,
+                                  ),
+                                  Column(
+                                    children: [
+                                      Text(
+                                        res['name'].toString(),
+                                        style: AppStyle.title,
+                                      ),
+                                      Text(
+                                        res['vicinity'].toString(),
+                                        style: AppStyle.subtitle,
+                                      ),
+                                    ],
+                                  ),
+                                  Column(
+                                    children: [
+                                      Text(
+                                        'rate',
+                                        style: AppStyle.subtitle,
+                                      ),
+                                      Text(
+                                        res['rating'].toString(),
+                                        style: AppStyle.subtitle,
+                                      ),
+                                    ],
+                                  ),
+                                ],
+                              ),
+                              const Divider(
+                                thickness: 1,
+                              )
+                            ],
+                          ),
+                        ),
+                      );
+                    },
+                  ),
+                ),
+                Padding(
+                  padding: const EdgeInsets.all(16),
+                  child: Container(
+                    decoration:
+                        const BoxDecoration(color: AppColor.secondaryColor),
+                    child: TextField(
+                      decoration: InputDecoration(
+                        suffixIcon: const Icon(Icons.search),
+                        hintText: 'Type here Place',
+                        hintMaxLines: 1,
+                        prefixIcon: IconButton(
+                          onPressed: () {
+                            controller.placeController.clear();
+                            controller.clearPlaces();
+                          },
+                          icon: Icon(
+                            Icons.clear,
+                            color: Colors.red[300],
+                          ),
+                        ),
+                      ),
+                      controller: controller.placeController,
+                      onChanged: (value) {
+                        if (controller.placeController.text.length > 5) {
+                          controller.getPlaces();
+                          controller.changeHeight();
+                        }
+                      },
+                      // onEditingComplete: () => controller.changeHeight(),
+                    ),
+                  ),
+                )
+              ],
+            ),
+          ));
+}

lib/views/home/map_widget.dart/map_menu_widget.dart

@@ -0,0 +1,94 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:sqflite/sqflite.dart';
+
+import '../../../constant/colors.dart';
+import '../../../controller/home/map_page_controller.dart';
+import '../../notification/notification_page.dart';
+import '../../widgets/icon_widget_menu.dart';
+import '../home_page.dart';
+import '../profile/passenger_profile_page.dart';
+
+class MapMenuWidget extends StatelessWidget {
+  const MapMenuWidget({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return GetBuilder<MapController>(
+      builder: (controller) => Positioned(
+        right: 60,
+        left: 60,
+        child: Padding(
+          padding: const EdgeInsets.only(right: 20),
+          child: Opacity(
+              alwaysIncludeSemantics: false,
+              opacity: 0.99, // Adjust the opacity value as needed
+              child: AnimatedContainer(
+                width: Get.width * .6,
+                decoration: const BoxDecoration(
+                    borderRadius: BorderRadius.all(Radius.circular(12)),
+                    color: AppColor.secondaryColor,
+                    boxShadow: [
+                      BoxShadow(
+                          color: AppColor.primaryColor,
+                          offset: Offset(-7, -7),
+                          blurRadius: 0,
+                          spreadRadius: 0,
+                          blurStyle: BlurStyle.outer),
+                      BoxShadow(
+                          color: AppColor.accentColor,
+                          offset: Offset(3, 3),
+                          blurRadius: 0,
+                          spreadRadius: 0,
+                          blurStyle: BlurStyle.outer)
+                    ]),
+                transform:
+                    Matrix4.translationValues(controller.heightMenu * .1, 1, 1),
+                curve: Curves.easeOutCubic,
+                clipBehavior: Clip.hardEdge,
+                duration: const Duration(milliseconds: 300),
+                height: controller.heightMenu,
+                child: controller.heightMenuBool
+                    ? Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceAround,
+                        children: [
+                          IconWidgetMenu(
+                              onpressed: () {
+                                Get.to(
+                                  () => const NotificationPage(),
+                                  transition: Transition.circularReveal,
+                                );
+                              },
+                              title: 'Notifications'.tr,
+                              icon: Icons.notifications),
+                          IconWidgetMenu(
+                            onpressed: () {
+                              Get.to(
+                                () => const PassengerProfilePage(),
+                                transition: Transition.zoom,
+                              );
+                            },
+                            icon: Icons.person,
+                            title: 'Profile'.tr,
+                          ),
+                          IconWidgetMenu(
+                              title: 'Home'.tr,
+                              onpressed: () {
+                                Get.to(
+                                  () => const HomePage(),
+                                  transition: Transition.downToUp,
+                                  curve: Curves.easeInOutExpo,
+                                );
+                              },
+                              icon: Icons.home),
+                        ],
+                      )
+                    : const SizedBox(), // Choose the desired overlay color
+              )),
+        ),
+      ),
+    );
+  }
+}

lib/views/home/map_widget.dart/menu_map_page.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+
+import '../../../constant/box_name.dart';
+import '../../../constant/colors.dart';
+import '../../../controller/home/map_page_controller.dart';
+import '../../../main.dart';
+
+class MenuIconMapPageWidget extends StatelessWidget {
+  const MenuIconMapPageWidget({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return GetBuilder<MapController>(
+        builder: (controller) => Positioned(
+              top: 30,
+              left: box.read(BoxName.lang) != 'ar' ? 5 : null,
+              right: box.read(BoxName.lang) == 'ar' ? 5 : null,
+              child: Container(
+                decoration: BoxDecoration(
+                    shape: BoxShape.circle,
+                    color: AppColor.secondaryColor,
+                    border: Border.all(color: AppColor.accentColor)),
+                child: AnimatedCrossFade(
+                  sizeCurve: Curves.bounceOut,
+                  duration: const Duration(
+                      milliseconds: 300), // Adjust the duration as needed
+                  crossFadeState: controller.heightMenuBool
+                      ? CrossFadeState.showFirst
+                      : CrossFadeState.showSecond,
+                  firstChild: IconButton(
+                    onPressed: () {
+                      controller.getDrawerMenu();
+                    },
+                    icon: const Icon(
+                      Icons.close,
+                      color: AppColor.primaryColor,
+                    ),
+                  ),
+                  secondChild: IconButton(
+                    onPressed: () {
+                      controller.getDrawerMenu();
+                    },
+                    icon: const Icon(
+                      Icons.menu,
+                      color: AppColor.accentColor,
+                    ),
+                  ),
+                ),
+              ),
+            ));
+  }
+}

lib/views/home/map_widget.dart/picker_animation_container.dart

@@ -0,0 +1,108 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+
+import '../../../constant/colors.dart';
+import '../../../constant/style.dart';
+import '../../../controller/home/map_page_controller.dart';
+import '../../widgets/elevated_btn.dart';
+import 'buttom_sheet_map_show.dart';
+import 'form_search_places.dart';
+
+class PickerAnimtionContainer extends StatelessWidget {
+  PickerAnimtionContainer({
+    super.key,
+  });
+  final controller = MapController();
+  @override
+  Widget build(BuildContext context) {
+    return GetBuilder<MapController>(
+        builder: (controller) => Positioned(
+              bottom: 0,
+              left: 0,
+              right: 60,
+              child: AnimatedContainer(
+                duration: const Duration(milliseconds: 300),
+                height: controller.places.isNotEmpty
+                    ? 300
+                    : controller.heightPickerContainer,
+                decoration: const BoxDecoration(
+                    boxShadow: [
+                      BoxShadow(
+                          color: AppColor.accentColor, offset: Offset(2, 2)),
+                      BoxShadow(
+                          color: AppColor.accentColor, offset: Offset(-2, -2))
+                    ],
+                    color: AppColor.secondaryColor,
+                    borderRadius: BorderRadius.only(
+                      topLeft: Radius.circular(15),
+                      topRight: Radius.circular(15),
+                    )),
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.end,
+                  children: [
+                    controller.isPickerShown
+                        ? const SizedBox()
+                        : Text(
+                            'Hi, Where to  ',
+                            style: AppStyle.title,
+                          ),
+                    Column(
+                      children: [
+                        const SizedBox(
+                          height: 5,
+                        ),
+                        controller.isPickerShown
+                            ? InkWell(
+                                onTapDown: (details) =>
+                                    controller.changePickerShown(),
+                                child: Container(
+                                  height: 4,
+                                  width: Get.width * .3,
+                                  decoration: BoxDecoration(
+                                      color: AppColor.accentColor,
+                                      borderRadius: BorderRadius.circular(10),
+                                      border: Border.all(
+                                        color: AppColor.accentColor,
+                                      )),
+                                ),
+                              )
+                            : const SizedBox(),
+                        controller.isPickerShown
+                            ? InkWell(
+                                onTap: () {},
+                                child: formSearchPlaces(),
+                              )
+                            : TextButton(
+                                onPressed: () {
+                                  controller.changePickerShown();
+                                },
+                                child: Builder(builder: (context) {
+                                  return Text(
+                                    "Pick your destination from Map".tr,
+                                    style: AppStyle.subtitle,
+                                  );
+                                }),
+                              )
+                      ],
+                    ),
+                    if (controller.isPickerShown && controller.places.isEmpty)
+                      MyElevatedButton(
+                        title: 'Go to this Target',
+                        onPressed: () async {
+                          await controller.getMap(
+                            '${controller.mylocation.latitude},${controller.mylocation.longitude}',
+                            '${controller.newMylocation.latitude},${controller.newMylocation.longitude}',
+                          );
+                          controller.changePickerShown();
+                          controller.changeButtomSheetShown();
+                          controller.bottomSheet();
+                        },
+                      ),
+                    if (controller.isPickerShown && controller.places.isEmpty)
+                      const SizedBox(),
+                  ],
+                ),
+              ),
+            ));
+  }
+}

lib/views/home/profile/passenger_profile_page.dart

@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+
+import '../../../constant/colors.dart';
+import '../../../constant/style.dart';
+
+class PassengerProfilePage extends StatelessWidget {
+  const PassengerProfilePage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: AppColor.secondaryColor,
+      appBar: AppBar(
+        backgroundColor: AppColor.secondaryColor,
+        elevation: 0,
+        leading: IconButton(
+          onPressed: () {
+            Get.back();
+          },
+          icon: const Icon(
+            Icons.arrow_back_ios_new,
+            color: AppColor.primaryColor,
+          ),
+        ),
+        title: Text(
+          'My Profile'.tr,
+          style: AppStyle.title.copyWith(fontSize: 30),
+        ),
+      ),
+      body: Container(),
+    );
+  }
+}

lib/views/notification/notification_page.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:ride/constant/colors.dart';
+import 'package:ride/constant/style.dart';
+
+class NotificationPage extends StatelessWidget {
+  const NotificationPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: AppColor.secondaryColor,
+      appBar: AppBar(
+        backgroundColor: AppColor.secondaryColor,
+        elevation: 0,
+        leading: IconButton(
+          onPressed: () {
+            Get.back();
+          },
+          icon: const Icon(
+            Icons.arrow_back_ios_new,
+            color: AppColor.primaryColor,
+          ),
+        ),
+        title: Text(
+          'Notificatios'.tr,
+          style: AppStyle.title.copyWith(fontSize: 30),
+        ),
+      ),
+      body: SafeArea(
+          child: Center(
+        child: null,
+      )),
+    );
+  }
+}

lib/views/widgets/icon_widget_menu.dart

@@ -0,0 +1,66 @@
+import 'package:flutter/material.dart';
+import 'package:ride/constant/style.dart';
+
+import '../../constant/colors.dart';
+
+class IconWidgetMenu extends StatelessWidget {
+  const IconWidgetMenu({
+    Key? key,
+    required this.onpressed,
+    required this.icon,
+    required this.title,
+  }) : super(key: key);
+
+  final VoidCallback onpressed;
+  final IconData icon;
+  final String title;
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: onpressed,
+      child: Padding(
+        padding: const EdgeInsets.only(top: 25),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Container(
+              width: 50,
+              decoration: const BoxDecoration(
+                color: AppColor.secondaryColor,
+                shape: BoxShape.circle,
+                boxShadow: [
+                  BoxShadow(
+                    color: AppColor.secondaryColor,
+                    offset: Offset(-2, -2),
+                    blurRadius: 0,
+                    spreadRadius: 0,
+                    blurStyle: BlurStyle.outer,
+                  ),
+                  BoxShadow(
+                    color: AppColor.accentColor,
+                    offset: Offset(3, 3),
+                    blurRadius: 0,
+                    spreadRadius: 0,
+                    blurStyle: BlurStyle.outer,
+                  ),
+                ],
+              ),
+              child: Center(
+                child: Icon(
+                  icon,
+                  size: 30,
+                  color: AppColor.primaryColor,
+                ),
+              ),
+            ),
+            Text(
+              title,
+              style: AppStyle.subtitle,
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}