Initial commit
This commit is contained in:
159
lib/widget/osm_map/map_picker_page.dart
Normal file
159
lib/widget/osm_map/map_picker_page.dart
Normal file
@@ -0,0 +1,159 @@
|
||||
|
||||
import 'package:driver/themes/app_them_data.dart';
|
||||
import 'package:driver/themes/round_button_fill.dart';
|
||||
import 'package:driver/themes/theme_controller.dart';
|
||||
import 'package:driver/widget/osm_map/map_controller.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_map/flutter_map.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:latlong2/latlong.dart';
|
||||
|
||||
class MapPickerPage extends StatelessWidget {
|
||||
final OSMMapController controller = Get.put(OSMMapController());
|
||||
final TextEditingController searchController = TextEditingController();
|
||||
|
||||
MapPickerPage({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final themeController = Get.find<ThemeController>();
|
||||
final isDark = themeController.isDark.value;
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
backgroundColor: isDark ? AppThemeData.surfaceDark : AppThemeData.surface,
|
||||
centerTitle: false,
|
||||
titleSpacing: 0,
|
||||
title: Text(
|
||||
"PickUp Location".tr,
|
||||
textAlign: TextAlign.start,
|
||||
style: TextStyle(fontFamily: AppThemeData.medium, fontSize: 16, color: isDark ? AppThemeData.grey50 : AppThemeData.grey900),
|
||||
),
|
||||
),
|
||||
body: Stack(
|
||||
children: [
|
||||
Obx(
|
||||
() => FlutterMap(
|
||||
mapController: controller.mapController,
|
||||
options: MapOptions(
|
||||
initialCenter: controller.pickedPlace.value?.coordinates ?? LatLng(20.5937, 78.9629), // Default India center
|
||||
initialZoom: 13,
|
||||
onTap: (tapPos, latlng) {
|
||||
controller.addLatLngOnly(latlng);
|
||||
controller.mapController.move(latlng, controller.mapController.camera.zoom);
|
||||
},
|
||||
),
|
||||
children: [
|
||||
TileLayer(urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', subdomains: const ['a', 'b', 'c'], userAgentPackageName: 'com.emart.app'),
|
||||
MarkerLayer(
|
||||
markers:
|
||||
controller.pickedPlace.value != null
|
||||
? [Marker(point: controller.pickedPlace.value!.coordinates, width: 40, height: 40, child: const Icon(Icons.location_pin, size: 36, color: Colors.red))]
|
||||
: [],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
top: 16,
|
||||
left: 16,
|
||||
right: 16,
|
||||
child: Column(
|
||||
children: [
|
||||
Material(
|
||||
elevation: 4,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: TextField(
|
||||
controller: searchController,
|
||||
style: TextStyle(color: isDark ? AppThemeData.grey900 : AppThemeData.grey900),
|
||||
decoration: InputDecoration(
|
||||
hintText: 'Search location...'.tr,
|
||||
hintStyle: TextStyle(color: isDark ? AppThemeData.grey900 : AppThemeData.grey900),
|
||||
contentPadding: EdgeInsets.all(12),
|
||||
border: InputBorder.none,
|
||||
prefixIcon: Icon(Icons.search),
|
||||
),
|
||||
onChanged: controller.searchPlace,
|
||||
),
|
||||
),
|
||||
Obx(() {
|
||||
if (controller.searchResults.isEmpty) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
return Container(
|
||||
margin: const EdgeInsets.only(top: 4),
|
||||
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(8)),
|
||||
child: ListView.builder(
|
||||
shrinkWrap: true,
|
||||
itemCount: controller.searchResults.length,
|
||||
itemBuilder: (context, index) {
|
||||
final place = controller.searchResults[index];
|
||||
return ListTile(
|
||||
title: Text(place['display_name']),
|
||||
onTap: () {
|
||||
controller.selectSearchResult(place);
|
||||
final lat = double.parse(place['lat']);
|
||||
final lon = double.parse(place['lon']);
|
||||
final pos = LatLng(lat, lon);
|
||||
controller.mapController.move(pos, 15);
|
||||
searchController.text = place['display_name'];
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
bottomNavigationBar: Obx(() {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(16),
|
||||
color: Colors.white,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
controller.pickedPlace.value != null ? "Picked Location:".tr : "No Location Picked".tr,
|
||||
style: TextStyle(color: isDark ? AppThemeData.primary300 : AppThemeData.primary300, fontFamily: AppThemeData.semiBold, fontWeight: FontWeight.w600),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
if (controller.pickedPlace.value != null)
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 2.0),
|
||||
child: Text(
|
||||
"${controller.pickedPlace.value!.address}\n(${controller.pickedPlace.value!.coordinates.latitude.toStringAsFixed(5)}, ${controller.pickedPlace.value!.coordinates.longitude.toStringAsFixed(5)})",
|
||||
style: const TextStyle(fontSize: 13),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: RoundedButtonFill(
|
||||
title: "Confirm Location".tr,
|
||||
color: AppThemeData.primary300,
|
||||
textColor: AppThemeData.grey50,
|
||||
height: 5,
|
||||
onPress: () async {
|
||||
final selected = controller.pickedPlace.value;
|
||||
if (selected != null) {
|
||||
Get.back(result: selected); // ✅ Return the selected place
|
||||
print("Selected location: $selected");
|
||||
}
|
||||
},
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
IconButton(icon: const Icon(Icons.delete_forever, color: Colors.red), onPressed: controller.clearAll),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user