Add map context + map marker model + strawberry icon + clean code

lib/Components/Map/mapView.dart

@@ -1,225 +0,0 @@
-import 'dart:async';
-import 'package:flutter/material.dart';
-import 'package:google_maps_flutter/google_maps_flutter.dart';
-import 'package:tablet_app/Components/Map/markerInfo.dart';
-
-Set<Marker> markers = {};
-List<MarkersModel> markersList = List();
-
-class MarkersModel {
-  int id;
-  String name;
-  String description;
-  String latitude;
-  String longitude;
-  String image;
-  MarkersModel(
-      this.id,
-      this.name,
-      this.description,
-      this.latitude,
-      this.longitude,
-      this.image);
-
-// you can use this model with your backend as well :
-
-/*  factory MarkersModel.fromJson(Map<String, dynamic> json) => MarkersModel(
-      id: json['id'],
-      name: json['name'],
-      description: json['description'],
-      latitude: json['latitude'],
-      longitude: json['longitude'],
-      image: json["image"]);
-*/
-}
-
-
-class MapViewWidget extends StatefulWidget {
-  MapViewWidget();
-
-  @override
-  _MapViewWidget createState() => _MapViewWidget();
-}
-
-class _MapViewWidget extends State<MapViewWidget> {
-
-  Completer<GoogleMapController> _controller = Completer();
-
-  var markerSelected = "NULL";
-
-  void getMarkers() async {
-    /*final Uint8List userMarkerIcon =
-    await getBytesFromAsset('assets/normalMarker.png', 75);
-
-    final Uint8List selectedMarkerIcon =
-    await getBytesFromAsset('assets/selectedMarker.png', 100);*/
-
-    markers = {};
-
-    markersList.add(MarkersModel(
-        1,
-        "La Grande Poste",
-        "The Algiers central post office is an office building for postal services located at Alger Centre municipality in Algiers, Algeria",
-        "36.752887",
-        "3.042048",
-        "https://www.dzbreaking.com/wp-content/uploads/2018/03/2000.png"));
-    markersList.add(MarkersModel(
-        2,
-        "Mosquee Ketchaoua",
-        "The Ketchaoua Mosque is a mosque in Algiers, the capital of Algeria. It was built during the Ottoman rule in the 17th century and is located at the foot of the Casbah, which is a UNESCO World Heritage Site",
-        "36.7850",
-        "3.0608",
-        "https://ttnotes.com/images/makam-echahid-algiers.jpg"));
-    markersList.add(MarkersModel(
-        3,
-        "The shrine of the martyr",
-        "The Maqam Echahid is a concrete monument commemorating the Algerian war for independence. The monument was opened in 1982 on the 20th anniversary of Algeria's independence",
-        "36.7456",
-        "3.0698",
-        "https://www.airfrance.co.uk/GB/common/common/img/tbaf/news/ALG/la-mosquee-ketchaoua-l-histoire-avec-un-grand-h/ALG-la-mosquee-ketchaoua-l-histoire-avec-un-grand-h-2_1-1024x512.jpg"));
-
-
-    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.defaultMarkerWithHue(
-              BitmapDescriptor.hueYellow,
-            ),
-            onTap: () {
-              print('hello you 1');
-              setState(() {
-                markerSelected = element.latitude + element.longitude;
-              });
-            },
-            infoWindow: InfoWindow(title: element.name)));
-      }
-    });
-  }
-
-  @override
-  void initState() {
-    getMarkers();
-    print('coucou marlers');
-    print(markers);
-    super.initState();
-  }
-
-  @override
-  void dispose() {
-    // TODO: implement dispose
-    super.dispose();
-  }
-
-  static final CameraPosition _kGooglePlex = CameraPosition(
-    target: LatLng(50.4167344, 4.879165),
-    zoom: 0.4746,
-  );
-
-  static final CameraPosition _kLake = CameraPosition(
-      bearing: 192.8334901395799,
-      target: LatLng(37.43296265331129, -122.08832357078792),
-      tilt: 59.440717697143555,
-      zoom: 59.151926040649414);
-
-  @override
-  Widget build(BuildContext context) {
-    return new Scaffold(
-      body: Stack(
-        children: <Widget>[
-          GoogleMap(
-            mapType: MapType.hybrid,
-            initialCameraPosition: _kGooglePlex,
-            onMapCreated: (GoogleMapController controller) {
-              _controller.complete(controller);
-            },
-            markers: markers,
-            onTap: (LatLng location) {
-              setState(() {
-                print(location);
-              });
-            },
-          ),
-          MarkerInfoWidget(title: markerSelected,
-              description: 'DESCRIPTION',
-              text: 'TEXTE kmljfdkmj dfsmlkj dfmlkj mlkj df')
-        ]
-      ),
-      floatingActionButton: FloatingActionButton.extended(
-        onPressed: _goToTheLake,
-        label: Text('To the lake!'),
-        icon: Icon(Icons.directions_boat),
-      ),
-    );
-  }
-
-  void _onMarkerTapped(Marker marker) {
-
-  }
-
-  Future<void> _goToTheLake() async {
-    final GoogleMapController controller = await _controller.future;
-    controller.animateCamera(CameraUpdate.newCameraPosition(_kLake));
-  }
-
-  Marker newyork1Marker = Marker(
-    markerId: MarkerId('newyork1'),
-    position: LatLng(40.742451, -74.005959),
-    infoWindow: InfoWindow(title: 'Los Tacos', snippet: 'lhlkjsdf lksdfk jdsf kjdfs lkjfds lkjdflkjdjdsf ljfds ljdfslkj fdsjfdslkjfdsmkfdsmlk dfslkjh dfjdfskdsf dfsmkj fdskj df'),
-    icon: BitmapDescriptor.defaultMarkerWithHue(
-      BitmapDescriptor.hueViolet,
-    ),
-  );
-
-  Marker gramercyMarker = Marker(
-    markerId: MarkerId('asticot'),
-    position: LatLng(20.738380, -43.988426),
-    infoWindow: InfoWindow(title: 'Coucou asticot'),
-    icon: BitmapDescriptor.defaultMarkerWithHue(
-      BitmapDescriptor.hueGreen,
-    ),
-  );
-
-  Marker bernardinMarker = Marker(
-    markerId: MarkerId('bernardin'),
-    position: LatLng(40.761421, -73.981667),
-    infoWindow: InfoWindow(title: 'Le Bernardin'),
-    icon: BitmapDescriptor.defaultMarkerWithHue(
-      BitmapDescriptor.hueViolet,
-    ),
-  );
-  Marker blueMarker = Marker(
-    markerId: MarkerId('bluehill'),
-    position: LatLng(40.732128, -73.999619),
-    infoWindow: InfoWindow(title: 'Blue Hill'),
-    icon: BitmapDescriptor.defaultMarkerWithHue(
-      BitmapDescriptor.hueViolet,
-    ),
-  );
-
-//New York Marker
-
-
-  Marker newyork2Marker = Marker(
-    markerId: MarkerId('newyork2'),
-    position: LatLng(40.729640, -73.983510),
-    infoWindow: InfoWindow(title: 'Tree Bistro'),
-    icon: BitmapDescriptor.defaultMarkerWithHue(
-      BitmapDescriptor.hueViolet,
-    ),
-  );
-  Marker newyork3Marker = Marker(
-    markerId: MarkerId('newyork3'),
-    position: LatLng(40.719109, -74.000183),
-    infoWindow: InfoWindow(title: 'Le Coucou'),
-    icon: BitmapDescriptor.defaultMarkerWithHue(
-      BitmapDescriptor.hueViolet,
-    ),
-  );
-}
-

lib/Components/Map/map_context.dart

@@ -0,0 +1,16 @@
+import 'package:flutter/material.dart';
+import 'package:google_maps_flutter/google_maps_flutter.dart';
+import 'package:tablet_app/Models/map-marker.dart';
+
+class MapContext with ChangeNotifier {
+  MapMarker _selectedMarker;
+
+  MapContext(this._selectedMarker);
+
+  getSelectedMarker() => _selectedMarker;
+  setSelectedMarker(MapMarker selectedMarker) {
+    _selectedMarker = selectedMarker;
+    notifyListeners();
+  }
+
+}

lib/Components/Map/map_view.dart

@@ -0,0 +1,174 @@
+import 'dart:async';
+import 'dart:typed_data';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:google_maps_flutter/google_maps_flutter.dart';
+import 'package:provider/provider.dart';
+import 'package:tablet_app/Components/Map/marker_view.dart';
+import 'package:tablet_app/Models/map-marker.dart';
+import 'dart:ui' as ui;
+import 'package:flutter/widgets.dart';
+
+import 'map_context.dart';
+
+Set<Marker> markers = {};
+List<MapMarker> markersList = List();
+
+class MapViewWidget extends StatefulWidget {
+  MapViewWidget();
+
+  @override
+  _MapViewWidget createState() => _MapViewWidget();
+}
+
+class _MapViewWidget extends State<MapViewWidget> {
+
+  Completer<GoogleMapController> _controller = Completer();
+
+
+  Future<Uint8List> getBytesFromAsset(String path, int width) async {
+    ByteData data = await rootBundle.load(path);
+    ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(),
+        targetWidth: width);
+    ui.FrameInfo fi = await codec.getNextFrame();
+    return (await fi.image.toByteData(format: ui.ImageByteFormat.png))
+        .buffer
+        .asUint8List();
+  }
+
+  void getMarkers(mapContext) async {
+    /*final Uint8List userMarkerIcon =
+    await getBytesFromAsset('assets/normalMarker.png', 75);
+*/
+    final Uint8List selectedMarkerIcon =
+    await getBytesFromAsset('assets/images/strawberry.png', 50);
+
+    markers = {};
+
+    // TODO Call manager to fetch saved markers
+
+    markersList.add(MapMarker(
+      id: 1,
+      title: "La Grande Poste",
+      description: "The Algiers central post office is an office building for postal services located at Alger Centre municipality in Algiers, Algeria",
+      image: "https://www.dzbreaking.com/wp-content/uploads/2018/03/2000.png",
+      text: "hello asticot",
+      latitude: "36.752887",
+      longitude: "3.042048"
+    ));
+    markersList.add(MapMarker(
+      id: 2,
+      title: "Mosquee Ketchaoua",
+      description: "The Ketchaoua Mosque is a mosque in Algiers, the capital of Algeria. It was built during the Ottoman rule in the 17th century and is located at the foot of the Casbah, which is a UNESCO World Heritage Site",
+      image: "https://ttnotes.com/images/makam-echahid-algiers.jpg",
+      latitude: "36.7850",
+      longitude: "3.0608"
+    ));
+    markersList.add(MapMarker(
+      id: 3,
+      title: "The shrine of the martyr",
+      description: "The Maqam Echahid is a concrete monument commemorating the Algerian war for independence. The monument was opened in 1982 on the 20th anniversary of Algeria's independence",
+      image: "https://www.airfrance.co.uk/GB/common/common/img/tbaf/news/ALG/la-mosquee-ketchaoua-l-histoire-avec-un-grand-h/ALG-la-mosquee-ketchaoua-l-histoire-avec-un-grand-h-2_1-1024x512.jpg",
+      latitude: "36.7456",
+      longitude: "3.0698"
+    ));
+
+    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,
+                    text: '',
+                    longitude: element.longitude,
+                    latitude: element.latitude
+                  ));
+              });
+            },
+            infoWindow: InfoWindow(title: element.title)));
+      }
+    });
+  }
+
+  @override
+  void initState() {
+    print(markers);
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    // TODO: implement dispose
+    super.dispose();
+  }
+
+  static final CameraPosition _kGooglePlex = CameraPosition(
+    target: LatLng(50.4167344, 4.879165),
+    zoom: 0.4746,
+  );
+
+  /*static final CameraPosition _kLake = CameraPosition(
+      bearing: 192.8334901395799,
+      target: LatLng(37.43296265331129, -122.08832357078792),
+      tilt: 59.440717697143555,
+      zoom: 59.151926040649414);*/
+
+  @override
+  Widget build(BuildContext context) {
+    final mapContext = Provider.of<MapContext>(context);
+    getMarkers(mapContext);
+    return Stack(
+          children: <Widget>[
+            GoogleMap(
+              mapType: MapType.hybrid,
+              mapToolbarEnabled: false,
+              initialCameraPosition: _kGooglePlex,
+              onMapCreated: (GoogleMapController controller) {
+                _controller.complete(controller);
+              },
+              markers: markers,
+              onTap: (LatLng location) {
+                setState(() {
+                  print(location);
+                  mapContext.setSelectedMarker(
+                    new MapMarker(
+                        title: '',
+                        description: '',
+                        text: '',
+                        longitude: null,
+                        latitude: null
+                    ));
+                });
+              },
+            ),
+            MarkerViewWidget()
+          ]
+      /*floatingActionButton: FloatingActionButton.extended(
+        onPressed: _goToTheLake,
+        label: Text('To the lake!'),
+        icon: Icon(Icons.directions_boat),
+      ),*/
+    );
+  }
+
+  /*Future<void> _goToTheLake() async {
+    final GoogleMapController controller = await _controller.future;
+    controller.animateCamera(CameraUpdate.newCameraPosition(_kLake));
+  }*/
+
+}
+

lib/Components/Map/markerInfo.dart

@@ -1,64 +0,0 @@
-import 'dart:async';
-import 'package:flutter/material.dart';
-
-import '../../constants.dart';
-
-class MarkerInfoWidget extends StatefulWidget {
-  final String title;
-  final String description;
-  final String text;
-  MarkerInfoWidget({this.title, this.description, this.text});
-
-  @override
-  _MarkerInfoWidget createState() => _MarkerInfoWidget();
-}
-
-class _MarkerInfoWidget extends State<MarkerInfoWidget> {
-
-  @override
-  Widget build(BuildContext context) {
-    Size size = MediaQuery.of(context).size;
-    return new AnimatedPositioned(
-      duration: const Duration(milliseconds: 1500),
-      curve: Curves.easeInOutSine,
-      right: 160, // TODO
-      top: 150,  // TODO
-      child: Container(
-        width: size.width * 0.29,
-        height: size.height * 0.6,
-        margin: EdgeInsets.symmetric(vertical: 3, horizontal: 4),
-        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: Column(
-            crossAxisAlignment: CrossAxisAlignment.center,
-            mainAxisAlignment: MainAxisAlignment.spaceAround,
-            children: [
-              Text(widget.title),
-              Text(widget.description),
-              Text(widget.text),
-              Column(
-                    crossAxisAlignment: CrossAxisAlignment.center,
-                    mainAxisAlignment: MainAxisAlignment.spaceAround,
-                    children: [
-                      Text('Sub menu 1'),
-                      Text('Sub menu 2'),
-                    ]
-                )
-            ]
-        ),
-      )
-    );
-  }
-}
-

lib/Components/Map/marker_view.dart

@@ -0,0 +1,107 @@
+import 'dart:async';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:tablet_app/Components/Map/map_context.dart';
+import 'package:tablet_app/Models/map-marker.dart';
+
+import '../../constants.dart';
+
+class MarkerViewWidget extends StatefulWidget {
+  MarkerViewWidget();
+
+  @override
+  _MarkerInfoWidget createState() => _MarkerInfoWidget();
+}
+
+class _MarkerInfoWidget extends State<MarkerViewWidget> {
+  Size sizeScreen = new Size(1080.0, 1920.0); // Tablet resolution
+
+  @override
+  Widget build(BuildContext context) {
+    Size size = MediaQuery.of(context).size;
+    final mapContext = Provider.of<MapContext>(context);
+
+    return new AnimatedPositioned(
+      duration: const Duration(milliseconds: 1500),
+      curve: Curves.easeInOutSine,
+      right: 140, // 140
+      top: 150,  // 150
+      child: Visibility(
+        visible: mapContext.getSelectedMarker().longitude != null,
+        child: Container(
+          width: size.width * 0.29,
+          height: size.height * 0.6,
+          margin: EdgeInsets.symmetric(vertical: 3, horizontal: 4),
+          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: Stack(
+              children: <Widget> [
+                Positioned(
+                  right: 15,
+                  top: 15,
+                  child: InkWell(
+                    onTap: () {
+                      setState(() {
+                        mapContext.setSelectedMarker(new MapMarker(longitude: null, latitude: null, title: '', description: '', text: ''));
+                      });
+                    },
+                    child: Container(
+                      width: 50,
+                      height: 50,
+                      decoration: BoxDecoration(
+                        color: kMainGrey,
+                        shape: BoxShape.circle,
+                        boxShadow: [
+                          BoxShadow(
+                            color: kMainGrey,
+                            spreadRadius: 0.5,
+                            blurRadius: 1.1,
+                            offset: Offset(0, 1.1), // changes position of shadow
+                          ),
+                        ],
+                      ),
+                      child: Icon(
+                        Icons.close,
+                        size: 35,
+                        color: Colors.white,
+                      ),
+                    ),
+                  ),
+                ),
+                Center(
+                  child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.center,
+                      mainAxisAlignment: MainAxisAlignment.spaceAround,
+                      children: [
+                        Text(mapContext.getSelectedMarker().title),
+                        Text(mapContext.getSelectedMarker().description),
+                        Text(mapContext.getSelectedMarker().text),
+                        Column(
+                            crossAxisAlignment: CrossAxisAlignment.center,
+                            mainAxisAlignment: MainAxisAlignment.spaceAround,
+                            children: [
+                              Text('Sub menu 1'),
+                              Text('Sub menu 2'),
+                            ]
+                        )
+                      ]
+                  ),
+                ),
+              ])
+        ),
+      )
+    );
+  }
+}
+

lib/Models/map-marker.dart

@@ -0,0 +1,23 @@
+class MapMarker {
+  int id;
+  String title;
+  String description;
+  String image;
+  String text;
+  String latitude;
+  String longitude;
+
+  MapMarker({this.id, this.title, this.description, this.image, this.text, this.latitude, this.longitude});
+
+  factory MapMarker.fromJson(Map<String, dynamic> json) {
+    return new MapMarker(
+      id: json['id'] as int,
+      title: json['title'] as String,
+      description: json['description'] as String,
+      image: json['image'] as String,
+      text: json['text'] as String,
+      latitude: json['latitude'] as String,
+      longitude: json['longitude'] as String,
+    );
+  }
+}

lib/main.dart

@@ -3,11 +3,14 @@ import 'dart:collection';
 
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:provider/provider.dart';
 import 'package:webview_flutter/webview_flutter.dart';
 
+import 'Components/Map/map_context.dart';
 import 'Components/custom_clipper.dart';
-import 'Components/Map/mapView.dart';
+import 'Components/Map/map_view.dart';
 import 'Components/webView.dart';
+import 'Models/map-marker.dart';
 import 'constants.dart';
 
 void main() {
@@ -286,12 +289,16 @@ class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin
                                 child: Container(
                                   width: size.width,
                                   height: size.height,
+                                  child: ChangeNotifierProvider<MapContext>(
+                                    create: (_) => MapContext(new MapMarker(latitude: null, longitude: null, title: '', description: '', text: '')),
                                     child: MapViewWidget()/*FutureBuilder(
                                       future: _url,
                                       builder: (BuildContext context, AsyncSnapshot snapshot) => snapshot.hasData
                                           ? WebViewWidget(url: snapshot.data,)
                                           : CircularProgressIndicator()),*/
-                                  )),
+                                  ),
+                                  ),
+                              ),
                             ),
                           ),
                       ),
@@ -344,11 +351,11 @@ class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin
             ],
           ),
         ),
-        floatingActionButton: FloatingActionButton(
+        /*floatingActionButton: FloatingActionButton(
           onPressed: _incrementCounter,
           tooltip: 'Increment',
           child: Icon(Icons.add),
-        ),
+        ),*/
       ),
     );
   }

pubspec.lock

@@ -80,14 +80,14 @@ packages:
       name: google_maps_flutter
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.1"
+    version: "1.2.0"
   google_maps_flutter_platform_interface:
     dependency: transitive
     description:
       name: google_maps_flutter_platform_interface
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0"
+    version: "1.2.0"
   matcher:
     dependency: transitive
     description:
@@ -102,6 +102,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.3.0-nullsafety.5"
+  nested:
+    dependency: transitive
+    description:
+      name: nested
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.0.4"
   path:
     dependency: transitive
     description:
@@ -116,6 +123,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.3"
+  provider:
+    dependency: "direct main"
+    description:
+      name: provider
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.3.3"
   sky_engine:
     dependency: transitive
     description: flutter

pubspec.yaml

@@ -25,6 +25,7 @@ dependencies:
     sdk: flutter
   webview_flutter: ^1.0.7
   google_maps_flutter: ^1.1.1
+  provider: ^4.3.2
 
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.