working categories selection in map

lib/Components/audio_player.dart

@@ -31,7 +31,7 @@ class _AudioPlayerFloatingContainerState extends State<AudioPlayerFloatingContai
 
   @override
   void initState() {
-    print("IN INITSTATE AUDDDIOOOO");
+    //print("IN INITSTATE AUDDDIOOOO");
     Future.delayed(Duration.zero, () async {
       if(widget.audioBytes != null) {
         audiobytes = widget.audioBytes!;

lib/Components/multi_select_container.dart

@@ -0,0 +1,112 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
+import 'package:tablet_app/constants.dart';
+
+class MultiSelectContainer extends StatelessWidget {
+  final Color color;
+  final String? label;
+  final List<String> values;
+  final List<String> initialValue;
+  final bool isMultiple;
+  final bool isAtLeastOne;
+  final ValueChanged<List<dynamic>> onChanged;
+  const MultiSelectContainer({
+    Key? key,
+    this.color = kSecondGrey,
+    required this.label,
+    required this.values,
+    required this.initialValue,
+    required this.isMultiple,
+    this.isAtLeastOne = false,
+    required this.onChanged,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    Size size = MediaQuery.of(context).size;
+    return SingleChildScrollView(
+      scrollDirection: Axis.horizontal,
+      child: Row(
+        children: [
+          if(label != null)
+            Align(
+                alignment: AlignmentDirectional.centerStart,
+                child: Text(label!, style: TextStyle(fontSize: 25, fontWeight: FontWeight.w300))
+            ),
+          Padding(
+            padding: const EdgeInsets.all(10.0),
+            child: MultiSelectChip(
+              color,
+              values,
+              initialValue,
+              isMultiple,
+              isAtLeastOne,
+              onSelectionChanged: (selectedList) {
+                onChanged(selectedList);
+              },
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class MultiSelectChip extends StatefulWidget {
+  final Color color;
+  final List<String> values;
+  final List<String> selectedValues;
+  final Function(List<String>) onSelectionChanged; // +added
+  final bool isMultiple;
+  final bool isAtLeastOne;
+  MultiSelectChip(
+      this.color,
+      this.values,
+      this.selectedValues,
+      this.isMultiple,
+      this.isAtLeastOne,
+      {required this.onSelectionChanged} // +added
+      );
+  @override
+  _MultiSelectChipState createState() => _MultiSelectChipState();
+}
+class _MultiSelectChipState extends State<MultiSelectChip> {
+  _buildChoiceList() {
+    List<Widget> choices = [];
+    widget.values.forEach((item) {
+      choices.add(Container(
+        padding: const EdgeInsets.all(2.0),
+        child: ChoiceChip(
+          label: HtmlWidget(item, textStyle: TextStyle(color: Colors.black)),
+          selected: widget.selectedValues.contains(item),
+          selectedColor: widget.color,
+          onSelected: (selected) {
+            setState(() {
+              if (widget.isAtLeastOne && widget.selectedValues.length == 1 && widget.selectedValues[0] == item) {
+                  // showNotification(Colors.orange, kWhite, 'Au moins une valeur doit être sélectionnée', context, null);
+              } else {
+                if (widget.isMultiple) {
+                  widget.selectedValues.contains(item)
+                      ? widget.selectedValues.remove(item)
+                      : widget.selectedValues.add(item);
+                  widget.onSelectionChanged(widget.selectedValues);
+                } else {
+                  widget.selectedValues.clear();
+                  widget.selectedValues.add(item);
+                  widget.onSelectionChanged(widget.selectedValues);
+                }
+              }
+            });
+          },
+        ),
+      ));
+    });
+    return choices;
+  }
+  @override
+  Widget build(BuildContext context) {
+    return Wrap(
+      children: _buildChoiceList(),
+    );
+  }
+}

lib/Screens/Map/google_map_view.dart

@@ -6,9 +6,11 @@ import 'package:flutter/material.dart';
 import 'package:google_maps_flutter/google_maps_flutter.dart';
 import 'package:manager_api/api.dart';
 import 'package:provider/provider.dart';
+import 'package:tablet_app/Components/multi_select_container.dart';
 import 'package:tablet_app/Models/map-marker.dart';
 import 'package:tablet_app/Screens/Map/map_context.dart';
 import 'package:html/parser.dart' show parse;
+import 'package:tablet_app/constants.dart';
 
 class GoogleMapView extends StatefulWidget {
   final MapDTO? mapDTO;
@@ -29,12 +31,14 @@ class _GoogleMapViewState extends State<GoogleMapView> {
   ConfigurationDTO? configurationDTO;
   Completer<GoogleMapController> _controller = Completer();
   Set<Marker> markers = {};
-  List<MapMarker> markersList = [];
+  List<GeoPointDTO>? pointsToShow = [];
+  List<String>? selectedCategories = [];
+  bool init = false;
 
   Set<Marker> getMarkers(language, mapContext) {
     markers = {};
 
-    widget.mapDTO!.points!.forEach((point) {
+    pointsToShow!.forEach((point) {
       var textSansHTML = parse(point.title!.firstWhere((translation) => translation.language == language).value);
       var mapMarker = new MapMarker(
           id: point.id,
@@ -44,17 +48,13 @@ class _GoogleMapViewState extends State<GoogleMapView> {
           latitude: point.latitude,
           contents: point.contents
       );
-      markersList.add(mapMarker);
+      if (mapMarker.latitude != null && mapMarker.longitude != null) {
-    });
-
-    markersList.forEach((element) {
-      if (element.latitude != null && element.longitude != null) {
         markers.add(Marker(
             draggable: false,
-            markerId: MarkerId(element.latitude! + element.longitude!),
+            markerId: MarkerId(mapMarker.latitude! + mapMarker.longitude!),
             position: LatLng(
-              double.tryParse(element.latitude!)!,
+              double.tryParse(mapMarker.latitude!)!,
-              double.tryParse(element.longitude!)!,
+              double.tryParse(mapMarker.longitude!)!,
             ),
             icon: widget.selectedMarkerIcon != null ? BitmapDescriptor.fromBytes(widget.selectedMarkerIcon!) : BitmapDescriptor.defaultMarker,
             /*icon: BitmapDescriptor.defaultMarkerWithHue(
@@ -62,14 +62,15 @@ class _GoogleMapViewState extends State<GoogleMapView> {
             ),*/
             onTap: () {
               //setState(() {
-                mapContext.setSelectedMarker(
+              mapContext.setSelectedMarker(
-                    new MapMarker(
+                  new MapMarker(
-                        title: element.title,
+                    title: mapMarker.title,
-                        contents: element.contents,
+                    contents: mapMarker.contents,
-                        description: element.description,
+                    description: mapMarker.description,
-                        longitude: element.longitude,
+                    longitude: mapMarker.longitude,
-                        latitude: element.latitude,
+                    latitude: mapMarker.latitude,
-                    ));
+                  )
+              );
               //});
             },
             infoWindow: InfoWindow.noText));
@@ -80,6 +81,8 @@ class _GoogleMapViewState extends State<GoogleMapView> {
 
   @override
   void initState() {
+    pointsToShow = widget.mapDTO!.points;
+    selectedCategories = widget.mapDTO!.categories!.map((categorie) => categorie.label!.firstWhere((element) => element.language == widget.language).value!).toList();
     super.initState();
   }
 
@@ -92,8 +95,13 @@ class _GoogleMapViewState extends State<GoogleMapView> {
   @override
   Widget build(BuildContext context) {
     final mapContext = Provider.of<MapContext>(context);
-    //Size size = MediaQuery.of(context).size;
+    Size size = MediaQuery.of(context).size;
 
+    if(!init) {
+      print("getmarkers in build");
+      getMarkers(widget.language, mapContext);
+      init = true;
+    }
     //MapTypeApp? mapTypeApp = MapTypeApp.fromJson(widget.mapDTO!.mapType!.value);
     //print(mapTypeApp.toString());
 
@@ -123,34 +131,66 @@ class _GoogleMapViewState extends State<GoogleMapView> {
     }
 
     //MapType type = EnumToString.fromString(MapType.values, widget.mapDTO!.mapType.toString()) != null ? EnumToString.fromString(MapType.values, widget.mapDTO!.mapType.toString())! : MapType.hybrid;
-    return GoogleMap(
+    return Stack(
-      mapType: type, // widget.mapDTO!.mapType != null ? EnumToString.fromString(MapType.values, widget.mapDTO!.mapType.toString())!: MapType.hybrid,
+      children: [
-      mapToolbarEnabled: false,
+        Center(
-      initialCameraPosition: CameraPosition(
+          child: GoogleMap(
-        target: LatLng(50.465503, 4.865105), // MDLF 50.416639, 4.879169 / Namur 50.465503, 4.865105
+            mapType: type, // widget.mapDTO!.mapType != null ? EnumToString.fromString(MapType.values, widget.mapDTO!.mapType.toString())!: MapType.hybrid,
-        zoom: widget.mapDTO!.zoom != null ? widget.mapDTO!.zoom!.toDouble() : 18,
+            mapToolbarEnabled: false,
-      ),
+            initialCameraPosition: CameraPosition(
-      onMapCreated: (GoogleMapController controller) {
+              target: LatLng(50.465503, 4.865105), //TODO add element in manager // MDLF 50.416639, 4.879169 / Namur 50.465503, 4.865105
-        if(kIsWeb) {
+              zoom: widget.mapDTO!.zoom != null ? widget.mapDTO!.zoom!.toDouble() : 18,
-          //_controllerWeb.complete(controller);
+            ),
-        } else {
+            onMapCreated: (GoogleMapController controller) {
-          _controller.complete(controller);
+              if(kIsWeb) {
-        }
+                //_controllerWeb.complete(controller);
-      },
+              } else {
-      markers: getMarkers(widget.language, mapContext),
+                _controller.complete(controller);
-      onTap: (LatLng location) {
+              }
-        //setState(() {
+            },
-                        print(location);
+            markers: markers,
-                        mapContext.setSelectedMarker(
+            onTap: (LatLng location) {
-                            new MapMarker(
+              //setState(() {
-                                title: '',
+                              print(location);
-                                description: '',
+                              mapContext.setSelectedMarker(
-                                contents: null,
+                                  new MapMarker(
-                                longitude: null,
+                                      title: '',
-                                latitude: null
+                                      description: '',
-                            ));
+                                      contents: null,
-             //         });
+                                      longitude: null,
-      },
+                                      latitude: null
+                                  ));
+                   //         });
+            },
+          ),
+        ),
+        Positioned(
+            bottom: 35,
+            left: 10,
+            child: SizedBox(
+              width: size.width * 0.55,
+              child: MultiSelectContainer(
+                label: null,
+                color: kBackgroundGrey,
+                initialValue: selectedCategories!,
+                isMultiple: true,
+                values: widget.mapDTO!.categories!.map((categorie) => categorie.label!.firstWhere((element) => element.language == widget.language).value!).toList(),
+                onChanged: (value) {
+                  var tempOutput = new List<String>.from(value);
+                  print(tempOutput);
+                  if(init) {
+                    setState(() {
+                      selectedCategories = tempOutput;
+                      pointsToShow = widget.mapDTO!.points!.where((point) => tempOutput.any((tps) => point.categorie?.label?.firstWhere((lab) => lab.language == widget.language).value == tps) || point.categorie == null).toList();
+                      markers = getMarkers(widget.language, mapContext);
+                      mapContext.notifyListeners();
+                    });
+                  }
+                },
+              ),
+            ),
+        ),
+      ],
     );
   }