Plan-B/ionic-planb-logistic-app-flutter
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add mobile UX optimization with toggleable deliveries overlay

Browse Source 
- Add MobileDeliveriesListOpenNotifier provider for overlay state
- Create MobileMapWithOverlay component with slide-up animation
- Update routes_page.dart for responsive mobile/tablet/desktop layouts
- Mobile: full-screen map with FAB toggle for deliveries list
- Tablet/Desktop: maintain existing split-view layout

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Mathias Beaulieu-Duncan
2026-01-20 14:58:52 -05:00
parent e8ea9a1903
commit 0fefe80d13
4 changed files with 317 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/components/mobile_map_with_overlay.dart
+230
View File
@@ -0,0 +1,230 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../models/delivery.dart';
import '../providers/providers.dart';
import '../l10n/app_localizations.dart';
import 'dark_mode_map.dart';
import 'unified_delivery_list.dart';
/// Mobile-optimized map layout with toggleable deliveries list overlay
///
/// This component provides a full-screen map view for mobile devices with
/// a bottom overlay that can be toggled to show the deliveries list.
class MobileMapWithOverlay extends ConsumerStatefulWidget {
final List<Delivery> deliveries;
final Delivery? selectedDelivery;
final ValueChanged<Delivery?> onDeliverySelected;
final Function(Delivery, String) onDeliveryAction;
const MobileMapWithOverlay({
super.key,
required this.deliveries,
this.selectedDelivery,
required this.onDeliverySelected,
required this.onDeliveryAction,
});
@override
ConsumerState<MobileMapWithOverlay> createState() => _MobileMapWithOverlayState();
}
class _MobileMapWithOverlayState extends ConsumerState<MobileMapWithOverlay>
with SingleTickerProviderStateMixin {
late ScrollController _listScrollController;
late AnimationController _animationController;
late Animation<double> _slideAnimation;
@override
void initState() {
super.initState();
_listScrollController = ScrollController();
_animationController = AnimationController(
duration: const Duration(milliseconds: 300),
vsync: this,
);
_slideAnimation = CurvedAnimation(
parent: _animationController,
curve: Curves.easeInOut,
);
}
@override
void dispose() {
_listScrollController.dispose();
_animationController.dispose();
super.dispose();
}
void _toggleList() {
final isOpen = ref.read(mobileDeliveriesListOpenProvider);
if (isOpen) {
_animationController.reverse();
} else {
_animationController.forward();
}
ref.read(mobileDeliveriesListOpenProvider.notifier).toggle();
}
int get _completedCount {
return widget.deliveries.where((d) => d.delivered).length;
}
int get _totalCount {
// Exclude warehouse delivery from total count
return widget.deliveries.where((d) => !d.isWarehouseDelivery).length;
}
@override
Widget build(BuildContext context) {
final isListOpen = ref.watch(mobileDeliveriesListOpenProvider);
final l10n = AppLocalizations.of(context);
final screenHeight = MediaQuery.of(context).size.height;
final overlayHeight = screenHeight * 0.7;
return Stack(
children: [
// Full-screen map
Positioned.fill(
child: DarkModeMapComponent(
deliveries: widget.deliveries,
selectedDelivery: widget.selectedDelivery,
onDeliverySelected: widget.onDeliverySelected,
onAction: (action) {
if (widget.selectedDelivery != null) {
widget.onDeliveryAction(widget.selectedDelivery!, action);
}
},
),
),
// Dimmed overlay when list is open
if (isListOpen)
Positioned.fill(
child: GestureDetector(
onTap: _toggleList,
child: AnimatedOpacity(
duration: const Duration(milliseconds: 300),
opacity: isListOpen ? 0.3 : 0.0,
child: Container(
color: Colors.black,
),
),
),
),
// Animated deliveries overlay
AnimatedBuilder(
animation: _slideAnimation,
builder: (context, child) {
return Positioned(
left: 0,
right: 0,
bottom: -overlayHeight * (1 - _slideAnimation.value),
height: overlayHeight,
child: GestureDetector(
onVerticalDragEnd: (details) {
// Swipe down to close
if (details.primaryVelocity != null && details.primaryVelocity! > 500) {
_toggleList();
}
},
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
borderRadius: const BorderRadius.vertical(
top: Radius.circular(16),
),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.2),
blurRadius: 10,
offset: const Offset(0, -2),
),
],
),
child: Column(
children: [
// Drag handle
Container(
height: 32,
alignment: Alignment.center,
child: Container(
height: 4,
width: 40,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.3),
borderRadius: BorderRadius.circular(2),
),
),
),
// Header with close button
Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Theme.of(context).dividerColor,
width: 1,
),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
l10n.deliveries,
style: Theme.of(context).textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.w700,
),
),
IconButton(
icon: const Icon(Icons.close),
onPressed: _toggleList,
tooltip: l10n.close,
),
],
),
),
// Deliveries list
Expanded(
child: UnifiedDeliveryListView(
deliveries: widget.deliveries,
selectedDelivery: widget.selectedDelivery,
scrollController: _listScrollController,
onDeliverySelected: (delivery) {
widget.onDeliverySelected(delivery);
// Optionally close the overlay after selection
// _toggleList();
},
onItemAction: (delivery, action) {
widget.onDeliveryAction(delivery, action);
},
isCollapsed: false,
),
),
],
),
),
),
);
},
),
// Floating toggle button (FAB) - only show when list is closed
if (!isListOpen)
Positioned(
bottom: 80, // Above bottom action buttons
right: 16,
child: FloatingActionButton.extended(
onPressed: _toggleList,
icon: const Icon(Icons.list),
label: Text('$_completedCount/$_totalCount'),
backgroundColor: Theme.of(context).colorScheme.primaryContainer,
foregroundColor: Theme.of(context).colorScheme.onPrimaryContainer,
elevation: 4,
),
),
],
);
}
}
lib/pages/routes_page.dart
+65
View File
@@ -17,7 +17,9 @@ import '../components/dark_mode_map.dart';
import '../components/loading_dialog.dart';
import '../components/notes_dialog.dart';
import '../components/photo_capture_dialog.dart';
import '../components/mobile_map_with_overlay.dart';
import '../services/location_permission_service.dart';
import '../utils/breakpoints.dart';
import 'deliveries_page.dart';
import 'settings_page.dart';
@@ -462,6 +464,69 @@ class _RoutesPageState extends ConsumerState<RoutesPage> {
}
return allDeliveriesData.when(
data: (allDeliveries) {
final isMobile = context.isMobile;
// Mobile layout: Show routes list full-screen when no route selected
if (isMobile && _selectedRoute == null) {
return RefreshIndicator(
onRefresh: () async {
// ignore: unused_result
ref.refresh(deliveryRoutesProvider);
// ignore: unused_result
ref.refresh(allDeliveriesProvider);
},
child: CollapsibleRoutesSidebar(
routes: routes,
selectedRoute: null,
onRouteSelected: _selectRoute,
),
);
}
// Mobile layout: full-screen map with overlay when route is selected
if (isMobile && _selectedRoute != null) {
final routeDeliveries = allDeliveries
.where((d) => d.routeFragmentId == _selectedRoute!.id)
.toList();
return RefreshIndicator(
onRefresh: () async {
// ignore: unused_result
ref.refresh(deliveryRoutesProvider);
// ignore: unused_result
ref.refresh(allDeliveriesProvider);
},
child: Stack(
children: [
MobileMapWithOverlay(
deliveries: routeDeliveries,
selectedDelivery: _selectedDelivery,
onDeliverySelected: (delivery) {
setState(() {
_selectedDelivery = delivery;
});
_autoShowNotesIfNeeded(delivery);
},
onDeliveryAction: (delivery, action) {
_handleDeliveryAction(action, delivery, _selectedRoute!.id);
},
),
// Back button to return to routes list
Positioned(
top: 16,
left: 16,
child: FloatingActionButton.small(
onPressed: _backToRoutes,
backgroundColor: Theme.of(context).colorScheme.surface,
child: const Icon(Icons.arrow_back),
),
),
],
),
);
}
// Tablet/Desktop layout: split view with map + sidebar
return RefreshIndicator(
onRefresh: () async {
// ignore: unused_result
lib/providers/providers.dart
+13
View File
@@ -179,6 +179,19 @@ final collapseStateProvider = NotifierProvider<CollapseStateNotifier, bool>(() {
return CollapseStateNotifier();
});
// Mobile deliveries list toggle state notifier for mobile overlay
class MobileDeliveriesListOpenNotifier extends Notifier<bool> {
@override
bool build() => false; // Default: closed
void toggle() => state = !state;
void setOpen(bool open) => state = open;
}
final mobileDeliveriesListOpenProvider = NotifierProvider<MobileDeliveriesListOpenNotifier, bool>(() {
return MobileDeliveriesListOpenNotifier();
});
class _EmptyQuery implements Serializable {
@override
Map<String, Object?> toJson() => {};