Skip to content
Snippets Groups Projects
Commit 809ddda1 authored by Sara Savanovic Djordjevic's avatar Sara Savanovic Djordjevic
Browse files

update: merger map and details widget

parent 831d0ad9
No related branches found
No related tags found
No related merge requests found
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'pages/default_page.dart'; import 'pages/default_page.dart';
import 'pages/marker_data.dart';
void main() { void main() {
runApp(MyApp()); runApp(MyApp());
......
...@@ -3,7 +3,6 @@ import 'dart:convert'; ...@@ -3,7 +3,6 @@ import 'dart:convert';
import 'dart:io'; import 'dart:io';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'widgets/map_widget.dart'; import 'widgets/map_widget.dart';
import 'widgets/details_widget.dart';
import 'marker_data.dart'; import 'marker_data.dart';
import 'consts.dart'; import 'consts.dart';
...@@ -79,9 +78,7 @@ class _DefaultPageState extends State<DefaultPage> { ...@@ -79,9 +78,7 @@ class _DefaultPageState extends State<DefaultPage> {
), ),
body: ListView( body: ListView(
children: [ children: [
MapContainerWidget(markerList: markerList), MapContainerWidget(markerList: markerList),// Return a specific list element
const SizedBox(height: 30), // Padding between widgets
DetailsContainerWidget(markerData: markerList.first),
], ],
), ),
); );
......
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../marker_data.dart';
class DetailsContainerWidget extends StatefulWidget {
const DetailsContainerWidget({Key? key, required this.markerData}) : super(key: key);
final MarkerTemplate markerData;
@override
_DetailsContainerWidgetState createState() => _DetailsContainerWidgetState();
}
class _DetailsContainerWidgetState extends State<DetailsContainerWidget> {
@override
Widget build(BuildContext context) {
double screenWidth = MediaQuery.of(context).size.width;
double boxWidth = 0.9;
double boxHeight = 1.5;
return Container(
width: screenWidth * boxWidth,
height: screenWidth * boxHeight,
color: Colors.blue,
child: Align(
alignment: Alignment.topLeft,
child: Padding(
padding: const EdgeInsets.only(top: 10, left: 10), // Edge padding, text
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Ice thickness details',
style: TextStyle(fontSize: 30, color: Colors.black),
),
Text(
'Latitude: ${widget.markerData.geoData.latitude}',
style: TextStyle(fontSize: 20, color: Colors.black),
),
Text(
'Longitude: ${widget.markerData.geoData.longitude}',
style: TextStyle(fontSize: 20, color: Colors.black),
),
// Add more information widgets here
],
),
),
),
);
}
}
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import '../marker_data.dart'; import '../marker_data.dart';
import 'package:flutter_map/flutter_map.dart'; import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart'; import 'package:latlong2/latlong.dart';
class MapContainerWidget extends StatelessWidget { class MapContainerWidget extends StatefulWidget {
final List<MarkerTemplate> markerList; final List<MarkerTemplate> markerList;
const MapContainerWidget({super.key, required this.markerList}); const MapContainerWidget({Key? key, required this.markerList}) : super(key: key);
@override
_MapContainerWidgetState createState() => _MapContainerWidgetState();
}
class _MapContainerWidgetState extends State<MapContainerWidget> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
double screenWidth = MediaQuery MarkerTemplate? selectedMarker;
.of(context) double screenWidth = MediaQuery.of(context).size.width;
.size
.width;
double boxWidth = 0.9; double boxWidth = 0.9;
double boxHeight = 1.5; double boxHeight = 1.5;
return Container( return Column(
width: screenWidth * boxWidth, children: [
height: screenWidth * boxHeight, Container(
color: Colors.blue, width: screenWidth * boxWidth,
child: FlutterMap( height: screenWidth * boxHeight,
options: MapOptions( color: Colors.blue,
center: LatLng(60.7666, 10.8471), child: FlutterMap(
zoom: 9.0, options: MapOptions(
), center: LatLng(60.7666, 10.8471),
children: [ zoom: 9.0,
TileLayer( ),
urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", children: [
subdomains: const ['a', 'b', 'c'], TileLayer(
), urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
MarkerLayer( subdomains: const ['a', 'b', 'c'],
markers: markerList.map((MarkerTemplate markerTemplate) { ),
return Marker( MarkerLayer(
width: markerTemplate.size, markers: widget.markerList.map((MarkerTemplate markerTemplate) {
height: markerTemplate.size, return Marker(
point: markerTemplate.location, width: markerTemplate.size,
builder: (ctx) => height: markerTemplate.size,
GestureDetector( point: markerTemplate.location,
builder: (ctx) => GestureDetector(
onTap: () { onTap: () {
setState(() {
selectedMarker = markerTemplate;
});
// NB: temporary print // NB: temporary print
print('Icon tapped'); print('Icon tapped: ${selectedMarker?.size}');
// NB: trigger function to add contents to the next box
}, },
child: Image.asset( child: Image.asset(
'assets/icons/circle-red.png', 'assets/icons/circle-red.png',
...@@ -53,25 +59,56 @@ class MapContainerWidget extends StatelessWidget { ...@@ -53,25 +59,56 @@ class MapContainerWidget extends StatelessWidget {
height: markerTemplate.size, height: markerTemplate.size,
), ),
), ),
); );
}).toList(), }).toList(),
),
/*PolygonLayer(
polygons: [
Polygon(
points: [
LatLng(60.7600, 10.8000),
LatLng(60.7600, 11.0000),
LatLng(60.7000, 11.0000),
LatLng(60.7000, 10.8000),
],
color: Colors.blue,
isFilled: true,
),
],
),*/
],
),
),
const SizedBox(height: 30), // Padding between containers
Container(
width: screenWidth * boxWidth,
height: screenWidth * boxHeight,
color: const Color(0xFF64B5F6),
child: Align(
alignment: Alignment.topLeft,
child: Padding(
padding: const EdgeInsets.only(top: 20, left: 20), // Edge padding, text
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Ice stats',
style: TextStyle(fontSize: 30, color: Colors.black),
),
Text(
'Latitude: ${selectedMarker?.size}',
style: const TextStyle(fontSize: 20, color: Colors.black),
),
Text(
'Longitude: ${selectedMarker?.geoData.longitude}',
style: const TextStyle(fontSize: 20, color: Colors.black),
),
],
),
),
), ),
/*PolygonLayer( ),
polygons: [ ],
Polygon(
points: [
LatLng(60.7600, 10.8000),
LatLng(60.7600, 11.0000),
LatLng(60.7000, 11.0000),
LatLng(60.7000, 10.8000),
],
color: Colors.blue,
isFilled: true,
),
],
),*/
],
),
); );
} }
} }
\ No newline at end of file
...@@ -155,6 +155,14 @@ packages: ...@@ -155,6 +155,14 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "2.0.0" version: "2.0.0"
nested:
dependency: transitive
description:
name: nested
sha256: "03bac4c528c64c95c722ec99280375a6f2fc708eec17c7b3f07253b626cd2a20"
url: "https://pub.dev"
source: hosted
version: "1.0.0"
path: path:
dependency: transitive dependency: transitive
description: description:
...@@ -179,6 +187,14 @@ packages: ...@@ -179,6 +187,14 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "2.1.0" version: "2.1.0"
provider:
dependency: "direct main"
description:
name: provider
sha256: "59471e0a4595e264625d3496af567ac85bdae1148ec985aff1e0555786f53ecf"
url: "https://pub.dev"
source: hosted
version: "5.0.0"
sky_engine: sky_engine:
dependency: transitive dependency: transitive
description: flutter description: flutter
......
...@@ -12,6 +12,7 @@ dependencies: ...@@ -12,6 +12,7 @@ dependencies:
flutter_map: ^4.0.0 flutter_map: ^4.0.0
http: ^0.13.3 http: ^0.13.3
latlong2: ^0.8.2 latlong2: ^0.8.2
provider: ^5.0.0
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment