admin.suherdy/odoo_loyalty_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: redesign subscription list items as beautiful tear-off tickets with notched edges and dashed separator lines, removing all similarities to loyalty cards

Browse Source
This commit is contained in:
Suherdy Yacob 2026-06-14 11:19:28 +07:00
parent 561e69e0f0
commit afa528abd6
1 changed files with 177 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

285
lib/widgets/subscription_list_widget.dart
View File

@ -1,8 +1,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import '../theme/app_theme.dart';
/// "My Subscriptions" list displayed on the home tab below the loyalty card. /// "My Subscriptions" list displayed on the home tab below the loyalty card.
/// Renders each subscription as a beautiful standalone card visually distinct /// Renders each subscription as a beautiful standalone ticket card visually distinct
/// from the points-based loyalty card. /// from the points-based loyalty card.
class SubscriptionListWidget extends StatelessWidget { class SubscriptionListWidget extends StatelessWidget {
final List<dynamic> subscriptions; final List<dynamic> subscriptions;
@ -13,6 +12,9 @@ class SubscriptionListWidget extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
if (subscriptions.isEmpty) return const SizedBox.shrink(); if (subscriptions.isEmpty) return const SizedBox.shrink();
final theme = Theme.of(context);
final colorScheme = theme.colorScheme;
return Column( return Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
@ -20,8 +22,8 @@ class SubscriptionListWidget extends StatelessWidget {
padding: const EdgeInsets.fromLTRB(16, 24, 16, 8), padding: const EdgeInsets.fromLTRB(16, 24, 16, 8),
child: Text( child: Text(
'MY SUBSCRIPTIONS', 'MY SUBSCRIPTIONS',
style: Theme.of(context).textTheme.labelLarge?.copyWith( style: theme.textTheme.labelLarge?.copyWith(
color: AppTheme.onSurfaceVariant, color: colorScheme.onSurfaceVariant,
letterSpacing: 1.2, letterSpacing: 1.2,
fontSize: 11, fontSize: 11,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
@ -85,129 +87,196 @@ class _SubscriptionCard extends StatelessWidget {
final endDate = _formatDate(sub['subscription_end_date']); final endDate = _formatDate(sub['subscription_end_date']);
final active = _isActive(); final active = _isActive();
return Container( return Padding(
margin: const EdgeInsets.fromLTRB(16, 8, 16, 8), padding: const EdgeInsets.fromLTRB(16, 8, 16, 8),
padding: const EdgeInsets.all(20), child: PhysicalShape(
decoration: BoxDecoration( clipper: TicketClipper(),
color: colorScheme.surfaceContainerLowest, color: colorScheme.surfaceContainerLowest,
border: Border.all( elevation: 3,
color: active ? colorScheme.secondary.withValues(alpha: 0.4) : colorScheme.outline.withValues(alpha: 0.4), shadowColor: Colors.black.withValues(alpha: 0.15),
width: 1.5, child: Container(
), padding: const EdgeInsets.all(20),
borderRadius: BorderRadius.circular(16), child: Column(
boxShadow: [ crossAxisAlignment: CrossAxisAlignment.start,
BoxShadow(
color: Colors.black.withValues(alpha: 0.04),
blurRadius: 10,
offset: const Offset(0, 4),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
// Top Section: Title & Status
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
Icon( Row(
Icons.card_membership_rounded, children: [
size: 18, Icon(
color: active ? colorScheme.secondary : colorScheme.outline, Icons.local_activity_rounded, // Distinct ticket pass icon
size: 18,
color: active ? colorScheme.primary : colorScheme.outline,
),
const SizedBox(width: 8),
Text(
'SUBSCRIPTION PASS', // Distinct title
style: theme.textTheme.labelLarge?.copyWith(
color: active ? colorScheme.primary : colorScheme.outline,
fontWeight: FontWeight.bold,
fontSize: 10,
letterSpacing: 1.2,
),
),
],
), ),
const SizedBox(width: 8), Container(
Text( padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
'SUBSCRIPTION CARD', decoration: BoxDecoration(
style: theme.textTheme.labelLarge?.copyWith( color: active
color: active ? colorScheme.secondary : colorScheme.outline, ? const Color(0xFF1B5E20).withValues(alpha: 0.10)
fontWeight: FontWeight.bold, : const Color(0xFFB02500).withValues(alpha: 0.08),
fontSize: 10, borderRadius: BorderRadius.circular(20),
letterSpacing: 1.0, ),
), child: Text(
active ? 'ACTIVE' : 'EXPIRED',
style: TextStyle(
fontSize: 9,
fontWeight: FontWeight.bold,
letterSpacing: 0.8,
color: active
? const Color(0xFF2E7D32)
: const Color(0xFFB02500),
),
),
), ),
], ],
), ),
Container( const SizedBox(height: 18),
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), // Dashed Separator
decoration: BoxDecoration( CustomPaint(
color: active size: const Size(double.infinity, 1),
? const Color(0xFF1B5E20).withValues(alpha: 0.10) painter: DashedLinePainter(
: const Color(0xFFB02500).withValues(alpha: 0.08), color: colorScheme.outline.withValues(alpha: 0.25),
borderRadius: BorderRadius.circular(20), // Pill status badge
),
child: Text(
active ? 'ACTIVE' : 'EXPIRED',
style: TextStyle(
fontSize: 9,
fontWeight: FontWeight.bold,
letterSpacing: 0.8,
color: active
? const Color(0xFF2E7D32)
: const Color(0xFFB02500),
),
), ),
), ),
], const SizedBox(height: 18),
), // Bottom Section: Details
const SizedBox(height: 14), Text(
Text( programName,
programName, style: theme.textTheme.titleMedium?.copyWith(
style: theme.textTheme.titleMedium?.copyWith( fontWeight: FontWeight.bold,
fontWeight: FontWeight.bold, color: colorScheme.onSurface,
color: colorScheme.onSurface, fontFamily: 'serif',
fontFamily: 'serif', ),
),
),
const SizedBox(height: 12),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Card Number',
style: theme.textTheme.bodySmall?.copyWith(
color: colorScheme.onSurfaceVariant,
fontSize: 10,
),
),
const SizedBox(height: 2),
Text(
code.isNotEmpty ? code : 'N/A',
style: theme.textTheme.bodyMedium?.copyWith(
fontFamily: 'monospace',
fontWeight: FontWeight.bold,
color: colorScheme.onSurface,
),
),
],
), ),
Column( const SizedBox(height: 12),
crossAxisAlignment: CrossAxisAlignment.end, Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
Text( Column(
'Validity Period', crossAxisAlignment: CrossAxisAlignment.start,
style: theme.textTheme.bodySmall?.copyWith( children: [
color: colorScheme.onSurfaceVariant, Text(
fontSize: 10, 'Pass Code', // Distinct field label
), style: theme.textTheme.bodySmall?.copyWith(
color: colorScheme.onSurfaceVariant,
fontSize: 10,
),
),
const SizedBox(height: 2),
Text(
code.isNotEmpty ? code : 'N/A',
style: theme.textTheme.bodyMedium?.copyWith(
fontFamily: 'monospace',
fontWeight: FontWeight.bold,
color: colorScheme.onSurface,
),
),
],
), ),
const SizedBox(height: 2), Column(
Text( crossAxisAlignment: CrossAxisAlignment.end,
'$startDate - $endDate', children: [
style: theme.textTheme.bodyMedium?.copyWith( Text(
color: colorScheme.onSurface, 'Validity Period',
fontWeight: FontWeight.w600, style: theme.textTheme.bodySmall?.copyWith(
), color: colorScheme.onSurfaceVariant,
fontSize: 10,
),
),
const SizedBox(height: 2),
Text(
'$startDate - $endDate',
style: theme.textTheme.bodyMedium?.copyWith(
color: colorScheme.onSurface,
fontWeight: FontWeight.w600,
),
),
],
), ),
], ],
), ),
], ],
), ),
], ),
), ),
); );
} }
} }
/// Custom Clipper for a ticket-like appearance with side notches.
class TicketClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final path = Path();
path.lineTo(0, 0);
path.lineTo(size.width, 0);
// Right side notch at height 49 (approx. center of vertical separator space)
const double notchY = 49.0;
const double notchRadius = 8.0;
path.lineTo(size.width, notchY - notchRadius);
path.arcToPoint(
Offset(size.width, notchY + notchRadius),
radius: const Radius.circular(notchRadius),
clockwise: false,
);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
// Left side notch
path.lineTo(0, notchY + notchRadius);
path.arcToPoint(
const Offset(0, notchY - notchRadius),
radius: const Radius.circular(notchRadius),
clockwise: false,
);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
/// Painter to draw a clean dashed divider line.
class DashedLinePainter extends CustomPainter {
final Color color;
DashedLinePainter({required this.color});
@override
void paint(Canvas canvas, Size size) {
double dashWidth = 5.0;
double dashSpace = 4.0;
double startX = 0.0;
final paint = Paint()
..color = color
..strokeWidth = 1.0;
while (startX < size.width) {
canvas.drawLine(
Offset(startX, 0),
Offset(startX + dashWidth, 0),
paint,
);
startX += dashWidth + dashSpace;
}
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}