style: redesign subscription list items as beautiful tear-off tickets with notched edges and dashed separator lines, removing all similarities to loyalty cards
This commit is contained in:
parent
561e69e0f0
commit
afa528abd6
@ -1,8 +1,7 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../theme/app_theme.dart';
|
||||
|
||||
/// "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.
|
||||
class SubscriptionListWidget extends StatelessWidget {
|
||||
final List<dynamic> subscriptions;
|
||||
@ -13,6 +12,9 @@ class SubscriptionListWidget extends StatelessWidget {
|
||||
Widget build(BuildContext context) {
|
||||
if (subscriptions.isEmpty) return const SizedBox.shrink();
|
||||
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
@ -20,8 +22,8 @@ class SubscriptionListWidget extends StatelessWidget {
|
||||
padding: const EdgeInsets.fromLTRB(16, 24, 16, 8),
|
||||
child: Text(
|
||||
'MY SUBSCRIPTIONS',
|
||||
style: Theme.of(context).textTheme.labelLarge?.copyWith(
|
||||
color: AppTheme.onSurfaceVariant,
|
||||
style: theme.textTheme.labelLarge?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
letterSpacing: 1.2,
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.bold,
|
||||
@ -85,45 +87,37 @@ class _SubscriptionCard extends StatelessWidget {
|
||||
final endDate = _formatDate(sub['subscription_end_date']);
|
||||
final active = _isActive();
|
||||
|
||||
return Container(
|
||||
margin: const EdgeInsets.fromLTRB(16, 8, 16, 8),
|
||||
padding: const EdgeInsets.all(20),
|
||||
decoration: BoxDecoration(
|
||||
return Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16, 8, 16, 8),
|
||||
child: PhysicalShape(
|
||||
clipper: TicketClipper(),
|
||||
color: colorScheme.surfaceContainerLowest,
|
||||
border: Border.all(
|
||||
color: active ? colorScheme.secondary.withValues(alpha: 0.4) : colorScheme.outline.withValues(alpha: 0.4),
|
||||
width: 1.5,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withValues(alpha: 0.04),
|
||||
blurRadius: 10,
|
||||
offset: const Offset(0, 4),
|
||||
),
|
||||
],
|
||||
),
|
||||
elevation: 3,
|
||||
shadowColor: Colors.black.withValues(alpha: 0.15),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(20),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Top Section: Title & Status
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.card_membership_rounded,
|
||||
Icons.local_activity_rounded, // Distinct ticket pass icon
|
||||
size: 18,
|
||||
color: active ? colorScheme.secondary : colorScheme.outline,
|
||||
color: active ? colorScheme.primary : colorScheme.outline,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
'SUBSCRIPTION CARD',
|
||||
'SUBSCRIPTION PASS', // Distinct title
|
||||
style: theme.textTheme.labelLarge?.copyWith(
|
||||
color: active ? colorScheme.secondary : colorScheme.outline,
|
||||
color: active ? colorScheme.primary : colorScheme.outline,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 10,
|
||||
letterSpacing: 1.0,
|
||||
letterSpacing: 1.2,
|
||||
),
|
||||
),
|
||||
],
|
||||
@ -134,7 +128,7 @@ class _SubscriptionCard extends StatelessWidget {
|
||||
color: active
|
||||
? const Color(0xFF1B5E20).withValues(alpha: 0.10)
|
||||
: const Color(0xFFB02500).withValues(alpha: 0.08),
|
||||
borderRadius: BorderRadius.circular(20), // Pill status badge
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
child: Text(
|
||||
active ? 'ACTIVE' : 'EXPIRED',
|
||||
@ -150,7 +144,16 @@ class _SubscriptionCard extends StatelessWidget {
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 14),
|
||||
const SizedBox(height: 18),
|
||||
// Dashed Separator
|
||||
CustomPaint(
|
||||
size: const Size(double.infinity, 1),
|
||||
painter: DashedLinePainter(
|
||||
color: colorScheme.outline.withValues(alpha: 0.25),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 18),
|
||||
// Bottom Section: Details
|
||||
Text(
|
||||
programName,
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
@ -167,7 +170,7 @@ class _SubscriptionCard extends StatelessWidget {
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'Card Number',
|
||||
'Pass Code', // Distinct field label
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
fontSize: 10,
|
||||
@ -208,6 +211,72 @@ class _SubscriptionCard extends StatelessWidget {
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// 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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user