284 lines
9.8 KiB
Dart
284 lines
9.8 KiB
Dart
|
|
import 'dart:async';
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_map/plugin_api.dart';
|
|
import 'package:flutter_map_location_marker/flutter_map_location_marker.dart';
|
|
import 'package:flutter_map_marker_popup/flutter_map_marker_popup.dart';
|
|
import 'package:flutter_polyline_points/flutter_polyline_points.dart';
|
|
import 'package:geolocator/geolocator.dart';
|
|
import 'package:get/get.dart';
|
|
import 'package:latlong2/latlong.dart';
|
|
import 'package:rogapp/model/destination.dart';
|
|
import 'package:rogapp/pages/destination/destination_controller.dart';
|
|
//import 'package:google_maps_flutter/google_maps_flutter.dart';
|
|
import 'package:rogapp/pages/index/index_controller.dart';
|
|
import 'package:rogapp/services/destination_service.dart';
|
|
import 'package:rogapp/widgets/bottom_sheet_new.dart';
|
|
import 'package:rogapp/widgets/bottom_sheet_widget.dart';
|
|
import 'package:rogapp/widgets/bread_crum_widget.dart';
|
|
|
|
class DestinationMapPage extends StatefulWidget {
|
|
DestinationMapPage({ Key? key }) : super(key: key);
|
|
|
|
|
|
@override
|
|
State<DestinationMapPage> createState() => _DestinationMapPageState();
|
|
}
|
|
|
|
class _DestinationMapPageState extends State<DestinationMapPage> {
|
|
final IndexController indexController = Get.find<IndexController>();
|
|
|
|
final DestinationController destinationController = Get.find<DestinationController>();
|
|
StreamSubscription? subscription;
|
|
final PopupController _popupLayerController = PopupController();
|
|
|
|
|
|
|
|
// Widget examplePopup(Marker marker){
|
|
// return Padding(
|
|
// padding: const EdgeInsets.all(10),
|
|
// child: Container(
|
|
// constraints: const BoxConstraints(minWidth: 100, maxWidth: 200),
|
|
// color: Colors.white,
|
|
// child: Column(
|
|
// crossAxisAlignment: CrossAxisAlignment.start,
|
|
// mainAxisAlignment: MainAxisAlignment.start,
|
|
// mainAxisSize: MainAxisSize.min,
|
|
// children: <Widget>[
|
|
// const Text(
|
|
// 'Popup for a marker!',
|
|
// overflow: TextOverflow.fade,
|
|
// softWrap: false,
|
|
// style: TextStyle(
|
|
// fontWeight: FontWeight.w500,
|
|
// fontSize: 14.0,
|
|
// ),
|
|
// ),
|
|
// const Padding(padding: EdgeInsets.symmetric(vertical: 4.0)),
|
|
// Text(
|
|
// 'Position: ${marker.point.latitude}, ${marker.point.longitude}',
|
|
// style: const TextStyle(fontSize: 12.0),
|
|
// ),
|
|
// Text(
|
|
// 'Marker size: ${marker.width}, ${marker.height}',
|
|
// style: const TextStyle(fontSize: 12.0),
|
|
// ),
|
|
// ],
|
|
// ),
|
|
// ),
|
|
// );
|
|
// }
|
|
|
|
|
|
|
|
List<LatLng>? getPoints(){
|
|
//print("##### --- route point ${indexController.routePoints.length}");
|
|
List<LatLng> pts = [];
|
|
for(PointLatLng p in indexController.routePoints){
|
|
LatLng l = LatLng(p.latitude, p.longitude);
|
|
pts.add(l);
|
|
}
|
|
return pts;
|
|
}
|
|
|
|
List<Marker>? getMarkers() {
|
|
List<Marker> pts = [];
|
|
int index = -1;
|
|
for (int i = 0; i < destinationController.destinations.length; i++) {
|
|
Destination d = destinationController.destinations[i];
|
|
//for(Destination d in destinationController.destinations){
|
|
//print("-----lat ${lat}, ----- lon ${lan}");
|
|
Marker m = Marker(
|
|
point: LatLng(d.lat!, d.lon!),
|
|
anchorPos: AnchorPos.align(AnchorAlign.center),
|
|
builder:(cts){
|
|
|
|
return InkWell(
|
|
onTap: (){
|
|
print("-- Destination is --- ${d.name} ------");
|
|
if(d != null){
|
|
if(indexController.currentDestinationFeature.length > 0) {
|
|
indexController.currentDestinationFeature.clear();
|
|
}
|
|
indexController.currentDestinationFeature.add(d);
|
|
//indexController.getAction();
|
|
|
|
showModalBottomSheet(context: context, isScrollControlled: true,
|
|
//builder:((context) => BottomSheetWidget())
|
|
builder:((context) => BottomSheetNew())
|
|
);
|
|
}
|
|
},
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
color: Colors.red,
|
|
shape: BoxShape.circle,
|
|
border: new Border.all(
|
|
color: Colors.white,
|
|
width: d.checkin_radious != null ? d.checkin_radious! : 1,
|
|
),
|
|
),
|
|
child: new Center(
|
|
child: new Text(
|
|
(i + 1).toString(),
|
|
style: TextStyle(color: Colors.white),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
|
|
//return Icon(Icons.pin_drop);
|
|
// return IconButton(
|
|
// onPressed: ()async {
|
|
// Destination? fs = await destinationController.getDEstinationForLatLong(d.lat!, d.lon!);
|
|
// print("-- Destination is --- ${fs!.name} ------");
|
|
// if(fs != null){
|
|
// if(indexController.currentDestinationFeature.length > 0) {
|
|
// indexController.currentDestinationFeature.clear();
|
|
// }
|
|
// indexController.currentDestinationFeature.add(fs);
|
|
// //indexController.getAction();
|
|
|
|
// showModalBottomSheet(context: context, isScrollControlled: true,
|
|
// //builder:((context) => BottomSheetWidget())
|
|
// builder:((context) => BottomSheetNew())
|
|
// );
|
|
// }
|
|
// },
|
|
// icon: Container(
|
|
// width: 60,
|
|
// height: 60,
|
|
// decoration: BoxDecoration(
|
|
// borderRadius: BorderRadius.circular(d.checkin_radious ?? 0),
|
|
// color: Colors.transparent,
|
|
// border: BoxBorder()
|
|
// ),
|
|
// child: Icon(Icons.pin_drop)
|
|
// )
|
|
// );
|
|
|
|
});
|
|
|
|
pts.add(m);
|
|
}
|
|
return pts;
|
|
}
|
|
|
|
@override
|
|
void initState() {
|
|
|
|
DestinationService.getDestinationLine(destinationController.destinations)?.then((value){
|
|
//print("---- loading destination points ------ ${value}");
|
|
indexController.routePoints.clear();
|
|
setState(() {
|
|
indexController.routePoints = value;
|
|
});
|
|
});
|
|
super.initState();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Obx((() =>
|
|
Stack(
|
|
children: [
|
|
indexController.is_rog_mapcontroller_loaded.value == false ?
|
|
Center(child: CircularProgressIndicator())
|
|
:
|
|
BreadCrumbWidget(mapController:indexController.rogMapController),
|
|
Padding(
|
|
padding: const EdgeInsets.only(top:50.0),
|
|
//child: TravelMap(),
|
|
child:
|
|
TravelMap(),
|
|
),
|
|
// Positioned(
|
|
// bottom: 200,
|
|
// left: 10,
|
|
// child: Container(
|
|
// color: Colors.white,
|
|
// child: Row(
|
|
// children: [
|
|
// Text(destinationController.gps[0]),
|
|
// Text(destinationController.locationPermission[0])
|
|
// ],
|
|
// ),
|
|
// )
|
|
// ),
|
|
],
|
|
)
|
|
));
|
|
}
|
|
|
|
FlutterMap TravelMap() {
|
|
return FlutterMap(
|
|
options: MapOptions(
|
|
onMapCreated: (c){
|
|
indexController.rogMapController = c;
|
|
indexController.rogMapController!.onReady.then((_) {
|
|
indexController.is_rog_mapcontroller_loaded.value = true;
|
|
subscription = indexController.rogMapController!.mapEventStream.listen((MapEvent mapEvent) {
|
|
if (mapEvent is MapEventMoveStart) {
|
|
//print(DateTime.now().toString() + ' [MapEventMoveStart] START');
|
|
// do something
|
|
}
|
|
if (mapEvent is MapEventMoveEnd) {
|
|
destinationController.isSelected.clear();
|
|
destinationController.isSelected.add(false);
|
|
//print(DateTime.now().toString() + ' [MapEventMoveStart] END');
|
|
//indexController.loadLocationsBound();
|
|
}
|
|
});
|
|
});
|
|
} ,
|
|
bounds: indexController.currentBound.length > 0 ? indexController.currentBound[0]: LatLngBounds.fromPoints([LatLng(35.03999881162295, 136.40587119778962), LatLng(36.642756778706904, 137.95226720406063)]),
|
|
zoom: 1,
|
|
maxZoom: 42,
|
|
interactiveFlags: InteractiveFlag.pinchZoom | InteractiveFlag.drag,
|
|
//plugins: [LocationMarkerPlugin(),]
|
|
),
|
|
children: [
|
|
TileLayerWidget(
|
|
options: TileLayerOptions(
|
|
urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
|
subdomains: ['a', 'b', 'c'],
|
|
),
|
|
),
|
|
//Obx(() =>
|
|
indexController.routePoints.length > 0 ?
|
|
PolylineLayerWidget(
|
|
options: PolylineLayerOptions(
|
|
polylines: [
|
|
Polyline(
|
|
points: getPoints()!,
|
|
strokeWidth: 4.0,
|
|
color: Colors.purple),
|
|
],
|
|
),
|
|
)
|
|
:
|
|
Container(),
|
|
//),
|
|
// PopupMarkerLayerWidget(
|
|
// options: PopupMarkerLayerOptions(
|
|
// popupController: _popupLayerController,
|
|
// markers: _markers,
|
|
// markerRotateAlignment:
|
|
// PopupMarkerLayerOptions.rotationAlignmentFor(AnchorAlign.top),
|
|
// popupBuilder: (BuildContext context, Marker marker) =>
|
|
|
|
// examplePopup(marker),
|
|
// ),
|
|
// ),
|
|
LocationMarkerLayerWidget(),
|
|
MarkerLayerWidget(
|
|
options: MarkerLayerOptions(
|
|
markers: getMarkers()!
|
|
),
|
|
),
|
|
],
|
|
|
|
);
|
|
}
|
|
} |