add: simple info layer for color explanations

app/lib/widgets/info_layer.dart

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

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,