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

Fix PremiumRouteCard layout issue - use border instead of Container

Browse Source
This commit is contained in:
Jean-Philippe Brule
2025-11-15 14:50:09 -05:00
parent b52454dd6c
commit 3f0310d856
4 changed files with 714 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/components/premium_route_card.dart
+72 -127
View File
@@ -64,6 +64,7 @@ class _PremiumRouteCardState extends State<PremiumRouteCard>
final isDark = Theme.of(context).brightness == Brightness.dark;
final progressPercentage = (widget.route.progress * 100).toStringAsFixed(0);
final isCompleted = widget.route.progress >= 1.0;
final accentColor = isCompleted ? SvrntyColors.statusCompleted : SvrntyColors.crimsonRed;
return MouseRegion(
onEnter: (_) => _onHoverEnter(),
@@ -92,154 +93,98 @@ class _PremiumRouteCardState extends State<PremiumRouteCard>
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
color: isDark
? const Color(0xFF14161A)
: const Color(0xFFFAFAFC),
color: isDark ? const Color(0xFF14161A) : const Color(0xFFFAFAFC),
border: Border(
left: BorderSide(color: accentColor, width: 4),
),
),
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// Left accent bar + Header
// Header
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Accent bar
Container(
width: 4,
height: double.infinity,
decoration: BoxDecoration(
color: isCompleted
? SvrntyColors.statusCompleted
: SvrntyColors.crimsonRed,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(12),
bottomLeft: Radius.circular(12),
),
),
),
// Content
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Route name
Text(
widget.route.name,
style:
Theme.of(context).textTheme.titleLarge?.copyWith(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.route.name,
style: Theme.of(context).textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.w600,
letterSpacing: -0.3,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 8),
RichText(
text: TextSpan(
children: [
TextSpan(
text: '${widget.route.deliveredCount}/${widget.route.deliveriesCount}',
style: Theme.of(context).textTheme.bodySmall?.copyWith(
fontWeight: FontWeight.w600,
letterSpacing: -0.3,
color: accentColor,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
TextSpan(
text: ' completed',
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: isDark ? Colors.grey[400] : Colors.grey[600],
),
),
],
),
const SizedBox(height: 4),
// Completion text
RichText(
text: TextSpan(
children: [
TextSpan(
text:
'${widget.route.deliveredCount}/${widget.route.deliveriesCount}',
style: Theme.of(context)
.textTheme
.bodySmall
?.copyWith(
fontWeight: FontWeight.w600,
color: isCompleted
? SvrntyColors.statusCompleted
: SvrntyColors.crimsonRed,
),
),
TextSpan(
text: ' completed',
style: Theme.of(context)
.textTheme
.bodySmall
?.copyWith(
color: isDark
? Colors.grey[400]
: Colors.grey[600],
),
),
],
),
),
],
),
),
],
),
),
// Delivery count badge
Padding(
padding: const EdgeInsets.fromLTRB(0, 16, 16, 0),
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 4,
),
decoration: BoxDecoration(
color: SvrntyColors.crimsonRed,
borderRadius: BorderRadius.circular(6),
),
child: Text(
widget.route.deliveriesCount.toString(),
style: Theme.of(context)
.textTheme
.labelSmall
?.copyWith(
color: Colors.white,
fontWeight: FontWeight.w600,
),
),
const SizedBox(width: 12),
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: SvrntyColors.crimsonRed,
borderRadius: BorderRadius.circular(6),
),
child: Text(
widget.route.deliveriesCount.toString(),
style: Theme.of(context).textTheme.labelSmall?.copyWith(
color: Colors.white,
fontWeight: FontWeight.w600,
),
),
),
],
),
// Progress section
Padding(
padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Progress percentage text
Text(
'$progressPercentage% progress',
style: Theme.of(context).textTheme.labelSmall?.copyWith(
color: isDark
? Colors.grey[400]
: Colors.grey[600],
fontSize: 11,
letterSpacing: 0.3,
),
),
const SizedBox(height: 8),
// Progress bar with gradient
ClipRRect(
borderRadius: BorderRadius.circular(4),
child: Container(
height: 6,
decoration: BoxDecoration(
color: isDark
? Colors.grey[800]
: Colors.grey[200],
borderRadius: BorderRadius.circular(4),
),
child: LinearProgressIndicator(
value: widget.route.progress,
backgroundColor: Colors.transparent,
valueColor: AlwaysStoppedAnimation<Color>(
isCompleted
? SvrntyColors.statusCompleted
: SvrntyColors.crimsonRed,
),
// Progress
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'$progressPercentage% progress',
style: Theme.of(context).textTheme.labelSmall?.copyWith(
color: isDark ? Colors.grey[400] : Colors.grey[600],
fontSize: 11,
letterSpacing: 0.3,
),
),
const SizedBox(height: 8),
ClipRRect(
borderRadius: BorderRadius.circular(4),
child: SizedBox(
height: 6,
child: LinearProgressIndicator(
value: widget.route.progress,
backgroundColor: isDark ? Colors.grey[800] : Colors.grey[200],
valueColor: AlwaysStoppedAnimation<Color>(accentColor),
),
),
],
),
),
],
),
],
),