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

Redesign bottom action bar with 4 equal-width responsive buttons

Browse Source 
Replaces complex conditional button layout with 4 uniform buttons:
Start, Photo, Note, and Completed. Uses Svrnty color system for
consistency - crimsonRed for primary/danger actions and slateGray
matching the delivery list badges. Increases button height, font
size (18px), and icon size (24px) for better readability.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jean-Philippe Brule 2025-11-23 11:45:24 -05:00
parent 65f0f4451b
commit b2be3ec4ae
1 changed files with 43 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
lib/components/dark_mode_map.dart
View File

@ -338,7 +338,7 @@ class _DarkModeMapComponentState extends State<DarkModeMapComponent> {
), ),
), ),
), ),
// Bottom action button bar // Bottom action button bar - 4 equal-width buttons
if (widget.selectedDelivery != null) if (widget.selectedDelivery != null)
Positioned( Positioned(
bottom: 0, bottom: 0,
@ -361,53 +361,45 @@ class _DarkModeMapComponentState extends State<DarkModeMapComponent> {
), ),
child: Row( child: Row(
children: [ children: [
// Recenter button // Start button
Expanded( Expanded(
child: _buildBottomActionButton( child: _buildBottomActionButton(
label: 'Recenter', label: _isNavigating ? 'Stop' : 'Start',
icon: Icons.location_on, icon: _isNavigating ? Icons.stop : Icons.navigation,
onPressed: _recenterMap, onPressed: _isStartingNavigation || _isInitializing
? null
: (_isNavigating ? _stopNavigation : _startNavigation),
isDanger: _isNavigating,
), ),
), ),
const SizedBox(width: 12), const SizedBox(width: 8),
// Mark Complete button (if not already delivered) // Photo button
if (!widget.selectedDelivery!.delivered)
Expanded( Expanded(
child: _buildBottomActionButton( child: _buildBottomActionButton(
label: 'Mark Complete', label: 'Photo',
icon: Icons.check_circle, icon: Icons.camera_alt,
onPressed: () => widget.onAction?.call('complete'), onPressed: () => widget.onAction?.call('photo'),
isPrimary: true,
), ),
), ),
if (widget.selectedDelivery!.delivered) const SizedBox(width: 8),
// Note button
Expanded( Expanded(
child: _buildBottomActionButton( child: _buildBottomActionButton(
label: _isInitializing ? 'Initializing...' : 'Start Navigation', label: 'Note',
icon: Icons.directions, icon: Icons.note_add,
onPressed: _isInitializing ? null : _startNavigation, onPressed: () => widget.onAction?.call('note'),
isPrimary: true,
), ),
), ),
if (!_isNavigating && !widget.selectedDelivery!.delivered) const SizedBox(width: 8),
const SizedBox(width: 12), // Completed button
if (!_isNavigating && !widget.selectedDelivery!.delivered)
Expanded( Expanded(
child: _buildBottomActionButton( child: _buildBottomActionButton(
label: _isStartingNavigation || _isInitializing ? 'Loading...' : 'Navigate', label: widget.selectedDelivery!.delivered ? 'Undo' : 'Completed',
icon: Icons.directions, icon: widget.selectedDelivery!.delivered ? Icons.undo : Icons.check_circle,
onPressed: _isStartingNavigation || _isInitializing ? null : _startNavigation, onPressed: () => widget.onAction?.call(
widget.selectedDelivery!.delivered ? 'uncomplete' : 'complete',
), ),
), isPrimary: !widget.selectedDelivery!.delivered,
if (_isNavigating)
const SizedBox(width: 12),
if (_isNavigating)
Expanded(
child: _buildBottomActionButton(
label: 'Stop',
icon: Icons.stop,
onPressed: _stopNavigation,
isDanger: true,
), ),
), ),
], ],
@ -486,12 +478,12 @@ class _DarkModeMapComponentState extends State<DarkModeMapComponent> {
Color textColor = Colors.white; Color textColor = Colors.white;
if (isDanger) { if (isDanger) {
backgroundColor = Colors.red.shade600; backgroundColor = SvrntyColors.crimsonRed;
} else if (isPrimary) { } else if (isPrimary) {
backgroundColor = SvrntyColors.crimsonRed; backgroundColor = SvrntyColors.crimsonRed;
} else { } else {
backgroundColor = Theme.of(context).colorScheme.surfaceContainerHighest; // Use the same slateGray as delivery list badges
textColor = Theme.of(context).colorScheme.onSurface; backgroundColor = SvrntyColors.slateGray;
} }
// Reduce opacity when disabled // Reduce opacity when disabled
@ -507,8 +499,8 @@ class _DarkModeMapComponentState extends State<DarkModeMapComponent> {
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 12, horizontal: 14,
vertical: 12, vertical: 14,
), ),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
@ -517,15 +509,15 @@ class _DarkModeMapComponentState extends State<DarkModeMapComponent> {
Icon( Icon(
icon, icon,
color: textColor, color: textColor,
size: 18, size: 24,
), ),
const SizedBox(width: 6), const SizedBox(width: 8),
Text( Text(
label, label,
style: TextStyle( style: TextStyle(
color: textColor, color: textColor,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w600,
fontSize: 14, fontSize: 18,
), ),
), ),
], ],