Implemented proper map popup with navigation

lib/pages/map_page.dart

@@ -8,6 +8,8 @@ import 'package:provider/provider.dart';
 import '../model/flood_station.dart';
 import '../services/flood_station_provider.dart';
 import '../widgets/custom_marker.dart';
+import '../widgets/map_popup.dart';
+import 'flood_station_page.dart';
 
 class MapPage extends StatefulWidget {
   const MapPage({super.key});
@@ -19,14 +21,15 @@ class MapPage extends StatefulWidget {
 
 class _MapPageState extends State<MapPage> {
   final mapController = MapController();
+  late FloodStationProvider _floodStationProvider;
 
   @override
   Widget build(BuildContext context) {
-    final floodStationProvider = context.watch<FloodStationProvider>();
-    if (floodStationProvider.allStations.isEmpty) {
+    _floodStationProvider = context.watch<FloodStationProvider>();
+    if (_floodStationProvider.allStations.isEmpty) {
       return Center(
         child: ElevatedButton(
-          onPressed: floodStationProvider.loadAllStations,
+          onPressed: _floodStationProvider.loadAllStations,
           child: Text('Load Map'),
         ),
       );
@@ -35,7 +38,7 @@ class _MapPageState extends State<MapPage> {
       mapController: mapController,
       options: MapOptions(
         cameraConstraint: CameraConstraint.containCenter(
-            bounds: LatLngBounds.fromPoints(floodStationProvider.allStations
+            bounds: LatLngBounds.fromPoints(_floodStationProvider.allStations
                 .map<LatLng>(
                   (e) => LatLng(e.lat, e.long),
                 )
@@ -52,7 +55,7 @@ class _MapPageState extends State<MapPage> {
               alignment: Alignment.center,
               padding: EdgeInsets.all(50),
               maxZoom: 15,
-              markers: _stationsAsMarkers(floodStationProvider.allStations),
+              markers: _stationsAsMarkers(_floodStationProvider.allStations),
               builder: _markerBuilder),
         )
       ],
@@ -91,17 +94,12 @@ class _MapPageState extends State<MapPage> {
   _markerTapped(FloodStation station) {
     showDialog(
       context: context,
-      builder: (context) {
-        return Center(
-          child: Card(
-            child: SizedBox(
-              width: 300,
-              height: 300,
-              child: Text(station.label),
-            ),
-          ),
-        );
-      },
+      builder: (context) => MapPopup(
+          station: station,
+          onShowTapped: () {
+            _floodStationProvider.selectedStation = station;
+            Navigator.of(context).pushNamed(FloodStationPage.routeName);
+          }),
     );
   }
 }

lib/widgets/map_popup.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart' as intl;
+
+import '../model/flood_station.dart';
+
+class MapPopup extends StatelessWidget {
+  const MapPopup(
+      {super.key, required this.station, required this.onShowTapped});
+  final FloodStation station;
+  final Function() onShowTapped;
+
+  @override
+  Widget build(BuildContext context) {
+    return AlertDialog(
+      title: Text(station.label),
+      content: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Icon(Icons.home_outlined),
+              Padding(padding: EdgeInsets.only(left: 8)),
+              Text(station.town.isEmpty ? '-' : station.town),
+            ],
+          ),
+          Row(
+            children: [
+              Icon(Icons.water),
+              Padding(padding: EdgeInsets.only(left: 8)),
+              Text(station.riverName.isEmpty ? '-' : station.riverName),
+            ],
+          ),
+          Row(
+            children: [
+              Icon(Icons.calendar_month_outlined),
+              Padding(padding: EdgeInsets.only(left: 8)),
+              Text(
+                station.dateOpened != null
+                    ? intl.DateFormat.yMd().format(station.dateOpened!)
+                    : '-',
+              ),
+            ],
+          )
+        ],
+      ),
+      actions: [
+        TextButton(
+          onPressed: () => Navigator.of(context).pop(),
+          child: Text('dismiss'),
+        ),
+        TextButton(
+          onPressed: onShowTapped,
+          child: Text('show'),
+        ),
+      ],
+    );
+  }
+}