tablet-app/lib/Components/Map/map_view.dart

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.add(MapMarker(
        id: 4,
        title: "Musée de la fraise",
        description: "Musée de la fraise wépion",
        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: "50.416639",
        longitude: "4.879169"
    ));

    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.416639, 4.879169),
    zoom: 25.55,
  );

  /*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));
  }*/

}