update: make map and box into separate widgets

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