Add ability to select distance unit

lib/components/pages/trips.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:mileograph_flutter/objects/objects.dart';
 import 'package:mileograph_flutter/services/data_service.dart';
+import 'package:mileograph_flutter/services/distance_unit_service.dart';
 import 'package:provider/provider.dart';
 
 class TripsPage extends StatefulWidget {
@@ -99,6 +100,7 @@ class _TripsPageState extends State<TripsPage> {
   @override
   Widget build(BuildContext context) {
     final data = context.watch<DataService>();
+    final distanceUnits = context.watch<DistanceUnitService>();
     final tripDetails = data.tripDetails;
     final tripSummaries = data.tripList;
     final summaryById = {
@@ -188,7 +190,8 @@ class _TripsPageState extends State<TripsPage> {
             return Card(
               child: ListTile(
                 title: Text(trip.tripName),
-                subtitle: Text('${trip.tripMileage.toStringAsFixed(1)} mi'),
+                subtitle:
+                    Text(distanceUnits.format(trip.tripMileage, decimals: 1)),
               ),
             );
           }
@@ -206,6 +209,7 @@ class _TripsPageState extends State<TripsPage> {
     TripDetail trip,
     TripSummary? summary,
   ) {
+    final distanceUnits = context.watch<DistanceUnitService>();
     final legs = trip.legs;
     final legCount =
         trip.legCount > 0 ? trip.legCount : summary?.legCount ?? legs.length;
@@ -245,18 +249,12 @@ class _TripsPageState extends State<TripsPage> {
                   crossAxisAlignment: CrossAxisAlignment.end,
                   children: [
                     Text(
-                      trip.mileage.toStringAsFixed(1),
+                      distanceUnits.format(trip.mileage, decimals: 1),
                       style:
                           Theme.of(context).textTheme.headlineSmall?.copyWith(
                         fontWeight: FontWeight.w800,
                       ),
                     ),
-                    Text(
-                      'miles',
-                      style: Theme.of(context).textTheme.labelMedium?.copyWith(
-                        color: Theme.of(context).textTheme.bodySmall?.color,
-                      ),
-                    ),
                   ],
                 ),
               ],
@@ -367,6 +365,7 @@ class _TripsPageState extends State<TripsPage> {
   }
 
   void _showTripDetail(BuildContext context, TripDetail trip) {
+    final distanceUnits = context.read<DistanceUnitService>();
     showModalBottomSheet(
       context: context,
       isScrollControlled: true,
@@ -491,7 +490,9 @@ class _TripsPageState extends State<TripsPage> {
                           ),
                         ],
                         const SizedBox(width: 4),
-                        Text('${trip.mileage.toStringAsFixed(1)} mi'),
+                        Text(
+                          distanceUnits.format(trip.mileage, decimals: 1),
+                        ),
                       ],
                     ),
                     const SizedBox(height: 8),
@@ -506,7 +507,12 @@ class _TripsPageState extends State<TripsPage> {
                             title: Text('${leg.start} → ${leg.end}'),
                             subtitle: Text(_formatDate(leg.beginTime)),
                             trailing: Text(
-                              leg.mileage?.toStringAsFixed(1) ?? '-',
+                              leg.mileage == null
+                                  ? '-'
+                                  : distanceUnits.format(
+                                      leg.mileage!,
+                                      decimals: 1,
+                                    ),
                               style: Theme.of(context).textTheme.labelLarge
                                   ?.copyWith(fontWeight: FontWeight.bold),
                             ),
@@ -529,6 +535,7 @@ class _TripsPageState extends State<TripsPage> {
     TripDetail trip,
     TripSummary? summary,
   ) {
+    final distanceUnits = context.read<DistanceUnitService>();
     showModalBottomSheet(
       context: context,
       isScrollControlled: true,
@@ -561,7 +568,9 @@ class _TripsPageState extends State<TripsPage> {
                               ?.copyWith(fontWeight: FontWeight.bold),
                         ),
                         const Spacer(),
-                        Text('${trip.mileage.toStringAsFixed(1)} mi'),
+                        Text(
+                          distanceUnits.format(trip.mileage, decimals: 1),
+                        ),
                       ],
                     ),
                     const SizedBox(height: 8),