diff --git a/lib/Screens/Map/google_map_view.dart b/lib/Screens/Map/google_map_view.dart new file mode 100644 index 0000000..e99c354 --- /dev/null +++ b/lib/Screens/Map/google_map_view.dart @@ -0,0 +1,129 @@ +import 'dart:async'; +import 'dart:typed_data'; +import 'dart:ui' as ui; +import 'package:enum_to_string/enum_to_string.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; +import 'package:google_maps_flutter/google_maps_flutter.dart'; +import 'package:managerapi/api.dart'; +import 'package:provider/provider.dart'; +import 'package:tablet_app/Models/map-marker.dart'; +import 'package:tablet_app/Screens/Map/map_context.dart'; +import 'package:tablet_app/app_context.dart'; + +class GoogleMapView extends StatefulWidget { + final MapDTO mapDTO; + final Uint8List selectedMarkerIcon; + final String language; + const GoogleMapView({ + Key key, + this.mapDTO, + this.selectedMarkerIcon, + this.language, + }) : super(key: key); + + @override + _GoogleMapViewState createState() => _GoogleMapViewState(); +} + +class _GoogleMapViewState extends State { + ConfigurationDTO configurationDTO; + Completer _controller = Completer(); + Set markers = {}; + List markersList = List(); + + Set getMarkers(language, mapContext) { + markers = {}; + + widget.mapDTO.points.forEach((point) { + var mapMarker = new MapMarker( + id: point.id, + title: point.title.firstWhere((translation) => translation.language == language).value, + description: point.description.firstWhere((translation) => translation.language == language).value, + longitude: point.longitude, + latitude: point.latitude, + images: point.images + ); + markersList.add(mapMarker); + }); + + markersList.forEach((element) { + if (element.latitude != null && element.longitude != null) { + markers.add(Marker( + draggable: false, + markerId: MarkerId(element.latitude + element.longitude), + position: LatLng( + double.tryParse(element.latitude), + double.tryParse(element.longitude), + ), + icon: BitmapDescriptor.fromBytes(widget.selectedMarkerIcon), + /*icon: BitmapDescriptor.defaultMarkerWithHue( + BitmapDescriptor.hueYellow, + ),*/ + onTap: () { + print('hello you 1'); + + //setState(() { + mapContext.setSelectedMarker( + new MapMarker( + title: element.title, + images: element.images, + description: element.description, + longitude: element.longitude, + latitude: element.latitude, + )); + //}); + }, + infoWindow: InfoWindow(title: element.title))); + } + }); + + return markers; + } + + @override + void initState() { + super.initState(); + } + + @override + void dispose() { + // TODO: implement dispose + super.dispose(); + } + + @override + Widget build(BuildContext context) { + final mapContext = Provider.of(context); + Size size = MediaQuery.of(context).size; + + print(widget.mapDTO); + + return GoogleMap( + mapType: widget.mapDTO.mapType != null ? EnumToString.fromString(MapType.values, widget.mapDTO.mapType.toString()): MapType.hybrid, + mapToolbarEnabled: false, + initialCameraPosition: CameraPosition( + target: LatLng(50.416639, 4.879169), + zoom: widget.mapDTO.zoom != null ? widget.mapDTO.zoom.toDouble() : 18, + ), + onMapCreated: (GoogleMapController controller) { + _controller.complete(controller); + }, + markers: getMarkers(widget.language, mapContext), + onTap: (LatLng location) { + //setState(() { + print(location); + mapContext.setSelectedMarker( + new MapMarker( + title: '', + description: '', + images: null, + longitude: null, + latitude: null + )); + // }); + }, + ); + } + +} \ No newline at end of file diff --git a/lib/Screens/Map/map_view.dart b/lib/Screens/Map/map_view.dart index 8431137..e6669f6 100644 --- a/lib/Screens/Map/map_view.dart +++ b/lib/Screens/Map/map_view.dart @@ -13,6 +13,7 @@ import 'package:flutter/widgets.dart'; import 'package:tablet_app/Screens/Map/marker_view.dart'; import '../../app_context.dart'; +import 'google_map_view.dart'; import 'map_context.dart'; Set markers = {}; @@ -41,58 +42,6 @@ class _MapViewWidget extends State { .asUint8List(); } - Set getMarkers(appContext, mapContext) { - /*final Uint8List userMarkerIcon = - await getBytesFromAsset('assets/normalMarker.png', 75); -*/ - markers = {}; - - mapDTO.points.forEach((point) { - var mapMarker = new MapMarker( - id: point.id, - title: point.title.firstWhere((translation) => translation.language == appContext.getContext().language).value, - description: point.description.firstWhere((translation) => translation.language == appContext.getContext().language).value, - longitude: point.longitude, - latitude: point.latitude, - images: point.images - ); - print("MAP MARKERRRR ---------------------------------------------------"); - print(mapMarker.toString()); - markersList.add(mapMarker); - }); - - markersList.forEach((element) { - if (element.latitude != null && element.longitude != null) { - markers.add(Marker( - draggable: false, - markerId: MarkerId(element.latitude + element.longitude), - position: LatLng( - double.tryParse(element.latitude), - double.tryParse(element.longitude), - ), - icon: BitmapDescriptor.fromBytes(selectedMarkerIcon), - /*icon: BitmapDescriptor.defaultMarkerWithHue( - BitmapDescriptor.hueYellow, - ),*/ - onTap: () { - print('hello you 1'); - setState(() { - mapContext.setSelectedMarker( - new MapMarker( - title: element.title, - description: element.description, - longitude: element.longitude, - latitude: element.latitude - )); - }); - }, - infoWindow: InfoWindow(title: element.title))); - } - }); - - return markers; - } - @override void initState() { print(widget.section.data); @@ -116,7 +65,7 @@ class _MapViewWidget extends State { @override Widget build(BuildContext context) { - final mapContext = Provider.of(context); + //final mapContext = Provider.of(context); final appContext = Provider.of(context); return Stack( children: [ @@ -124,30 +73,7 @@ class _MapViewWidget extends State { future: getByteIcon(), builder: (context, AsyncSnapshot snapshot) { if (snapshot.connectionState == ConnectionState.done) { - return GoogleMap( - //mapType: mapDTO.mapType, // TODO mapDTO.mapType, - mapToolbarEnabled: false, - initialCameraPosition: CameraPosition( - target: LatLng(50.416639, 4.879169), - zoom: mapDTO.zoom != null ? mapDTO.zoom.toDouble() : 18, - ), - onMapCreated: (GoogleMapController controller) { - _controller.complete(controller); - }, - markers: getMarkers(appContext, mapContext), - onTap: (LatLng location) { - /*setState(() { - print(location); - mapContext.setSelectedMarker( - new MapMarker( - title: '', - description: '', - longitude: null, - latitude: null - )); - });*/ - }, - ); + return GoogleMapView(language: appContext.getContext().language, mapDTO: mapDTO, selectedMarkerIcon: selectedMarkerIcon); } else if (snapshot.connectionState == ConnectionState.none) { return Text("No data"); } else { diff --git a/lib/Screens/Map/marker_view.dart b/lib/Screens/Map/marker_view.dart index 1ec8f6f..4cfbcc4 100644 --- a/lib/Screens/Map/marker_view.dart +++ b/lib/Screens/Map/marker_view.dart @@ -1,5 +1,7 @@ import 'dart:async'; +import 'package:carousel_slider/carousel_slider.dart'; import 'package:flutter/material.dart'; +import 'package:managerapi/api.dart'; import 'package:provider/provider.dart'; import 'package:tablet_app/Models/map-marker.dart'; @@ -24,13 +26,13 @@ class _MarkerInfoWidget extends State { return new AnimatedPositioned( duration: const Duration(milliseconds: 1500), curve: Curves.easeInOutSine, - right: 140, // 140 - top: 150, // 150 + right: 120, // 140 + top: 50, // 150 child: Visibility( visible: mapContext.getSelectedMarker().longitude != null, child: Container( - width: size.width * 0.29, - height: size.height * 0.6, + width: size.width * 0.37, + height: size.height * 0.75, margin: EdgeInsets.symmetric(vertical: 3, horizontal: 4), decoration: BoxDecoration( color: kBackgroundLight, @@ -53,7 +55,7 @@ class _MarkerInfoWidget extends State { child: InkWell( onTap: () { setState(() { - mapContext.setSelectedMarker(new MapMarker(longitude: null, latitude: null, title: '', description: '')); + mapContext.setSelectedMarker(new MapMarker(longitude: null, latitude: null, title: '', images: null, description: '')); }); }, child: Container( @@ -79,17 +81,72 @@ class _MarkerInfoWidget extends State { ), ), ), - Center( - child: Column( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.spaceAround, - children: [ - Text(mapContext.getSelectedMarker().title, style: TextStyle(fontSize: 15)), - Padding( - padding: const EdgeInsets.all(15.0), - child: Text(mapContext.getSelectedMarker().description, style: TextStyle(fontSize: 15)), - ), - ] + Align( + alignment: Alignment.topCenter, + child: Padding( + padding: const EdgeInsets.only(top: 20), + child: Text(mapContext.getSelectedMarker().title, style: TextStyle(fontWeight: FontWeight.w600, fontSize: 30)), + ), + ), + Padding( + padding: const EdgeInsets.only(top: 75), + child: Center( + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + if(mapContext.getSelectedMarker().images != null && mapContext.getSelectedMarker().images.length > 0) + CarouselSlider( + options: CarouselOptions( + height: size.height *0.3, + enlargeCenterPage: true, + reverse: false, + ), + items: mapContext.getSelectedMarker().images.map((i) { + return Builder( + builder: (BuildContext context) { + return Container( + width: MediaQuery.of(context).size.width, + margin: EdgeInsets.symmetric(horizontal: 5.0), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10.0), + border: Border.all(width: 0.3, color: kSecondGrey), + ), + child: Image.network( + i.imageSource, + fit: BoxFit.contain + ) + ); + }, + ); + }).toList(), + ), + // Description + Container( + height: mapContext.getSelectedMarker().images != null && mapContext.getSelectedMarker().images.length > 0 ? size.height *0.3 : size.height *0.6, + width: MediaQuery.of(context).size.width *0.35, + decoration: BoxDecoration( + color: kBackgroundLight, + shape: BoxShape.rectangle, + borderRadius: BorderRadius.circular(10.0), + boxShadow: [ + BoxShadow( + color: kBackgroundSecondGrey, + spreadRadius: 0.5, + blurRadius: 1.1, + offset: Offset(0, 1.1), // changes position of shadow + ), + ], + ), + child: SingleChildScrollView( + child: Padding( + padding: const EdgeInsets.all(15.0), + child: Text(mapContext.getSelectedMarker().description, textAlign: TextAlign.center, style: TextStyle(fontSize: 15)), + ), + ), + ), + ] + ), ), ), ]) diff --git a/pubspec.lock b/pubspec.lock index ce526dd..6965456 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -22,6 +22,13 @@ packages: url: "https://pub.dartlang.org" source: hosted version: "2.1.0" + carousel_slider: + dependency: "direct main" + description: + name: carousel_slider + url: "https://pub.dartlang.org" + source: hosted + version: "4.0.0" characters: dependency: transitive description: @@ -57,6 +64,13 @@ packages: url: "https://pub.dartlang.org" source: hosted version: "1.0.3" + enum_to_string: + dependency: "direct main" + description: + name: enum_to_string + url: "https://pub.dartlang.org" + source: hosted + version: "2.0.1" fake_async: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index e77ba5f..b3a04f3 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -32,6 +32,8 @@ dependencies: auto_size_text: ^2.1.0 fluttertoast: unique_identifier: ^0.0.3 + enum_to_string: ^2.0.1 + carousel_slider: ^4.0.0 # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons.