updated readme

devtools_options.yaml

@@ -0,0 +1,3 @@
+description: This file stores settings for Dart & Flutter DevTools.
+documentation: https://docs.flutter.dev/tools/devtools/extensions#configure-extension-enablement-states
+extensions:

lib/Widgets/reading_graph.dart

@@ -1,88 +0,0 @@
-import 'package:fl_chart/fl_chart.dart';
-import 'package:flutter/material.dart';
-import 'package:intl/intl.dart' as intl;
-import 'dart:math';
-
-import '../model/reading.dart';
-
-class ReadingGraph extends StatelessWidget {
-  const ReadingGraph({super.key, required List<Reading> readings})
-      : _readings = readings;
-  final List<Reading> _readings;
-
-  @override
-  Widget build(BuildContext context) {
-    if (_readings.isEmpty) {
-      return Text('No readings on record.');
-    }
-
-    final spots = _readings
-        .map<FlSpot>(
-          (e) => FlSpot(
-              e.dateTime.millisecondsSinceEpoch.toDouble() / 1000 / 60,
-              e.value),
-        )
-        .toList();
-
-    return LineChart(
-      LineChartData(
-        maxY: _readings.map<double>((e) => e.value).reduce(max) + 0.05,
-        minY: _readings.map<double>((e) => e.value).reduce(min) - 0.05,
-        lineBarsData: [
-          LineChartBarData(
-            isCurved: true,
-            color: Colors.cyan,
-            barWidth: 2,
-            isStrokeCapRound: true,
-            dotData: const FlDotData(show: false),
-            spots: _readings
-                .map<FlSpot>(
-                  (e) => FlSpot(
-                      e.dateTime.millisecondsSinceEpoch.toDouble() / 1000 / 60,
-                      e.value),
-                )
-                .toList(),
-          )
-        ],
-        titlesData: FlTitlesData(
-          bottomTitles: getBottomTitles(spots),
-          topTitles: const AxisTitles(sideTitles: SideTitles()),
-          rightTitles: const AxisTitles(sideTitles: SideTitles()),
-        ),
-      ),
-    );
-  }
-
-  AxisTitles getBottomTitles(List<FlSpot> spots) {
-    final maxX = double.parse(
-        spots.map<double>((e) => (e.x)).reduce(max).toStringAsFixed(0));
-    final minX = double.parse(
-        spots.map<double>((e) => e.x).reduce(min).toStringAsFixed(0));
-    final middle =
-        double.parse(spots[spots.length ~/ 2].x.toStringAsFixed(0)) + 4;
-
-    return AxisTitles(
-      sideTitles: SideTitles(
-        interval: 1,
-        showTitles: true,
-        getTitlesWidget: (value, meta) {
-          String text = '';
-          if (value == maxX) {
-            text = getDate(spots.first.x);
-          } else if (double.parse(value.toStringAsFixed(0)) == minX) {
-            text = getDate(spots.last.x);
-          } else if (value == middle) {
-            text = getDate(middle);
-          }
-          return Text(text);
-        },
-      ),
-    );
-  }
-
-  String getDate(double value) {
-    intl.DateFormat hmFormat = intl.DateFormat('Hm');
-    return hmFormat.format(
-        DateTime.fromMillisecondsSinceEpoch((value * 1000 * 60).toInt()));
-  }
-}

lib/main.dart

@@ -1,9 +1,21 @@
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
 
-import 'pages/landing_page.dart';
+import 'pages/about_page.dart';
+import 'pages/flood_station_page.dart';
+import 'pages/main_navigation_scaffold.dart';
+import 'services/flood_station_provider.dart';
+import 'package:timezone/data/latest.dart' as tz;
+
+import 'theme.dart';
 
 void main() {
-  runApp(const MyApp());
+  runApp(
+    ChangeNotifierProvider(
+      create: (context) => FloodStationProvider(),
+      child: const MyApp(),
+    ),
+  );
 }
 
 class MyApp extends StatelessWidget {
@@ -11,15 +23,15 @@ class MyApp extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    tz.initializeTimeZones();
     return MaterialApp(
       title: 'Floodwatch',
-      theme: ThemeData(
-        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
-        useMaterial3: true,
-      ),
-      initialRoute: LandingPage.routeName,
+      theme: defaultTheme,
+      initialRoute: MainNavigationScaffold.routeName,
       routes: {
-        LandingPage.routeName: (context) => LandingPage(),
+        MainNavigationScaffold.routeName: (context) => MainNavigationScaffold(),
+        FloodStationPage.routeName: (context) => FloodStationPage(),
+        AboutPage.routeName: (context) => AboutPage(),
       },
     );
   }

lib/model/flood_station.dart

@@ -30,12 +30,15 @@ class FloodStation {
         riverName: parseStringValue(json['riverName']),
       );
 
+  // sometimes the API returns a String instead of a double
   static double parseDoubleValue(dynamic value) {
     if (value is double) return value;
     if (value is String) return double.parse(value);
     return 0;
   }
 
+  // sometimes the API returns a list of labels that are basically identical
+  /// if [value] is a List, the method return the first item
   static String parseStringValue(dynamic value) {
     if (value is String) return value;
     if (value is List<dynamic>) return value[0];

lib/pages/about_page.dart

@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+
+class AboutPage extends StatelessWidget {
+  const AboutPage({super.key});
+
+  static const String aboutText = '''
+This App was build for demonstration purposes.
+It requests data from the Environment Agency Real Time flood-monitoring API 
+and displays a list and map of all flood measurement stations,
+as well as a graph showing the last 24 hours of measurements.
+The source code can be found at https://git.skup.in/.
+                          ''';
+
+  static const String routeName = '/about';
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('About'),
+      ),
+      body: Center(
+        child: Text(
+          aboutText,
+          style: Theme.of(context).textTheme.bodyLarge,
+        ),
+      ),
+    );
+  }
+}

lib/pages/flood_station_page.dart

@@ -1,39 +1,74 @@
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
 
-import '../Widgets/reading_graph.dart';
+import '../widgets/flood_station_table.dart';
+import '../widgets/reading_graph.dart';
 import '../model/flood_station.dart';
 import '../model/reading.dart';
 import '../services/api.dart';
+import '../services/flood_station_provider.dart';
+
+class FloodStationPage extends StatefulWidget {
+  const FloodStationPage({super.key});
+  static const String routeName = '/station';
+
+  @override
+  State<FloodStationPage> createState() => _FloodStationPageState();
+}
+
+class _FloodStationPageState extends State<FloodStationPage> {
+  bool _tableVisible = false;
+
+  @override
+  void deactivate() {
+    context.read<FloodStationProvider>().selectedStation = null;
+    super.deactivate();
+  }
 
-class FloodStationPage extends StatelessWidget {
-  const FloodStationPage({super.key, required FloodStation floodStation})
-      : _floodStation = floodStation;
-  final FloodStation _floodStation;
   @override
   Widget build(BuildContext context) {
+    final FloodStation? station =
+        context.read<FloodStationProvider>().selectedStation;
     return Scaffold(
       appBar: AppBar(
-        title: Text(_floodStation.label),
+        title: Text(station?.label ?? ''),
+        actions: [
+          TextButton(
+            onPressed: () => setState(() {
+              _tableVisible = !_tableVisible;
+            }),
+            child: _tableVisible ? Text('Show Graph') : Text('Show Table'),
+          ),
+        ],
       ),
       body: FutureBuilder<List<Reading>>(
-          future: Api.fetchReadingsFromStation(_floodStation.id),
+          future: Api.fetchReadingsFromStation(station?.id ?? ''),
           builder: (context, snapshot) {
             if (snapshot.hasData) {
-              return ReadingGraph(
-                readings: snapshot.data!,
+              if (snapshot.data!.isEmpty) {
+                return Center(child: Text('No readings on record.'));
+              } else if (_tableVisible) {
+                return SingleChildScrollView(
+                  child: Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 30),
+                    child: FloodStationTable(
+                      readings: snapshot.data!,
+                    ),
+                  ),
+                );
+              }
+              return Center(
+                child: Padding(
+                  padding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
+                  child: ReadingGraph(
+                    readings: snapshot.data!,
+                  ),
+                ),
               );
-
-              // return ListView.builder(
-              //   itemBuilder: (context, index) {
-              //     return ListTile(
-              //       title:
-              //           Text(snapshot.data!.elementAt(index).value.toString()),
-              //     );
-              //   },
-              //   itemCount: snapshot.data!.length,
-              // );
+            } else if (snapshot.hasError) {
+              return Center(child: Text('An unknown Error occured'));
             } else {
-              return Placeholder();
+              return Center(child: CircularProgressIndicator());
             }
           }),
     );

lib/pages/landing_page.dart

@@ -1,34 +1,114 @@
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
 
-import '../Widgets/flood_station_list_view.dart';
 import '../model/flood_station.dart';
-import '../services/api.dart';
+import '../services/overlay_service.dart';
+import '../widgets/flood_station_list_view.dart';
+import '../services/flood_station_provider.dart';
+import '../widgets/station_filter.dart';
+import 'flood_station_page.dart';
 
-class LandingPage extends StatelessWidget {
+class LandingPage extends StatefulWidget {
   const LandingPage({super.key});
 
-  static const routeName = '/';
+  @override
+  State<LandingPage> createState() => _LandingPageState();
+}
 
-  Widget builder(
-      BuildContext context, AsyncSnapshot<List<FloodStation>> snapshot) {
-    if (!snapshot.hasData) {
-      return CircularProgressIndicator();
-    } else if (snapshot.hasData) {
-      return FloodStationListView(stations: snapshot.data!);
-    } else if (snapshot.hasError) {
-      return Text(snapshot.error.toString());
-    } else {
-      return Text('An unknown error occured.');
-    }
+// uses mixin OverlayService to show loading overlay
+class _LandingPageState extends State<LandingPage> with OverlayService {
+  late FloodStationProvider _floodStationProvider;
+
+  @override
+  void dispose() {
+    super.dispose();
+    removeLoadingNotifier(); // Clean up overlay if needed
   }
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-      body: FutureBuilder<List<FloodStation>>(
-        future: Api.fetchStations(),
-        builder: builder,
+    _floodStationProvider = context.watch<FloodStationProvider>();
+    return Column(
+      children: [
+        StationFilter(
+          onChanged: (filterText) => _handleFilterChange(filterText),
+        ),
+        _buildStationList(),
+      ],
+    );
+  }
+
+  // if the list of all Stations is empty the method returns a button to load them
+  // else returns a list of FloodStations
+  Widget _buildStationList() {
+    if (!_shouldShowList) {
+      return Expanded(
+        child: Center(
+          child: ElevatedButton(
+            onPressed: _handleLoadAllStations,
+            child: const Text('Load all Stations'),
+          ),
+        ),
+      );
+    }
+
+    return Expanded(
+      child: FloodStationListView(
+        stations: _floodStationProvider.filtered
+            ? _floodStationProvider.filteredStations
+            : _floodStationProvider.allStations,
+        onItemTapped: _navigateToStationDetail,
       ),
     );
   }
+
+  void _handleFilterChange(String filterText) {
+    if (filterText.isEmpty) {
+      _floodStationProvider.filtered = false;
+      setState(() {});
+      return;
+    }
+
+    showLoadingNotifier(
+      context: context,
+      message: 'Loading',
+      onDismiss: () {
+        _floodStationProvider.cancelFilterLoading();
+      },
+    );
+
+    _floodStationProvider.loadFilteredStations(filterText);
+    _floodStationProvider.filteredStationsFuture
+        ?.then((_) => removeLoadingNotifier());
+    _floodStationProvider.filtered = true;
+  }
+
+  void _handleLoadAllStations() {
+    showLoadingNotifier(
+      context: context,
+      message: 'Loading',
+      onDismiss: () {
+        _floodStationProvider.cancelFilterLoading();
+      },
+    );
+
+    _floodStationProvider
+        .loadAllStations()
+        .whenComplete(() => removeLoadingNotifier());
+  }
+
+  void _navigateToStationDetail(FloodStation station) {
+    _floodStationProvider.selectedStation = station;
+    Navigator.of(context).pushNamed(FloodStationPage.routeName);
+  }
+
+  // returns boolean to decide whether the list of stations should be shown
+  // if the list of stations is empty and is not filtered either, the function returns false
+  bool get _shouldShowList {
+    if (!_floodStationProvider.filtered &&
+        _floodStationProvider.allStations.isNotEmpty) {
+      return true;
+    }
+    return _floodStationProvider.filtered;
+  }
 }

lib/pages/main_navigation_scaffold.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+
+import 'about_page.dart';
+import 'landing_page.dart';
+import 'map_page.dart';
+
+class MainNavigationScaffold extends StatefulWidget {
+  const MainNavigationScaffold({super.key});
+
+  static const routeName = '/';
+
+  @override
+  State<MainNavigationScaffold> createState() => _MainNavigationScaffoldState();
+}
+
+class _MainNavigationScaffoldState extends State<MainNavigationScaffold> {
+  final List<Widget> _pages = [
+    const LandingPage(),
+    const MapPage(),
+  ];
+
+  int _selectedPageIndex = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('Floodwatch'),
+        actions: [
+          IconButton(
+            onPressed: () =>
+                Navigator.of(context).pushNamed(AboutPage.routeName),
+            icon: Icon(Icons.info_outline),
+          )
+        ],
+      ),
+      bottomNavigationBar: NavigationBar(
+        selectedIndex: _selectedPageIndex,
+        onDestinationSelected: (value) => setState(() {
+          _selectedPageIndex = value;
+        }),
+        destinations: [
+          NavigationDestination(icon: Icon(Icons.list), label: 'List'),
+          NavigationDestination(icon: Icon(Icons.map_outlined), label: 'Map'),
+        ],
+      ),
+      // Used IndexedStack to save the page state while navigating
+      body: IndexedStack(
+        index: _selectedPageIndex,
+        children: _pages,
+      ),
+    );
+  }
+}

lib/pages/map_page.dart

@@ -0,0 +1,127 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_map/flutter_map.dart';
+import 'package:flutter_map_cancellable_tile_provider/flutter_map_cancellable_tile_provider.dart';
+import 'package:flutter_map_marker_cluster/flutter_map_marker_cluster.dart';
+import 'package:latlong2/latlong.dart';
+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});
+  static const routeName = '/map';
+
+  @override
+  State<MapPage> createState() => _MapPageState();
+}
+
+class _MapPageState extends State<MapPage> {
+  final _mapController = MapController();
+  late FloodStationProvider _floodStationProvider;
+  bool _loading = false;
+
+  @override
+  Widget build(BuildContext context) {
+    _floodStationProvider = context.watch<FloodStationProvider>();
+    if (_loading == true) {
+      return Center(
+        child: CircularProgressIndicator(),
+      );
+    } else if (_floodStationProvider.allStations.isEmpty) {
+      return Center(
+        child: ElevatedButton(
+          onPressed: () {
+            setState(() {
+              _loading = true;
+            });
+            _floodStationProvider
+                .loadAllStations()
+                .whenComplete(() => setState(() {
+                      _loading = false;
+                    }));
+          },
+          child: Text('Load Map'),
+        ),
+      );
+    }
+    return FlutterMap(
+      mapController: _mapController,
+      options: MapOptions(
+        cameraConstraint: CameraConstraint.containCenter(
+            bounds: LatLngBounds.fromPoints(_floodStationProvider.allStations
+                .map<LatLng>(
+                  (e) => LatLng(e.lat, e.long),
+                )
+                .toList())),
+        initialCenter: LatLng(54.81, -4.42),
+        initialZoom: 6,
+      ),
+      children: [
+        _openStreetMapTileLayer,
+        MarkerClusterLayerWidget(
+          options: MarkerClusterLayerOptions(
+              maxClusterRadius: 45,
+              size: Size(30, 30),
+              alignment: Alignment.center,
+              padding: EdgeInsets.all(50),
+              maxZoom: 15,
+              markers: _stationsAsMarkers(_floodStationProvider.allStations),
+              builder: _clusterMarkerBuilder),
+        )
+      ],
+    );
+  }
+
+  // builds the clustered marker
+  Widget _clusterMarkerBuilder(BuildContext context, List<Marker> markers) {
+    return Container(
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(20),
+        color: Theme.of(context).colorScheme.tertiary,
+      ),
+      child: Center(
+        child: Text(
+          markers.length.toString(),
+          style: TextStyle(color: Theme.of(context).colorScheme.onTertiary),
+        ),
+      ),
+    );
+  }
+
+  // gets a list of markers from the list of all stations
+  List<Marker> _stationsAsMarkers(List<FloodStation> stations) {
+    return stations
+        .map<Marker>(
+          (station) => Marker(
+            alignment: Alignment.center,
+            point: LatLng(station.lat, station.long),
+            child: CustomMarker(
+              onTap: () => _markerTapped(station),
+            ),
+          ),
+        )
+        .toList();
+  }
+
+  void _markerTapped(FloodStation station) {
+    showDialog(
+      context: context,
+      builder: (context) => MapPopup(
+          station: station,
+          onShowTapped: () {
+            _floodStationProvider.selectedStation = station;
+            Navigator.of(context).pushNamed(FloodStationPage.routeName);
+          }),
+    );
+  }
+}
+
+TileLayer get _openStreetMapTileLayer => TileLayer(
+      urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+      userAgentPackageName: 'dev.fleaflet.flutter_map.example',
+      tileProvider: CancellableNetworkTileProvider(),
+    );

lib/services/api.dart

@@ -3,12 +3,16 @@ import 'dart:convert';
 
 import '../model/flood_station.dart';
 import '../model/reading.dart';
+import 'date_utility.dart';
 
 class Api {
+  Api._();
+
   static const String _rootUrl =
       'https://environment.data.gov.uk/flood-monitoring';
 
-  static Future<List<FloodStation>> fetchStations() async {
+  /// Fetches all stationszt
+  static Future<List<FloodStation>> fetchAllStations() async {
     List<FloodStation> stations = [];
     final response = await http.get(Uri.parse('$_rootUrl/id/stations'));
     if (response.statusCode == 200) {
@@ -20,12 +24,44 @@ class Api {
     return stations;
   }
 
+  /// Fetches all stations whose label contain [label]
+  static Future<List<FloodStation>> fetchFilteredStations(String label) async {
+    List<FloodStation> stations = [];
+    final response =
+        await http.get(Uri.parse('$_rootUrl/id/stations?search=$label'));
+    if (response.statusCode == 200) {
+      final Map<String, dynamic> jsonStr = jsonDecode(response.body);
+      for (final str in jsonStr['items']) {
+        stations.add(FloodStation.fromMap(str));
+      }
+    }
+    return stations;
+  }
+
+  /// [limit] limits the number of entries that are requested from the API and [offset] returns the
+  /// list starting from the specified number
+  static Future<List<FloodStation>> fetchStationsByRange(
+      int limit, int offset) async {
+    List<FloodStation> stations = [];
+    final response = await http
+        .get(Uri.parse('$_rootUrl/id/stations?_limit=$limit&_offset=$offset'));
+    if (response.statusCode == 200) {
+      final Map<String, dynamic> jsonStr = jsonDecode(response.body);
+      for (final str in jsonStr['items']) {
+        stations.add(FloodStation.fromMap(str));
+      }
+    }
+    return stations;
+  }
+
+  /// Fetches all readings from the station with the specified [stationId] from the last 24h
   static Future<List<Reading>> fetchReadingsFromStation(
       String stationId) async {
     List<Reading> readings = [];
-    final dateTime = DateTime.now().subtract(Duration(days: 1));
+    final dateTime =
+        DateUtility.currentUKTimeUtc.subtract(Duration(days: 1)).toUtc();
     final url =
-        '$_rootUrl/id/stations/$stationId/readings?since=${dateTime.toIso8601String()}Z&_sorted';
+        '$_rootUrl/id/stations/$stationId/readings?since=${dateTime.toIso8601String()}&_sorted';
     final response = await http.get(Uri.parse(url));
     if (response.statusCode == 200) {
       final Map<String, dynamic> jsonStr = jsonDecode(response.body);

lib/services/date_utility.dart

@@ -0,0 +1,37 @@
+import 'package:timezone/timezone.dart' as tz;
+import 'package:intl/intl.dart' as intl;
+
+class DateUtility {
+  static final intl.DateFormat _hmFormat = intl.DateFormat('Hm');
+  static final intl.DateFormat _ymdhmFormat =
+      intl.DateFormat('yyyy-MM-dd HH:mm');
+  static final intl.DateFormat _ymdFormat = intl.DateFormat('yyyy-MM-dd');
+
+  // private default contructor so class can't be instanciated
+  DateUtility._();
+
+  static DateTime get currentUKTimeUtc {
+    final london = tz.getLocation('Europe/London');
+    return tz.TZDateTime.now(london).toUtc();
+  }
+
+  /// Formats a date in minutesSinceEpoch to a formatted String of HH:mm
+  static String formatMinutesToHm(double value) {
+    return _hmFormat.format(
+        DateTime.fromMillisecondsSinceEpoch((value * 1000 * 60).toInt()));
+  }
+
+  static String formatDateToHm(DateTime date) {
+    return _hmFormat.format(date);
+  }
+
+  /// Formats a date to yyyy-MM-dd HH:mm
+  static String formatDateToYmdhm(DateTime date) {
+    return _ymdhmFormat.format(date);
+  }
+
+  /// Formats a date to yyyy-MM-dd
+  static String formatDateToYmd(DateTime date) {
+    return _ymdFormat.format(date);
+  }
+}

lib/services/flood_station_provider.dart

@@ -0,0 +1,73 @@
+import 'package:flutter/material.dart';
+import 'package:async/async.dart';
+import '../model/flood_station.dart';
+import 'api.dart';
+
+class FloodStationProvider extends ChangeNotifier {
+  // since the getter and setter for the following two fields would be empty, they are publicly accessible
+  FloodStation? selectedStation;
+  bool filtered = false;
+
+  List<FloodStation> _allStations = [];
+  List<FloodStation> _filteredStations = [];
+  CancelableOperation? _filteredStationsFuture;
+
+  List<FloodStation> get allStations => _allStations;
+  List<FloodStation> get filteredStations => _filteredStations;
+  CancelableOperation? get filteredStationsFuture => _filteredStationsFuture;
+
+  /// loads all stations in batches of 500 and notifies listeners with every loop except if [silent] = true
+  /// this has lower performance than loading them all at once an shouldn't be used
+  Future loadAllStationsInBatches({bool silent = false}) {
+    int offset = 0;
+    return Future.doWhile(() async {
+      final stations = await Api.fetchStationsByRange(500, offset);
+      if (stations.isNotEmpty) {
+        _allStations.addAll(stations);
+        if (!silent) {
+          notifyListeners();
+        }
+        offset += 500;
+        return true;
+      } else {
+        return false;
+      }
+    });
+  }
+
+  /// loads all flood stations and notifies listeners when done
+  Future loadAllStations({bool silent = false}) {
+    return Api.fetchAllStations().then(
+      (value) {
+        _allStations = value;
+        if (!silent) {
+          notifyListeners();
+        }
+      },
+    );
+  }
+
+  /// loads all stations whose label contains [filter]
+  Future loadFilteredStations(String filter, {bool silent = false}) {
+    if (_filteredStationsFuture != null) {
+      _filteredStationsFuture!.cancel();
+    }
+    final future = Api.fetchFilteredStations(filter);
+    _filteredStationsFuture = CancelableOperation.fromFuture(future).then(
+      (value) {
+        _filteredStations = value;
+        if (!silent) {
+          notifyListeners();
+        }
+      },
+    );
+    return future;
+  }
+
+  /// cancels loading of filtered results.
+  void cancelFilterLoading() {
+    if (_filteredStationsFuture != null) {
+      _filteredStationsFuture!.cancel();
+    }
+  }
+}

lib/services/overlay_service.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+
+import '../widgets/loading_notifier.dart';
+
+mixin OverlayService {
+  OverlayEntry? _overlayEntry;
+
+  Future<void> showLoadingNotifier({
+    required BuildContext context,
+    required String message,
+    required VoidCallback onDismiss,
+  }) async {
+    if (_overlayEntry != null) return;
+
+    final overlayState = Overlay.of(context);
+    _overlayEntry = OverlayEntry(
+      builder: (context) => Positioned(
+        bottom: 85, // Positioned above the NavigationBar
+        left: 0,
+        right: 0,
+        child: Center(
+          child: LoadingNotifier(
+            message: message,
+            onDismissed: () {
+              onDismiss();
+              removeLoadingNotifier();
+            },
+          ),
+        ),
+      ),
+    );
+
+    overlayState.insert(_overlayEntry!);
+    // overlayState.setState(() {});
+  }
+
+  void removeLoadingNotifier() {
+    if (_overlayEntry != null) {
+      _overlayEntry?.remove();
+      _overlayEntry = null;
+    }
+  }
+
+  void dispose() {
+    removeLoadingNotifier();
+  }
+}

lib/theme.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+
+ThemeData get defaultTheme {
+  return ThemeData(
+    fontFamily: 'UbuntuSansMono',
+    colorScheme: ColorScheme.fromSeed(
+      seedColor: Colors.amber,
+      brightness: Brightness.light,
+    ),
+    textTheme: _defaultTextTheme,
+  );
+}
+
+ThemeData get defaultDarkTheme {
+  return ThemeData(
+    fontFamily: 'UbuntuSansMono',
+    colorScheme: ColorScheme.fromSeed(
+      seedColor: Colors.lightGreen,
+      brightness: Brightness.dark,
+    ),
+    textTheme: _defaultTextTheme,
+  );
+}
+
+TextTheme get _defaultTextTheme => TextTheme(
+      titleLarge: TextStyle(
+        fontWeight: FontWeight.w800,
+      ),
+      titleMedium: TextStyle(
+        fontWeight: FontWeight.w800,
+      ),
+      titleSmall: TextStyle(
+        fontWeight: FontWeight.w800,
+      ),
+    );

lib/widgets/custom_marker.dart

@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+
+class CustomMarker extends StatelessWidget {
+  const CustomMarker({super.key, required void Function() onTap})
+      : _onTap = onTap;
+
+  final void Function() _onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: _onTap,
+      child: Icon(
+        Icons.location_on_sharp,
+        color: Theme.of(context).colorScheme.primary,
+        size: 30,
+      ),
+    );
+  }
+}

lib/widgets/flood_station_list_view.dart

@@ -1,24 +1,30 @@
 import 'package:flutter/material.dart';
 
 import '../model/flood_station.dart';
-import '../pages/flood_station_page.dart';
 
 class FloodStationListView extends StatelessWidget {
-  const FloodStationListView({super.key, required List<FloodStation> stations})
-      : _stations = stations;
+  const FloodStationListView(
+      {super.key,
+      required List<FloodStation> stations,
+      required void Function(FloodStation) onItemTapped})
+      : _onItemTapped = onItemTapped,
+        _stations = stations;
 
   final List<FloodStation> _stations;
+  final void Function(FloodStation) _onItemTapped;
 
   @override
   Widget build(BuildContext context) {
-    return ListView.builder(
+    return ListView.separated(
+      separatorBuilder: (context, index) => Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 15.0),
+        child: Divider(),
+      ),
       itemBuilder: (context, index) {
         final item = _stations.elementAt(index);
         return ListTile(
           isThreeLine: true,
-          onTap: () => Navigator.of(context).push(MaterialPageRoute(
-            builder: (context) => FloodStationPage(floodStation: item),
-          )),
+          onTap: () => _onItemTapped(item),
           title: Text(item.label),
           subtitle: Column(
             crossAxisAlignment: CrossAxisAlignment.start,

lib/widgets/flood_station_table.dart

@@ -0,0 +1,69 @@
+import 'package:flutter/material.dart';
+
+import '../model/reading.dart';
+import '../services/date_utility.dart';
+
+class FloodStationTable extends StatelessWidget {
+  const FloodStationTable({super.key, required List<Reading> readings})
+      : _readings = readings;
+
+  final List<Reading> _readings;
+
+  List<TableRow> get _children {
+    return _readings.map<TableRow>((e) => _getTableRow(e)).toList();
+  }
+
+  TableRow _getTableRow(Reading reading) {
+    String date = DateUtility.formatDateToYmd(reading.dateTime);
+    String time = DateUtility.formatDateToHm(reading.dateTime);
+    return TableRow(
+      decoration: BoxDecoration(),
+      children: [
+        Row(
+          children: [
+            Text(
+              date,
+              style: TextStyle(
+                fontSize: 16,
+              ),
+            ),
+            Padding(padding: EdgeInsets.only(right: 12)),
+            Text(
+              time,
+              style: TextStyle(
+                fontWeight: FontWeight.bold,
+                fontSize: 16,
+              ),
+            ),
+          ],
+        ),
+        Text(
+          reading.value.toString(),
+          style: TextStyle(
+            fontWeight: FontWeight.bold,
+            fontSize: 16,
+            backgroundColor: _getColorFromSeverity(reading.value),
+          ),
+        ),
+      ],
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Table(
+      children: _children,
+      columnWidths: {
+        0: FixedColumnWidth(160),
+        1: FlexColumnWidth(),
+      },
+    );
+  }
+
+  Color _getColorFromSeverity(double value) {
+    if (value < 1.0) return Color.fromARGB(0, 0, 0, 0);
+    if (value < 2.0) return Colors.yellow;
+    if (value < 3.0) return Colors.orange;
+    return Colors.red;
+  }
+}

lib/widgets/loading_notifier.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+
+class LoadingNotifier extends StatelessWidget {
+  const LoadingNotifier(
+      {super.key,
+      required void Function() onDismissed,
+      required String message})
+      : _onDismissed = onDismissed,
+        _message = message;
+
+  final void Function() _onDismissed;
+  final String _message;
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      color: Theme.of(context).colorScheme.primaryContainer,
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(45)),
+      child: SizedBox(
+        width: 500,
+        height: 60,
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 20),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            mainAxisSize: MainAxisSize.max,
+            children: [
+              SizedBox(
+                width: 25,
+                height: 25,
+                child: CircularProgressIndicator(),
+              ),
+              Text(
+                _message,
+                style: Theme.of(context).textTheme.titleSmall,
+              ),
+              IconButton(
+                onPressed: () => _onDismissed(),
+                icon: Icon(Icons.close),
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/map_popup.dart

@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+
+import '../model/flood_station.dart';
+import '../services/date_utility.dart';
+
+class MapPopup extends StatelessWidget {
+  const MapPopup(
+      {super.key,
+      required FloodStation station,
+      required dynamic Function() onShowTapped})
+      : _onShowTapped = onShowTapped,
+        _station = station;
+
+  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
+                    ? DateUtility.formatDateToYmd(_station.dateOpened!)
+                    : '-',
+              ),
+            ],
+          )
+        ],
+      ),
+      actions: [
+        TextButton(
+          onPressed: () => Navigator.of(context).pop(),
+          child: Text('dismiss'),
+        ),
+        TextButton(
+          onPressed: _onShowTapped,
+          child: Text('show'),
+        ),
+      ],
+    );
+  }
+}

lib/widgets/reading_graph.dart

@@ -0,0 +1,112 @@
+import 'package:fl_chart/fl_chart.dart';
+import 'package:flutter/material.dart';
+import 'dart:math';
+
+import '../model/reading.dart';
+import '../services/date_utility.dart';
+
+class ReadingGraph extends StatelessWidget {
+  const ReadingGraph({super.key, required List<Reading> readings})
+      : _readings = readings;
+  final List<Reading> _readings;
+
+  @override
+  Widget build(BuildContext context) {
+    final spots = _readings
+        .map<FlSpot>(
+          (e) => FlSpot(
+              e.dateTime.millisecondsSinceEpoch.toDouble() / 1000 / 60,
+              e.value),
+        )
+        .toList();
+
+    return LineChart(
+      LineChartData(
+        maxY: _readings.map<double>((e) => e.value).reduce(max) + 0.05,
+        minY: _readings.map<double>((e) => e.value).reduce(min) - 0.05,
+        lineBarsData: [
+          LineChartBarData(
+            isCurved: true,
+            color: Theme.of(context).colorScheme.primary,
+            barWidth: 2,
+            isStrokeCapRound: true,
+            dotData: const FlDotData(show: false),
+            spots: _readings
+                .map<FlSpot>(
+                  (e) => FlSpot(
+                      e.dateTime.millisecondsSinceEpoch.toDouble() / 1000 / 60,
+                      e.value),
+                )
+                .toList(),
+          )
+        ],
+        titlesData: FlTitlesData(
+          bottomTitles: _getBottomTitles(spots),
+          leftTitles: _getLeftTitles(spots),
+          topTitles: const AxisTitles(sideTitles: SideTitles()),
+          rightTitles: const AxisTitles(sideTitles: SideTitles()),
+        ),
+        lineTouchData: LineTouchData(
+          touchTooltipData: LineTouchTooltipData(
+            getTooltipColor: (touchedSpot) =>
+                Theme.of(context).colorScheme.primaryContainer,
+            getTooltipItems: (touchedSpots) {
+              return touchedSpots.map((touchedSpot) {
+                return LineTooltipItem(
+                    '${touchedSpot.y.toString()}\n${_getLongDate(touchedSpot.x)}',
+                    TextStyle(
+                        color: Theme.of(context).colorScheme.onPrimaryContainer,
+                        fontWeight: FontWeight.bold));
+              }).toList();
+            },
+          ),
+        ),
+      ),
+    );
+  }
+
+  AxisTitles _getBottomTitles(List<FlSpot> spots) {
+    return AxisTitles(
+      sideTitles: SideTitles(
+        interval: 90,
+        reservedSize: 40,
+        showTitles: true,
+        maxIncluded: false,
+        minIncluded: false,
+        getTitlesWidget: (value, meta) => SideTitleWidget(
+          meta: meta,
+          child: Text(DateUtility.formatMinutesToHm(value)),
+        ),
+      ),
+    );
+  }
+
+  AxisTitles _getLeftTitles(List<FlSpot> spots) {
+    return AxisTitles(
+      sideTitles: SideTitles(
+        reservedSize: 50,
+        showTitles: true,
+        maxIncluded: false,
+        minIncluded: false,
+        getTitlesWidget: (value, meta) => SideTitleWidget(
+          meta: meta,
+          child: Text(value.toStringAsFixed(2)),
+        ),
+      ),
+    );
+  }
+
+  String _getLongDate(double value) {
+    DateTime date =
+        DateTime.fromMillisecondsSinceEpoch((value * 1000 * 60).toInt());
+    int daysDifference = (DateTime.now().weekday - date.weekday + 7) % 7;
+
+    if (daysDifference == 0) {
+      return 'Today ${DateUtility.formatDateToHm(date)}';
+    } else if (daysDifference == 1) {
+      return 'Yesterday ${DateUtility.formatDateToHm(date)}';
+    }
+
+    return DateUtility.formatDateToYmdhm(date);
+  }
+}

lib/widgets/station_filter.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+
+class StationFilter extends StatefulWidget {
+  const StationFilter({super.key, required this.onChanged});
+  final void Function(String filterText) onChanged;
+
+  @override
+  State<StationFilter> createState() => StationFilterState();
+}
+
+class StationFilterState extends State<StationFilter> {
+  final TextEditingController _filterController = TextEditingController();
+
+  @override
+  Widget build(BuildContext context) {
+    return TextField(
+      controller: _filterController,
+      decoration: InputDecoration(
+        prefixIcon: Icon(Icons.search),
+        suffixIcon: Opacity(
+          opacity: _filterController.text.isEmpty ? 0 : 1,
+          child: IconButton(
+            onPressed: () {
+              _filterController.clear();
+
+              widget.onChanged(_filterController.text);
+            },
+            icon: Icon(Icons.delete),
+          ),
+        ),
+        label: Text('Filter'),
+      ),
+      onChanged: (_) => widget.onChanged(_filterController.text),
+    );
+  }
+}

pubspec.yaml

@@ -14,6 +14,13 @@ dependencies:
   fl_chart: ^0.70.2
   http: ^1.3.0
   intl: ^0.20.2
+  provider: ^6.1.2
+  timezone: ^0.10.0
+  async: ^2.11.0
+  flutter_map: ^7.0.2
+  flutter_map_cancellable_tile_provider: ^3.0.2
+  latlong2: ^0.9.1
+  flutter_map_marker_cluster: ^1.4.0
 
 dev_dependencies:
   flutter_test:
@@ -23,5 +30,70 @@ dev_dependencies:
 
 
 flutter:
-
-  uses-material-design: true
+  uses-material-design: true
+  fonts:
+    - family: UbuntuSans
+      fonts:
+        - asset: fonts/ubuntu_sans/UbuntuSans-Thin.ttf
+          weight: 100
+        - asset: fonts/ubuntu_sans/UbuntuSans-ThinItalic.ttf
+          weight: 100
+          style: italic
+        - asset: fonts/ubuntu_sans/UbuntuSans-ExtraLight.ttf
+          weight: 200
+        - asset: fonts/ubuntu_sans/UbuntuSans-ExtraLightItalic.ttf
+          weight: 200
+          style: italic
+        - asset: fonts/ubuntu_sans/UbuntuSans-Light.ttf
+          weight: 300
+        - asset: fonts/ubuntu_sans/UbuntuSans-LightItalic.ttf
+          weight: 300
+          style: italic
+        - asset: fonts/ubuntu_sans/UbuntuSans-Regular.ttf
+          weight: 400
+        - asset: fonts/ubuntu_sans/UbuntuSans-Italic.ttf
+          weight: 400
+          style: italic
+        - asset: fonts/ubuntu_sans/UbuntuSans-Medium.ttf
+          weight: 500
+        - asset: fonts/ubuntu_sans/UbuntuSans-MediumItalic.ttf
+          weight: 500
+          style: italic
+        - asset: fonts/ubuntu_sans/UbuntuSans-SemiBold.ttf
+          weight: 600
+        - asset: fonts/ubuntu_sans/UbuntuSans-SemiBoldItalic.ttf
+          weight: 600
+          style: italic
+        - asset: fonts/ubuntu_sans/UbuntuSans-Bold.ttf
+          weight: 700
+        - asset: fonts/ubuntu_sans/UbuntuSans-BoldItalic.ttf
+          weight: 700
+          style: italic
+        - asset: fonts/ubuntu_sans/UbuntuSans-ExtraBold.ttf
+          weight: 800
+        - asset: fonts/ubuntu_sans/UbuntuSans-ExtraBoldItalic.ttf
+          weight: 800
+          style: italic
+    
+    - family: UbuntuSansMono
+      fonts:
+        - asset: fonts/ubuntu_sans_mono/UbuntuSansMono-Regular.ttf
+          weight: 400
+        - asset: fonts/ubuntu_sans_mono/UbuntuSansMono-Italic.ttf
+          weight: 400
+          style: italic
+        - asset: fonts/ubuntu_sans_mono/UbuntuSansMono-Medium.ttf
+          weight: 500
+        - asset: fonts/ubuntu_sans_mono/UbuntuSansMono-MediumItalic.ttf
+          weight: 500
+          style: italic
+        - asset: fonts/ubuntu_sans_mono/UbuntuSansMono-SemiBold.ttf
+          weight: 600
+        - asset: fonts/ubuntu_sans_mono/UbuntuSansMono-SemiBoldItalic.ttf
+          weight: 600
+          style: italic
+        - asset: fonts/ubuntu_sans_mono/UbuntuSansMono-Bold.ttf
+          weight: 700
+        - asset: fonts/ubuntu_sans_mono/UbuntuSansMono-BoldItalic.ttf
+          weight: 700
+          style: italic

readme.md

@@ -0,0 +1,47 @@
+# Floodwatch
+This App was build for demonstration purposes.
+It requests data from the Environment Agency Real Time flood-monitoring API and displays a list and map of all flood measurement stations,
+as well as a graph showing the last 24 hours of measurements.
+
+## Features
+
+### Interactive Map View 
+- Uses OpenStreetMap to display all flood monitoring stations
+
+### Station List
+- Complete list of all flood monitoring stations
+- Filtering by station label
+ 
+### Detailed Station View
+- Line graphs showing water levels over the past 24 hours
+- Table showing all values with colour-coding to show severity
+
+## Third-Party Packages used
+
+- **provider**: State management solution for handling station data
+- **flutter_map**: Integration with OpenStreetMap for the map view
+- **fl_chart**: Creating line graphs for water levels
+
+## Installation
+
+1. Clone the repository:
+```bash
+git clone https://git.skup.in/marco/floodwatch
+```
+2. Install dependencies:
+```bash
+flutter pub get
+```
+
+3. Run the app:
+```bash
+flutter run
+```
+
+The App has been tested on Linux and Web and can be tested on android, too.
+
+## Building release version
+
+```bash
+flutter build
+```