From a00eeff860cfcef850027c899dc701b6b861ab8a Mon Sep 17 00:00:00 2001
From: Sara <sarasdj@stud.ntnu.no>
Date: Fri, 9 Feb 2024 15:13:12 +0100
Subject: [PATCH] update: make map and box into separate widgets
---
app/lib/pages_and_widgets/default_page.dart | 188 +++++++++++---------
1 file changed, 104 insertions(+), 84 deletions(-)
diff --git a/app/lib/pages_and_widgets/default_page.dart b/app/lib/pages_and_widgets/default_page.dart
index 1713e1d0..15471ac0 100644
--- a/app/lib/pages_and_widgets/default_page.dart
+++ b/app/lib/pages_and_widgets/default_page.dart
@@ -71,98 +71,118 @@ class _DefaultPageState extends State<DefaultPage> {
super.dispose();
}
- // Main widget
@override
Widget build(BuildContext context) {
- double screenWidth = MediaQuery.of(context).size.width;
- double boxWidth = 0.9;
- double boxHeight = 1.5;
- const double markerSize = 20;
-
return Scaffold(
appBar: AppBar(
- title: const Text('IceMap'),
+ title: Text('My Page'),
),
- body: Center(
- child: SingleChildScrollView(
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: <Widget>[
- Container( // Map container
- width: screenWidth * boxWidth,
- height: screenWidth * boxHeight,
- color: Colors.blue,
- child: FlutterMap(
- options: MapOptions(
- center: LatLng(60.7666, 10.8471),
- zoom: 9.0,
- ),
- children: [
- TileLayer(
- urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
- subdomains: const ['a', 'b', 'c'],
- ),
- MarkerLayer(
- // Dynamically allocate markers based on a list
- markers: markerList.map((MarkerTemplate MarkerTemplate) {
- return Marker(
- width: MarkerTemplate.size,
- height: MarkerTemplate.size,
- point: MarkerTemplate.location,
- builder: (ctx) => GestureDetector(
- onTap: () {
- // NB: temporary print
- print('Icon tapped');
- // NB: trigger function to add contents to the next box
- },
- child: Image.asset(
- 'assets/icons/circle-red.png', // Path to your custom icon asset
- color: MarkerTemplate.color,
- width: MarkerTemplate.size,
- height: MarkerTemplate.size,
- ),
- ),
- );
- }).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: 20),
- Container( // Detailed info container
- width: screenWidth * boxWidth,
- height: screenWidth * boxHeight,
- color: Colors.blue,
- child: const Align(
- alignment: Alignment.topLeft,
- child: Padding(
- padding: EdgeInsets.only(top: 10, left: 10), // Edge padding, text
- child: Text(
- 'Placeholder text',
- style: TextStyle(fontSize: 20, color: Colors.black),
+ body: ListView(
+ children: [
+ MapContainerWidget(markerList: markerList),
+ const SizedBox(height: 30), // Padding between widgets
+ DetailedInfoContainerWidget(),
+ ],
+ ),
+ );
+ }
+}
+
+class MapContainerWidget extends StatelessWidget {
+ final List<MarkerTemplate> markerList;
+
+ const MapContainerWidget({super.key, required this.markerList});
+
+ @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: FlutterMap(
+ options: MapOptions(
+ center: LatLng(60.7666, 10.8471),
+ zoom: 9.0,
+ ),
+ children: [
+ TileLayer(
+ urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+ subdomains: const ['a', 'b', 'c'],
+ ),
+ MarkerLayer(
+ markers: markerList.map((MarkerTemplate markerTemplate) {
+ return Marker(
+ width: markerTemplate.size,
+ height: markerTemplate.size,
+ point: markerTemplate.location,
+ builder: (ctx) =>
+ GestureDetector(
+ onTap: () {
+ // NB: temporary print
+ print('Icon tapped');
+ // NB: trigger function to add contents to the next box
+ },
+ child: Image.asset(
+ 'assets/icons/circle-red.png',
+ // Path to your custom icon asset
+ color: markerTemplate.color,
+ width: markerTemplate.size,
+ height: markerTemplate.size,
+ ),
),
- ),
- ),
- ),
- const SizedBox(height: 20),
- ],
+ );
+ }).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,
+ ),
+ ],
+ ),*/
+ ],
),
);
}
}
+
+class DetailedInfoContainerWidget extends StatelessWidget {
+ const DetailedInfoContainerWidget({super.key});
+
+ @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: const Align(
+ alignment: Alignment.topLeft,
+ child: Padding(
+ padding: EdgeInsets.only(top: 10, left: 10), // Edge padding, text
+ child: Text(
+ 'Placeholder text',
+ style: TextStyle(fontSize: 20, color: Colors.black),
+ ),
+ ),
+ ),
+ );
+ }
+ }
\ No newline at end of file
--
GitLab