Add delivery order badges and optimize list performance
Enhance delivery list UI with sequential order badges and improve scrolling performance with faster animations for better user experience. Delivery Order Badge: - Add 60x60px status-colored square badge showing delivery sequence number - Position badge to the left of vertical status bar for clear visual hierarchy - White text (26px, bold) centered in badge - Automatically displays deliveryIndex + 1 (first delivery = 1, second = 2, etc.) - Status color matches delivery state (green for completed, gray for pending, etc.) - 10px border radius for modern appearance Layout Enhancements: - Sidebar expanded from 360px to 420px to accommodate order badges - Vertical centering of row elements for better visual balance - Maintains optimized spacing: badge (60px) + gap (12px) + bar (6px) + gap (16px) + content - Full list scrolling restored (removed 4-item limit) Animation Performance: - Stagger animation delay reduced by 90% (50ms to 5ms) - Fast stagger: 30ms to 3ms for ultra-responsive scrolling - Delivery items appear almost instantly when scrolling - Total animation time for 20 items: 500ms to 100ms - Maintains subtle stagger effect while feeling immediate User Experience Improvements: - Clear visual indication of delivery order in route - Faster perceived loading when scrolling through deliveries - Better readability with larger, prominent order numbers - Consistent status color coding across badge and accent bar Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
dc2c82e938
commit
98ce195bbb
@ -124,9 +124,29 @@ class _DeliveryListItemState extends State<DeliveryListItem>
|
|||||||
children: [
|
children: [
|
||||||
// Main delivery info row
|
// Main delivery info row
|
||||||
Row(
|
Row(
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
crossAxisAlignment: CrossAxisAlignment.center,
|
||||||
children: [
|
children: [
|
||||||
// Left accent bar (taller for better visual balance)
|
// Order number badge (left of status bar)
|
||||||
|
Container(
|
||||||
|
width: 60,
|
||||||
|
height: 60,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: statusColor,
|
||||||
|
borderRadius: BorderRadius.circular(10),
|
||||||
|
),
|
||||||
|
child: Center(
|
||||||
|
child: Text(
|
||||||
|
'${widget.delivery.deliveryIndex + 1}',
|
||||||
|
style: const TextStyle(
|
||||||
|
color: Colors.white,
|
||||||
|
fontSize: 26,
|
||||||
|
fontWeight: FontWeight.w700,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: 12),
|
||||||
|
// Left accent bar (vertical status bar)
|
||||||
Container(
|
Container(
|
||||||
width: 6,
|
width: 6,
|
||||||
height: 80,
|
height: 80,
|
||||||
|
|||||||
@ -71,10 +71,10 @@ class _MapSidebarLayoutState extends State<MapSidebarLayout>
|
|||||||
flex: (widget.mapRatio * 100).toInt(),
|
flex: (widget.mapRatio * 100).toInt(),
|
||||||
child: widget.mapWidget,
|
child: widget.mapWidget,
|
||||||
),
|
),
|
||||||
// Collapsible sidebar with toggle button (expanded to 360px for better readability)
|
// Collapsible sidebar with toggle button (expanded to 420px for badge + content)
|
||||||
AnimatedContainer(
|
AnimatedContainer(
|
||||||
duration: const Duration(milliseconds: 300),
|
duration: const Duration(milliseconds: 300),
|
||||||
width: _isExpanded ? 360 : 64,
|
width: _isExpanded ? 420 : 64,
|
||||||
color: isDarkMode ? SvrntyColors.almostBlack : Colors.white,
|
color: isDarkMode ? SvrntyColors.almostBlack : Colors.white,
|
||||||
child: Column(
|
child: Column(
|
||||||
children: [
|
children: [
|
||||||
|
|||||||
@ -272,7 +272,7 @@ class UnifiedDeliveryListView extends StatelessWidget {
|
|||||||
controller: scrollController,
|
controller: scrollController,
|
||||||
padding: const EdgeInsets.only(top: 4, bottom: 8),
|
padding: const EdgeInsets.only(top: 4, bottom: 8),
|
||||||
physics: const AlwaysScrollableScrollPhysics(),
|
physics: const AlwaysScrollableScrollPhysics(),
|
||||||
itemCount: deliveries.length > 4 ? 4 : deliveries.length, // Limit to max 4 items for better readability
|
itemCount: deliveries.length, // Show all deliveries with scrolling
|
||||||
itemBuilder: (context, index) {
|
itemBuilder: (context, index) {
|
||||||
final delivery = deliveries[index];
|
final delivery = deliveries[index];
|
||||||
return DeliveryListItem(
|
return DeliveryListItem(
|
||||||
|
|||||||
@ -76,17 +76,17 @@ class AppAnimations {
|
|||||||
// STAGGER DELAYS (FOR LIST ANIMATIONS)
|
// STAGGER DELAYS (FOR LIST ANIMATIONS)
|
||||||
// ============================================
|
// ============================================
|
||||||
|
|
||||||
/// Default stagger delay for list items (50ms)
|
/// Default stagger delay for list items (5ms) - Reduced by 90% for instant loading
|
||||||
static const Duration staggerDelay = Duration(milliseconds: 50);
|
static const Duration staggerDelay = Duration(milliseconds: 5);
|
||||||
|
|
||||||
/// Quick stagger delay (30ms)
|
/// Quick stagger delay (3ms)
|
||||||
static const Duration staggerDelayFast = Duration(milliseconds: 30);
|
static const Duration staggerDelayFast = Duration(milliseconds: 3);
|
||||||
|
|
||||||
/// Slow stagger delay (100ms)
|
/// Slow stagger delay (10ms)
|
||||||
static const Duration staggerDelaySlow = Duration(milliseconds: 100);
|
static const Duration staggerDelaySlow = Duration(milliseconds: 10);
|
||||||
|
|
||||||
/// Stagger delay in milliseconds
|
/// Stagger delay in milliseconds
|
||||||
static const int staggerDelayMs = 50;
|
static const int staggerDelayMs = 5;
|
||||||
|
|
||||||
// ============================================
|
// ============================================
|
||||||
// SCALE ANIMATION CONSTANTS
|
// SCALE ANIMATION CONSTANTS
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user