feat: Implement Google Maps integration for shift details and enhance UI components

This commit is contained in:
Achintha Isuru
2026-03-19 15:11:15 -04:00
parent 8121a718bb
commit 2a99587d2f
9 changed files with 141 additions and 7 deletions

View File

@@ -140,6 +140,8 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
ShiftLocationSection(
location: detail.location,
address: detail.address ?? '',
latitude: detail.latitude,
longitude: detail.longitude,
locationLabel: context.t.staff_shifts.shift_details.location,
tbdLabel: context.t.staff_shifts.shift_details.tbd,
getDirectionLabel: context.t.staff_shifts.shift_details.get_direction,

View File

@@ -57,7 +57,7 @@ class ShiftDateTimeSection extends StatelessWidget {
const Icon(
UiIcons.calendar,
size: 20,
color: UiColors.primary,
color: UiColors.textPrimary,
),
const SizedBox(width: UiConstants.space2),
Text(

View File

@@ -32,7 +32,7 @@ class ShiftDescriptionSection extends StatelessWidget {
const SizedBox(height: UiConstants.space2),
Text(
description,
style: UiTypography.body2r.textSecondary,
style: UiTypography.body2r,
),
],
),

View File

@@ -45,8 +45,8 @@ class ShiftDetailsHeader extends StatelessWidget {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(detail.title, style: UiTypography.headline1b.textPrimary),
Text(detail.roleName, style: UiTypography.body1m.textSecondary),
Text(detail.roleName, style: UiTypography.headline1b.textPrimary),
Text(detail.clientName, style: UiTypography.body1m.textSecondary),
],
),
),

View File

@@ -1,6 +1,7 @@
import 'package:core_localization/core_localization.dart';
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:url_launcher/url_launcher.dart';
/// A section displaying the shift's location, address, and "Get direction" action.
@@ -10,6 +11,8 @@ class ShiftLocationSection extends StatelessWidget {
super.key,
required this.location,
required this.address,
this.latitude,
this.longitude,
required this.locationLabel,
required this.tbdLabel,
required this.getDirectionLabel,
@@ -21,6 +24,12 @@ class ShiftLocationSection extends StatelessWidget {
/// Street address.
final String address;
/// Latitude coordinate for map preview.
final double? latitude;
/// Longitude coordinate for map preview.
final double? longitude;
/// Localization string for location section title.
final String locationLabel;
@@ -97,15 +106,53 @@ class ShiftLocationSection extends StatelessWidget {
),
],
),
if (latitude != null && longitude != null) ...<Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(UiConstants.radiusBase),
child: SizedBox(
height: 180,
width: double.infinity,
child: GoogleMap(
initialCameraPosition: CameraPosition(
target: LatLng(latitude!, longitude!),
zoom: 15,
),
markers: <Marker>{
Marker(
markerId: const MarkerId('shift_location'),
position: LatLng(latitude!, longitude!),
),
},
liteModeEnabled: true,
myLocationButtonEnabled: false,
myLocationEnabled: false,
zoomControlsEnabled: false,
mapToolbarEnabled: false,
compassEnabled: false,
rotateGesturesEnabled: false,
scrollGesturesEnabled: false,
tiltGesturesEnabled: false,
zoomGesturesEnabled: false,
),
),
),
const SizedBox(height: UiConstants.space3),
],
],
),
);
}
Future<void> _openDirections(BuildContext context) async {
final String destination = Uri.encodeComponent(
address.isNotEmpty ? address : location,
);
String destination;
if (latitude != null && longitude != null) {
destination = '$latitude,$longitude';
} else {
destination = Uri.encodeComponent(
address.isNotEmpty ? address : location,
);
}
final String url =
'https://www.google.com/maps/dir/?api=1&destination=$destination';

View File

@@ -29,6 +29,7 @@ dependencies:
url_launcher: ^6.3.1
bloc: ^8.1.4
meta: ^1.17.0
google_maps_flutter: ^2.10.0
dev_dependencies:
flutter_test: