From 6866aef9e12e7be6ac18e0a41003bff61bb8fec4 Mon Sep 17 00:00:00 2001
From: Sara <sarasdj@stud.ntnu.no>
Date: Mon, 12 Feb 2024 13:00:16 +0100
Subject: [PATCH] update: chart centering and rounded corners
---
app/lib/pages/default_page.dart | 1 +
app/lib/pages/widgets/map_widget.dart | 354 +++++++++++++-------------
2 files changed, 176 insertions(+), 179 deletions(-)
diff --git a/app/lib/pages/default_page.dart b/app/lib/pages/default_page.dart
index 8bdf5687..0cb4318d 100644
--- a/app/lib/pages/default_page.dart
+++ b/app/lib/pages/default_page.dart
@@ -73,6 +73,7 @@ class _DefaultPageState extends State<DefaultPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
+ backgroundColor: const Color(0xFFCAF0F8),
appBar: AppBar(
title: Text('IceMap'),
),
diff --git a/app/lib/pages/widgets/map_widget.dart b/app/lib/pages/widgets/map_widget.dart
index e98d84d1..dccf3e8e 100644
--- a/app/lib/pages/widgets/map_widget.dart
+++ b/app/lib/pages/widgets/map_widget.dart
@@ -30,197 +30,193 @@ class _MapContainerWidgetState extends State<MapContainerWidget> {
double barWidth = 30; // Width for bars in bar chart
const double contPadding = 30; // Container padding space
- double screenWidth = MediaQuery.of(context).size.width;
- double boxWidth = 0.9;
- double boxHeight = 1.5;
+ return LayoutBuilder(
+ builder: (context, constraints) {
+ double screenWidth = constraints.maxWidth;
+ double boxWidth = 0.86;
+ double boxHeight = 1.5;
- return Column(
- children: [
- 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: widget.markerList.map((MarkerTemplate markerTemplate) {
- return Marker(
- width: markerTemplate.size,
- height: markerTemplate.size,
- point: markerTemplate.location,
- builder: (ctx) => GestureDetector(
- onTap: () {
- setState(() {
- selectedMarker = markerTemplate;
- });
- // NB: temporary print
- print('Icon tapped: ${selectedMarker?.size}');
- },
- 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: contPadding), // Padding between containers
- Container(
- //width: screenWidth * boxWidth,
- height: screenWidth * boxHeight*1.5, // NB: make dynamic
- 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),
+ return Column(
+ children: [
+ const SizedBox(height: contPadding),
+ ClipRRect(
+ borderRadius: BorderRadius.circular(20),
+ child: SizedBox(
+ width: screenWidth * boxWidth,
+ height: screenWidth * boxHeight,
+ child: FlutterMap(
+ options: MapOptions(
+ center: LatLng(60.7666, 10.8471),
+ zoom: 9.0,
),
- Text(
- 'Latitude: ${selectedMarker?.geoData.latitude}',
- style: const TextStyle(fontSize: 20, color: Colors.black),
- ),
- Text(
- 'Longitude: ${selectedMarker?.geoData.longitude}',
- style: const TextStyle(fontSize: 20, color: Colors.black),
- ),
- const SizedBox(height: contPadding),
- SizedBox(
- width: screenWidth-screenWidth/10,
- height: 200,
- child: LineChart(
- LineChartData(
- backgroundColor: const Color(0xFFCAF0F8),
- titlesData: FlTitlesData(
- leftTitles: SideTitles(showTitles: true),
- bottomTitles: SideTitles(showTitles: true),
- ),
- borderData: FlBorderData(
- show: true,
- ),
- minX: 0,
- maxX: 4,
- minY: 0,
- maxY: 50,
- lineBarsData: [
- LineChartBarData(
- spots: chartData,
- isCurved: true,
- colors: [const Color(0xFF0077B6)],
- ),
- ],
- ),
+ children: [
+ TileLayer(
+ urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+ subdomains: const ['a', 'b', 'c'],
),
- ),
- const SizedBox(height: contPadding),
- SizedBox(
- width: screenWidth-screenWidth/10,
- height: 200,
- child: BarChart(
- BarChartData(
- alignment: BarChartAlignment.spaceAround,
- maxY: 20, // Maximum y-axis value
- barTouchData: BarTouchData(enabled: false),
- titlesData: FlTitlesData(
- bottomTitles: SideTitles(
- showTitles: true,
- getTextStyles: (value) => const TextStyle(color: Colors.black, fontSize: 14),
- margin: 10,
- getTitles: (value) {
- switch (value.toInt()) {
- case 0:
- return 'Placeholder1';
- case 1:
- return 'Placeholder2';
- case 2:
- return 'Placeholder3';
- default:
- return '';
- }
+ MarkerLayer(
+ markers: widget.markerList.map((MarkerTemplate markerTemplate) {
+ return Marker(
+ width: markerTemplate.size,
+ height: markerTemplate.size,
+ point: markerTemplate.location,
+ builder: (ctx) => GestureDetector(
+ onTap: () {
+ setState(() {
+ selectedMarker = markerTemplate;
+ });
+ // NB: temporary print
+ print('Icon tapped: ${selectedMarker?.size}');
},
+ child: Image.asset(
+ 'assets/icons/circle-red.png',
+ // Path to your custom icon asset
+ color: markerTemplate.color,
+ width: markerTemplate.size,
+ height: markerTemplate.size,
+ ),
),
- leftTitles: SideTitles(
- showTitles: true,
- getTextStyles: (value) => const TextStyle(color: Colors.black, fontSize: 14),
- margin: 10,
- reservedSize: 30,
- interval: 5,
- ),
+ );
+ }).toList(),
+ ),
+ ],
+ ),
+ ),
+ ),
+ const SizedBox(height: contPadding), // Padding between containers
+ ClipRRect(
+ borderRadius: BorderRadius.circular(20),
+ child: Container(
+ width: screenWidth * boxWidth,
+ height: screenWidth * boxHeight * 1.5, // NB: make dynamic
+ color: const Color(0xFF00B4D8),
+ 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?.geoData.latitude}',
+ style: const TextStyle(fontSize: 20, color: Colors.black),
),
- borderData: FlBorderData(
- show: true,
- border: Border.all(color: Colors.black, width: 1),
+ Text(
+ 'Longitude: ${selectedMarker?.geoData.longitude}',
+ style: const TextStyle(fontSize: 20, color: Colors.black),
),
- barGroups: [
- BarChartGroupData(
- x: 0,
- barRods: [
- BarChartRodData(
- y: 15, // Bar height
- width: barWidth, // Bar width
+ const SizedBox(height: contPadding),
+ SizedBox(
+ width: screenWidth * boxWidth - contPadding * 2,
+ height: 200,
+ child: LineChart(
+ LineChartData(
+ backgroundColor: const Color(0xFFCAF0F8),
+ titlesData: FlTitlesData(
+ leftTitles: SideTitles(showTitles: true),
+ bottomTitles: SideTitles(showTitles: true),
),
- ],
- ),
- BarChartGroupData(
- x: 1,
- barRods: [
- BarChartRodData(
- y: 10,
- width: barWidth,
+ borderData: FlBorderData(
+ show: true,
),
- ],
+ minX: 0,
+ maxX: 4,
+ minY: 0,
+ maxY: 50,
+ lineBarsData: [
+ LineChartBarData(
+ spots: chartData,
+ isCurved: true,
+ colors: [const Color(0xFF0077B6)],
+ ),
+ ],
+ ),
),
- BarChartGroupData(
- x: 2,
- barRods: [
- BarChartRodData(
- y: 18,
- width: barWidth,
+ ),
+ const SizedBox(height: contPadding),
+ SizedBox(
+ width: screenWidth * boxWidth - contPadding * 2,
+ height: 200,
+ child: BarChart(
+ BarChartData(
+ alignment: BarChartAlignment.spaceAround,
+ maxY: 20,
+ barTouchData: BarTouchData(enabled: false),
+ titlesData: FlTitlesData(
+ bottomTitles: SideTitles(
+ showTitles: true,
+ getTextStyles: (value) => const TextStyle(color: Colors.black, fontSize: 14),
+ margin: 10,
+ getTitles: (value) {
+ switch (value.toInt()) {
+ case 0:
+ return 'Placeholder1';
+ case 1:
+ return 'Placeholder2';
+ case 2:
+ return 'Placeholder3';
+ default:
+ return '';
+ }
+ },
+ ),
+ leftTitles: SideTitles(
+ showTitles: true,
+ getTextStyles: (value) => const TextStyle(color: Colors.black, fontSize: 14),
+ margin: 10,
+ reservedSize: 30,
+ interval: 5,
+ ),
+ ),
+ borderData: FlBorderData(
+ show: true,
+ border: Border.all(color: Colors.black, width: 1),
+ ),
+ barGroups: [
+ BarChartGroupData(
+ x: 0,
+ barRods: [
+ BarChartRodData(
+ y: 15, // Bar height
+ width: barWidth, // Bar width
+ ),
+ ],
+ ),
+ BarChartGroupData(
+ x: 1,
+ barRods: [
+ BarChartRodData(
+ y: 10,
+ width: barWidth,
+ ),
+ ],
+ ),
+ BarChartGroupData(
+ x: 2,
+ barRods: [
+ BarChartRodData(
+ y: 18,
+ width: barWidth,
+ ),
+ ],
+ ),
+ ],
),
- ],
- ),
- ],
- ),
- )
- )
- ],
+ )
+ )
+ ],
+ ),
+ ),
+ ),
),
),
- ),
- ),
- ],
+ ],
+ );
+ },
);
}
-}
+}
\ No newline at end of file
--
GitLab