diff --git a/assets/images/strawberry.png b/assets/images/strawberry.png new file mode 100644 index 0000000..243117c Binary files /dev/null and b/assets/images/strawberry.png differ diff --git a/lib/Components/Map/mapView.dart b/lib/Components/Map/mapView.dart deleted file mode 100644 index 308a2cf..0000000 --- a/lib/Components/Map/mapView.dart +++ /dev/null @@ -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 markers = {}; -List 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 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 { - - Completer _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: [ - 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 _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, - ), - ); -} - diff --git a/lib/Components/Map/map_context.dart b/lib/Components/Map/map_context.dart new file mode 100644 index 0000000..697d1a6 --- /dev/null +++ b/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(); + } + +} \ No newline at end of file diff --git a/lib/Components/Map/map_view.dart b/lib/Components/Map/map_view.dart new file mode 100644 index 0000000..e9e22d5 --- /dev/null +++ b/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 markers = {}; +List markersList = List(); + +class MapViewWidget extends StatefulWidget { + MapViewWidget(); + + @override + _MapViewWidget createState() => _MapViewWidget(); +} + +class _MapViewWidget extends State { + + Completer _controller = Completer(); + + + Future 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(context); + getMarkers(mapContext); + return Stack( + children: [ + 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 _goToTheLake() async { + final GoogleMapController controller = await _controller.future; + controller.animateCamera(CameraUpdate.newCameraPosition(_kLake)); + }*/ + +} + diff --git a/lib/Components/Map/markerInfo.dart b/lib/Components/Map/markerInfo.dart deleted file mode 100644 index 7dd1084..0000000 --- a/lib/Components/Map/markerInfo.dart +++ /dev/null @@ -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 { - - @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'), - ] - ) - ] - ), - ) - ); - } -} - diff --git a/lib/Components/Map/marker_view.dart b/lib/Components/Map/marker_view.dart new file mode 100644 index 0000000..9423a4c --- /dev/null +++ b/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 { + 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(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: [ + 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'), + ] + ) + ] + ), + ), + ]) + ), + ) + ); + } +} + diff --git a/lib/Models/map-marker.dart b/lib/Models/map-marker.dart new file mode 100644 index 0000000..1034df3 --- /dev/null +++ b/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 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, + ); + } +} \ No newline at end of file diff --git a/lib/main.dart b/lib/main.dart index 4b892ad..f5aff87 100644 --- a/lib/main.dart +++ b/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,15 +289,19 @@ class _MyHomePageState extends State with TickerProviderStateMixin child: Container( width: size.width, height: size.height, - child: MapViewWidget()/*FutureBuilder( + child: ChangeNotifierProvider( + 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 with TickerProviderStateMixin ], ), ), - floatingActionButton: FloatingActionButton( + /*floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), - ), + ),*/ ), ); } diff --git a/pubspec.lock b/pubspec.lock index 6e2a3d3..d0bf98f 100644 --- a/pubspec.lock +++ b/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 diff --git a/pubspec.yaml b/pubspec.yaml index 6512e38..660939b 100644 --- a/pubspec.yaml +++ b/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.