MapView done

2025-12-06 00:21:19 +00:00 · 2021-07-15 18:10:43 +02:00 · 2021-07-15 18:10:43 +02:00 · 59f86a3093
commit 59f86a3093
parent 471aa91e8c
5 changed files with 221 additions and 93 deletions
--- a/lib/Screens/Map/google_map_view.dart
+++ 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<GoogleMapView> {
+  ConfigurationDTO configurationDTO;
+  Completer<GoogleMapController> _controller = Completer();
+  Set<Marker> markers = {};
+  List<MapMarker> markersList = List();
+
+  Set<Marker> 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<MapContext>(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
+                            ));
+             //         });
+      },
+    );
+  }
+
+}
--- 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<Marker> markers = {};
@ -41,58 +42,6 @@ class _MapViewWidget extends State<MapViewWidget> {
        .asUint8List();
  }

-  Set<Marker> 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<MapViewWidget> {

  @override
  Widget build(BuildContext context) {
-    final mapContext = Provider.of<MapContext>(context);
+    //final mapContext = Provider.of<MapContext>(context);
    final appContext = Provider.of<AppContext>(context);
    return Stack(
          children: <Widget>[
@ -124,30 +73,7 @@ class _MapViewWidget extends State<MapViewWidget> {
              future: getByteIcon(),
              builder: (context, AsyncSnapshot<dynamic> 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 {
--- 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<MarkerViewWidget> {
    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<MarkerViewWidget> {
                  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<MarkerViewWidget> {
                    ),
                  ),
                ),
-                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<Widget>((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)),
+                              ),
+                            ),
+                          ),
+                        ]
+                    ),
                  ),
                ),
              ])
--- 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:
--- 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.