feat: Implement Google Maps integration for shift details and enhance UI components
This commit is contained in:
@@ -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,
|
||||
|
||||
@@ -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(
|
||||
|
||||
@@ -32,7 +32,7 @@ class ShiftDescriptionSection extends StatelessWidget {
|
||||
const SizedBox(height: UiConstants.space2),
|
||||
Text(
|
||||
description,
|
||||
style: UiTypography.body2r.textSecondary,
|
||||
style: UiTypography.body2r,
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
@@ -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),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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:
|
||||
|
||||
Reference in New Issue
Block a user