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