Add map widget (Google Map) + overlay marker info (WIP)

android/app/src/main/AndroidManifest.xml

@@ -37,5 +37,7 @@
         <meta-data
             android:name="flutterEmbedding"
             android:value="2" />
+       <meta-data android:name="com.google.android.geo.API_KEY"
+           android:value="AIzaSyDg6ApuZb6TRsauIyHJ9-XVwGYeh7MsWXE"/>
     </application>
 </manifest>

lib/Components/Map/mapView.dart

@@ -0,0 +1,225 @@
+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/markerInfo.dart

@@ -0,0 +1,64 @@
+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/constants.dart

@@ -12,6 +12,8 @@ const kTextRed = Color(0xFFba0505);
 const kBackgroundGrey = Color(0xFFb5b7b9);
 const kBackgroundSecondGrey = Color(0xFF5b5b63);
 
+const kBackgroundLight = Color(0xfff3f3f3);
+
 /*
 const kTextStyle = TextStyle(
   fontSize: 23,

lib/main.dart

@@ -1,10 +1,12 @@
 import 'dart:async';
+import 'dart:collection';
 
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:webview_flutter/webview_flutter.dart';
 
 import 'Components/custom_clipper.dart';
+import 'Components/Map/mapView.dart';
 import 'Components/webView.dart';
 import 'constants.dart';
 
@@ -284,11 +286,11 @@ class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin
                                 child: Container(
                                   width: size.width,
                                   height: size.height,
-                                  child: FutureBuilder(
+                                  child: MapViewWidget()/*FutureBuilder(
                                       future: _url,
                                       builder: (BuildContext context, AsyncSnapshot snapshot) => snapshot.hasData
                                           ? WebViewWidget(url: snapshot.data,)
-                                          : CircularProgressIndicator()),
+                                          : CircularProgressIndicator()),*/
                                   )),
                               ),
                             ),

pubspec.lock

@@ -62,11 +62,32 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_plugin_android_lifecycle:
+    dependency: transitive
+    description:
+      name: flutter_plugin_android_lifecycle
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.11"
   flutter_test:
     dependency: "direct dev"
     description: flutter
     source: sdk
     version: "0.0.0"
+  google_maps_flutter:
+    dependency: "direct main"
+    description:
+      name: google_maps_flutter
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.1"
+  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"
   matcher:
     dependency: transitive
     description:
@@ -88,6 +109,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.8.0-nullsafety.2"
+  plugin_platform_interface:
+    dependency: transitive
+    description:
+      name: plugin_platform_interface
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.3"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -114,6 +142,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.1.0-nullsafety.2"
+  stream_transform:
+    dependency: transitive
+    description:
+      name: stream_transform
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.2.0"
   string_scanner:
     dependency: transitive
     description:

pubspec.yaml

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