UNOV/tablet-app
1
0
Fork 0
mirror of https://bitbucket.org/FransoletThomas/tablet-app.git synced 2025-12-06 00:21:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Thomas Fransolet 2021-02-09 18:41:56 +01:00
parent cdece56ccd
commit db1a95d1b2
10 changed files with 349 additions and 296 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/strawberry.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

225
lib/Components/Map/mapView.dart
View File

@ -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,
),
);
}

16
lib/Components/Map/map_context.dart Normal file
View File

@ -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();
}
}

174
lib/Components/Map/map_view.dart Normal file
View File

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

64
lib/Components/Map/markerInfo.dart
View File

@ -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'),
]
)
]
),
)
);
}
}

107
lib/Components/Map/marker_view.dart Normal file
View File

@ -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'),
]
)
]
),
),
])
),
)
);
}
}

23
lib/Models/map-marker.dart Normal file
View File

@ -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,
);
}
}

17
lib/main.dart
View File

@ -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<MyHomePage> with TickerProviderStateMixin
child: Container(
width: size.width,
height: size.height,
child: MapViewWidget()/*FutureBuilder(
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),
),
),*/
),
);
}

18
pubspec.lock
View File

@ -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

1
pubspec.yaml
View File

@ -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.