From 43460d8d92f7281e8da30b0f525eea52e7bd4b82 Mon Sep 17 00:00:00 2001 From: Benjamin Canape Date: Tue, 12 Mar 2024 23:55:10 +0100 Subject: [PATCH] improve map and metric style --- lib/main.dart | 2 + .../common/core/utils/color_utils.dart | 1 + .../common/core/utils/image_utils.dart | 1 + .../widgets/current_location_map.dart | 25 ++++++---- .../common/location/widgets/location_map.dart | 47 +++++++++---------- .../common/metrics/widgets/metrics.dart | 44 +++++++++++------ .../common/timer/widgets/timer_start.dart | 5 +- .../home/screens/home_screen.dart | 1 - .../my_activities/widgets/details_tab.dart | 24 ++++++---- .../new_activity/screens/sum_up_screen.dart | 23 ++++++--- 10 files changed, 106 insertions(+), 67 deletions(-) diff --git a/lib/main.dart b/lib/main.dart index 55a55aa5..2818bc70 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -2,6 +2,7 @@ import 'dart:ui' as ui; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; +import 'package:flutter/widgets.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart'; import 'package:flutter_localizations/flutter_localizations.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; @@ -91,6 +92,7 @@ class MyApp extends HookConsumerWidget { selectionHandleColor: ColorUtils.main, ), primaryColor: ColorUtils.main, + splashColor: ColorUtils.blueGreyDarker, bottomSheetTheme: BottomSheetThemeData(backgroundColor: ColorUtils.transparent), ), diff --git a/lib/presentation/common/core/utils/color_utils.dart b/lib/presentation/common/core/utils/color_utils.dart index 1db9d22c..e0dae952 100644 --- a/lib/presentation/common/core/utils/color_utils.dart +++ b/lib/presentation/common/core/utils/color_utils.dart @@ -26,6 +26,7 @@ class ColorUtils { static Color greyLight = Colors.grey.shade300; static Color blueGrey = Colors.blueGrey; static Color blueGreyDarker = Colors.blueGrey.shade900; + static Color backgroundLight = Colors.white; /// List of colors used for generating color tuples. static List colorList = [ diff --git a/lib/presentation/common/core/utils/image_utils.dart b/lib/presentation/common/core/utils/image_utils.dart index d1466d87..04ca251f 100644 --- a/lib/presentation/common/core/utils/image_utils.dart +++ b/lib/presentation/common/core/utils/image_utils.dart @@ -16,6 +16,7 @@ class ImageUtils { try { RenderRepaintBoundary boundary = boundaryKey.currentContext! .findRenderObject() as RenderRepaintBoundary; + ui.Image image = await boundary.toImage(); ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png); diff --git a/lib/presentation/common/location/widgets/current_location_map.dart b/lib/presentation/common/location/widgets/current_location_map.dart index a3f5ed19..51ae70ee 100644 --- a/lib/presentation/common/location/widgets/current_location_map.dart +++ b/lib/presentation/common/location/widgets/current_location_map.dart @@ -37,9 +37,9 @@ class CurrentLocationMap extends HookConsumerWidget { height: 80, point: LatLng(currentLatitude, currentLongitude), child: Icon( - Icons.run_circle_sharp, - size: 30, - color: ColorUtils.red, + Icons.circle, + size: 20, + color: ColorUtils.errorDarker, ), ), ]; @@ -75,12 +75,19 @@ class CurrentLocationMap extends HookConsumerWidget { return futureProvider.when(data: (total) { return Expanded( - child: LocationMap( - points: points, - markers: markers, - currentPosition: LatLng(currentLatitude, currentLongitude), - mapController: provider.mapController ?? MapController(), - )); + child: SizedBox( + height: 500, + child: ClipRRect( + borderRadius: const BorderRadius.only( + topLeft: Radius.circular(150), + topRight: Radius.circular(150), + ), + child: LocationMap( + points: points, + markers: markers, + currentPosition: LatLng(currentLatitude, currentLongitude), + mapController: provider.mapController ?? MapController(), + )))); }, loading: () { return Expanded(child: Center(child: UIUtils.loader)); }, error: (error, stackTrace) { diff --git a/lib/presentation/common/location/widgets/location_map.dart b/lib/presentation/common/location/widgets/location_map.dart index f71a31fc..3e974dd8 100644 --- a/lib/presentation/common/location/widgets/location_map.dart +++ b/lib/presentation/common/location/widgets/location_map.dart @@ -27,32 +27,29 @@ class LocationMap extends HookConsumerWidget { final zoomLevel = MapUtils.getZoomLevel(points, center); return points.isNotEmpty || currentPosition != null - ? SizedBox( - height: 500, - child: FlutterMap( - key: ValueKey(MediaQuery.of(context).orientation), - mapController: mapController, - options: MapOptions( - initialCenter: points.isNotEmpty - ? center - : currentPosition ?? const LatLng(0, 0), - initialZoom: zoomLevel, - ), - children: [ - TileLayer( - urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - ), - PolylineLayer( - polylines: [ - Polyline( - points: points, - strokeWidth: 4, - color: ColorUtils.blueGrey), - ], - ), - MarkerLayer(markers: markers), - ], + ? FlutterMap( + key: ValueKey(MediaQuery.of(context).orientation), + mapController: mapController, + options: MapOptions( + initialCenter: points.isNotEmpty + ? center + : currentPosition ?? const LatLng(0, 0), + initialZoom: zoomLevel, ), + children: [ + TileLayer( + urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', + ), + PolylineLayer( + polylines: [ + Polyline( + points: points, + strokeWidth: 4, + color: ColorUtils.blueGrey), + ], + ), + MarkerLayer(markers: markers), + ], ) : Center(child: UIUtils.loader); } diff --git a/lib/presentation/common/metrics/widgets/metrics.dart b/lib/presentation/common/metrics/widgets/metrics.dart index da8d7746..a58429d6 100644 --- a/lib/presentation/common/metrics/widgets/metrics.dart +++ b/lib/presentation/common/metrics/widgets/metrics.dart @@ -14,7 +14,7 @@ class Metrics extends HookConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { final state = ref.watch(metricsViewModelProvider); - const textStyle = TextStyle(fontSize: 30.0); + const textStyle = TextStyle(fontSize: 26.0, fontWeight: FontWeight.bold); double speedToDisplay = state.globalSpeed; double distanceToDisplay = state.distance; @@ -28,22 +28,36 @@ class Metrics extends HookConsumerWidget { return Center( child: Row( - mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ - const Icon(Icons.location_on), - const SizedBox(width: 8), - Text( - '${distanceToDisplay.toStringAsFixed(2)} km', - style: textStyle, - ), - const SizedBox(width: 40), - const Icon(Icons.speed), - const SizedBox(width: 8), - Text( - '${speedToDisplay.toStringAsFixed(2)} km/h', - style: textStyle, - ), + Row(children: [ + const Icon( + Icons.location_on, + size: 45, + ), + const SizedBox(width: 8), + Column(children: [ + Text( + distanceToDisplay.toStringAsFixed(2), + style: textStyle, + ), + const Text('km'), + ]) + ]), + Row(children: [ + Column(mainAxisAlignment: MainAxisAlignment.start, children: [ + Text( + speedToDisplay.toStringAsFixed(2), + style: textStyle, + ), + const Text('km/h'), + ]), + const SizedBox(width: 8), + const Icon( + Icons.speed, + size: 45, + ), + ]) ], ), ); diff --git a/lib/presentation/common/timer/widgets/timer_start.dart b/lib/presentation/common/timer/widgets/timer_start.dart index b09d7145..c95e8782 100644 --- a/lib/presentation/common/timer/widgets/timer_start.dart +++ b/lib/presentation/common/timer/widgets/timer_start.dart @@ -16,8 +16,9 @@ class TimerStart extends HookConsumerWidget { return FloatingActionButton( heroTag: 'start_button', - backgroundColor: - timerViewModel.hasTimerStarted() ? ColorUtils.red : ColorUtils.main, + backgroundColor: timerViewModel.hasTimerStarted() + ? ColorUtils.errorDarker + : ColorUtils.main, elevation: 4.0, child: AnimatedSwitcher( duration: const Duration(milliseconds: 300), diff --git a/lib/presentation/home/screens/home_screen.dart b/lib/presentation/home/screens/home_screen.dart index 188c3b17..870cdf50 100644 --- a/lib/presentation/home/screens/home_screen.dart +++ b/lib/presentation/home/screens/home_screen.dart @@ -44,7 +44,6 @@ class HomeScreen extends HookConsumerWidget { padding: const EdgeInsets.all(16), selectedIndex: currentIndex, onTabChange: (value) { - //locationViewModel.cancelLocationStream(); homeViewModel.setCurrentIndex(value); }, gap: 8, diff --git a/lib/presentation/my_activities/widgets/details_tab.dart b/lib/presentation/my_activities/widgets/details_tab.dart index cfc9ee4d..2ca77471 100644 --- a/lib/presentation/my_activities/widgets/details_tab.dart +++ b/lib/presentation/my_activities/widgets/details_tab.dart @@ -102,14 +102,22 @@ class DetailsTab extends HookConsumerWidget { speed: displayedActivity.speed, ), Expanded( - child: RepaintBoundary( - key: state.boundaryKey, - child: LocationMap( - points: points, - markers: markers, - mapController: MapController(), - ), - ), + child: SizedBox( + height: 500, + child: ClipRRect( + borderRadius: const BorderRadius.only( + topLeft: Radius.circular(150), + topRight: Radius.circular(150), + ), + child: RepaintBoundary( + key: state.boundaryKey, + child: LocationMap( + points: points, + markers: markers, + mapController: MapController(), + ), + ), + )), ) ], ), diff --git a/lib/presentation/new_activity/screens/sum_up_screen.dart b/lib/presentation/new_activity/screens/sum_up_screen.dart index b7424405..8905a872 100644 --- a/lib/presentation/new_activity/screens/sum_up_screen.dart +++ b/lib/presentation/new_activity/screens/sum_up_screen.dart @@ -94,15 +94,24 @@ class SumUpScreen extends HookConsumerWidget { const Metrics(), const SizedBox(height: 10), Expanded( - child: RepaintBoundary( - key: state.boundaryKey, - child: LocationMap( - points: points, - markers: markers, - mapController: MapController(), + child: SizedBox( + height: 500, + child: ClipRRect( + borderRadius: const BorderRadius.only( + topLeft: Radius.circular(150), + topRight: Radius.circular(150), + ), + child: RepaintBoundary( + key: state.boundaryKey, + child: LocationMap( + points: points, + markers: markers, + mapController: MapController(), + ), + ), ), ), - ), + ) ], ), ),