improve map and metric style (#54)

* improve map and metric style

* edit screenshots

Author: BenjaminCanape

banner.png

@@ -91,6 +91,7 @@ class MyApp extends HookConsumerWidget {
           selectionHandleColor: ColorUtils.main,
         ),
         primaryColor: ColorUtils.main,
+        splashColor: ColorUtils.blueGreyDarker,
         bottomSheetTheme:
             BottomSheetThemeData(backgroundColor: ColorUtils.transparent),
       ),

lib/main.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<Color> colorList = [

lib/presentation/common/core/utils/color_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);

lib/presentation/common/core/utils/image_utils.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) {

lib/presentation/common/location/widgets/current_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);
   }

lib/presentation/common/location/widgets/location_map.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,
+            ),
+          ])
         ],
       ),
     );

lib/presentation/common/metrics/widgets/metrics.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),

lib/presentation/common/timer/widgets/timer_start.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,

lib/presentation/home/screens/home_screen.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(),
+                    ),
+                  ),
+                )),
           )
         ],
       ),