From 2f9ee1287a25aab34c2f16592b8aac5c879d9cbf Mon Sep 17 00:00:00 2001
From: Sara <sarasdj@stud.ntnu.no>
Date: Fri, 10 May 2024 19:40:24 +0200
Subject: [PATCH] add: simple info layer for color explanations
---
app/lib/widgets/info_layer.dart | 91 ++++++++++++++++++++++++++++++++
app/lib/widgets/main_layout.dart | 55 +++++--------------
2 files changed, 103 insertions(+), 43 deletions(-)
create mode 100644 app/lib/widgets/info_layer.dart
diff --git a/app/lib/widgets/info_layer.dart b/app/lib/widgets/info_layer.dart
new file mode 100644
index 00000000..2f123877
--- /dev/null
+++ b/app/lib/widgets/info_layer.dart
@@ -0,0 +1,91 @@
+import 'package:flutter/material.dart';
+
+import '../../consts.dart';
+
+class InfoLayer extends StatefulWidget {
+
+ const InfoLayer({
+ Key? key,
+ }) : super(key: key);
+
+ @override
+ InfoLayerState createState() => InfoLayerState();
+}
+
+class InfoLayerState extends State<InfoLayer> {
+ @override
+ void initState() {
+ super.initState();
+ }
+
+ // _buildLegendItem renders a colored circle and text to form a legend
+ Widget _legendItem(Color color, String text) {
+ return Row(
+ children: [
+ Container(
+ width: 20,
+ height: 20,
+ decoration: BoxDecoration(
+ color: color,
+ shape: BoxShape.circle,
+ ),
+ ),
+ const SizedBox(width: 8),
+ Text(
+ text,
+ style: const TextStyle(
+ fontSize: 14,
+ color: Colors.white,
+ ),
+ ),
+ ],
+ );
+ }
+
+ /// Builds an additional legend to explain the colors
+ Widget _buildLegend() {
+ return Column(
+ children: [
+ _legendItem(const Color(0xffff0000), "Very unsafe"),
+ const SizedBox(height: 10),
+ _legendItem(const Color(0xffff6a00), "Unsafe"),
+ const SizedBox(height: 10),
+ _legendItem(const Color(0xFFb1ff00), "Safe"),
+ const SizedBox(height: 10),
+ _legendItem(const Color(0xFF00d6ff), "Very safe"),
+ const SizedBox(height: 10),
+ ],
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Container(
+ padding: const EdgeInsets.all(40),
+ color: Colors.black.withOpacity(0.8),
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center, // Align contents vertically centered
+ children: [
+ Text(
+ 'Color categorization',
+ style: subHeadingStyle,
+ ),
+ const SizedBox(height: 20),
+ Text(
+ 'The map shows the safety of applying x kg per x m^2',
+ style: regTextStyle,
+ textAlign: TextAlign.center,
+ ),
+ const SizedBox(height: 30),
+ _buildLegend(),
+ const SizedBox(height: 30),
+ Text(
+ 'Placeholder for other information...',
+ style: smallTextStyle,
+ textAlign: TextAlign.center,
+ ),
+ ],
+ ),
+ );
+ }
+}
diff --git a/app/lib/widgets/main_layout.dart b/app/lib/widgets/main_layout.dart
index 5f915d0c..8af5fb81 100644
--- a/app/lib/widgets/main_layout.dart
+++ b/app/lib/widgets/main_layout.dart
@@ -5,6 +5,7 @@ import 'package:shared_preferences/shared_preferences.dart';
import 'osm_layer.dart';
import 'stat_charts.dart';
+import 'info_layer.dart';
import '../../consts.dart';
import 'choropleth_map.dart';
import '../data_classes.dart';
@@ -39,7 +40,7 @@ class _MapContainerWidgetState extends State<MapContainerWidget> {
bool isSatTapped = false; // Satellite button tap state tracker
bool isMapTapped = false; // OSM button tap state tracker
- bool showColorMeanings = false; // Additional color legend visibility
+ bool infoLayer = false; // Additional color legend visibility
Measurement? selectedMeasurement = selectedMeasurements[0];
@@ -75,46 +76,6 @@ class _MapContainerWidgetState extends State<MapContainerWidget> {
});
}
- // _buildLegendItem renders a colored circle and text to form a legend
- Widget _legendItem(Color color, String text) {
- return Row(
- children: [
- Container(
- width: 20,
- height: 20,
- decoration: BoxDecoration(
- color: color,
- shape: BoxShape.circle,
- ),
- ),
- const SizedBox(width: 8),
- Text(
- text,
- style: const TextStyle(
- fontSize: 14,
- color: Colors.white,
- ),
- ),
- ],
- );
- }
-
- /// Builds an additional legend to explain the colors
- Widget _buildLegend() {
- return Column(
- children: [
- _legendItem(const Color(0xffff0000), "Very unsafe"),
- const SizedBox(height: 10),
- _legendItem(const Color(0xffff6a00), "Unsafe"),
- const SizedBox(height: 10),
- _legendItem(const Color(0xFFb1ff00), "Safe"),
- const SizedBox(height: 10),
- _legendItem(const Color(0xFF00d6ff), "Very safe"),
- const SizedBox(height: 10),
- ],
- );
- }
-
@override
Widget build(BuildContext context) {
// Initialise selectedMarker to first element in markerList
@@ -163,6 +124,14 @@ class _MapContainerWidgetState extends State<MapContainerWidget> {
child: OSM(markerList: widget.measurements),
),
),
+ SizedBox(
+ width: screenWidth * boxWidth,
+ height: screenWidth * boxHeight,
+ child: Visibility(
+ visible: infoLayer,
+ child: const InfoLayer(),
+ ),
+ ),
Positioned( // Satellite button
top: 10,
right: 10,
@@ -264,12 +233,12 @@ class _MapContainerWidgetState extends State<MapContainerWidget> {
child: GestureDetector(
onTap: () {
setState(() {
- showColorMeanings = !showColorMeanings; // Toggle satellite layer state on press
+ infoLayer = !infoLayer; // Toggle satellite layer state on press
});
},
child: Container(
padding: const EdgeInsets.all(8),
- decoration: showColorMeanings ? const BoxDecoration( // Add decoration only when pressed
+ decoration: infoLayer ? const BoxDecoration( // Add decoration only when pressed
shape: BoxShape.circle,
color: Colors.grey,
) : null,
--
GitLab