Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Sanders
|
42046b4e87 |
@@ -1,12 +1,12 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import '../database/database.dart' as db; // Import database with prefix 'db'
|
||||
import '../database/database.dart' as db;
|
||||
import '../models/transaction_record.dart';
|
||||
import '../utils/category_utils.dart'; // Import category utils
|
||||
import '../utils/category_utils.dart';
|
||||
|
||||
class TransactionListItem extends StatelessWidget {
|
||||
final TransactionRecord transaction; // Use the Drift-generated Transaction class
|
||||
final Animation<double> animation; // Keep animation for potential future use
|
||||
final TransactionRecord transaction;
|
||||
final Animation<double> animation;
|
||||
|
||||
const TransactionListItem({
|
||||
Key? key,
|
||||
@@ -19,10 +19,10 @@ class TransactionListItem extends StatelessWidget {
|
||||
final isDark = Theme.of(context).brightness == Brightness.dark;
|
||||
final theme = Theme.of(context);
|
||||
|
||||
// Get category details (icon, color) using the utility
|
||||
// Get category details
|
||||
final categoryDetails = CategoryUtils.getCategoryDetails(transaction.categoryName);
|
||||
|
||||
// Format the date and time using intl package
|
||||
// Format dates
|
||||
final dateFormatter = DateFormat.MMMd(); // e.g., Sep 10
|
||||
final timeFormatter = DateFormat.jm(); // e.g., 5:08 PM
|
||||
|
||||
@@ -34,87 +34,146 @@ class TransactionListItem extends StatelessWidget {
|
||||
|
||||
String displayDate;
|
||||
if (transactionDay == today) {
|
||||
displayDate = 'Today, ${timeFormatter.format(transaction.date)}';
|
||||
displayDate = 'Today';
|
||||
} else if (transactionDay == yesterday) {
|
||||
displayDate = 'Yesterday, ${timeFormatter.format(transaction.date)}';
|
||||
displayDate = 'Yesterday';
|
||||
} else {
|
||||
// Format for other dates (e.g., "Sep 10, 5:08 PM")
|
||||
displayDate = '${dateFormatter.format(transaction.date)}, ${timeFormatter.format(transaction.date)}';
|
||||
displayDate = dateFormatter.format(transaction.date);
|
||||
}
|
||||
|
||||
String displayTime = timeFormatter.format(transaction.date);
|
||||
|
||||
// Determine text colors based on theme
|
||||
Color primaryTextColor = theme.textTheme.bodyLarge?.color ?? (isDark ? Colors.white : Colors.black87);
|
||||
Color secondaryTextColor = theme.textTheme.bodyMedium?.color ?? (isDark ? Colors.white70 : Colors.grey.shade600);
|
||||
Color amountColor = isDark ? Colors.red.shade200 : Colors.red.shade700; // Expense color
|
||||
Color amountColor = isDark ? Colors.red.shade200 : Colors.red.shade700;
|
||||
|
||||
// Use FadeTransition for item appearance (works with ListView.builder)
|
||||
// Use FadeTransition for item appearance
|
||||
return FadeTransition(
|
||||
opacity: animation, // Apply fade animation
|
||||
child: InkWell( // Make the item tappable
|
||||
onTap: () {
|
||||
// TODO: Implement navigation to transaction details screen or edit action
|
||||
print('Tapped transaction: ${transaction.id}');
|
||||
},
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 16.0), // Consistent padding
|
||||
child: Row(
|
||||
children: [
|
||||
// Icon container with category color/icon
|
||||
Container(
|
||||
padding: const EdgeInsets.all(10),
|
||||
decoration: BoxDecoration(
|
||||
color: categoryDetails.colorCode.withOpacity(isDark ? 0.25 : 0.15), // Use category color with opacity
|
||||
borderRadius: BorderRadius.circular(12), // Rounded corners
|
||||
),
|
||||
child: Icon(
|
||||
categoryDetails.iconCode, // Use category icon
|
||||
color: categoryDetails.colorCode, // Use category color for icon
|
||||
size: 20, // Icon size
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12), // Spacing
|
||||
|
||||
// Transaction details (Merchant/Category and Date/Time)
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Display Merchant if available, otherwise Category Name
|
||||
Text(
|
||||
transaction.merchant.isNotEmpty ? transaction.merchant : transaction.categoryName,
|
||||
style: theme.textTheme.bodyLarge?.copyWith(
|
||||
fontWeight: FontWeight.w500, // Medium weight for primary text
|
||||
color: primaryTextColor,
|
||||
),
|
||||
maxLines: 1, // Prevent wrapping
|
||||
overflow: TextOverflow.ellipsis, // Handle long text
|
||||
opacity: animation,
|
||||
child: Card(
|
||||
margin: const EdgeInsets.only(bottom: 6, top: 2),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12.0),
|
||||
),
|
||||
child: SizedBox(
|
||||
height: 65, // Fixed height for consistency
|
||||
child: InkWell(
|
||||
borderRadius: BorderRadius.circular(12.0),
|
||||
onTap: () {
|
||||
// TODO: Implement navigation to transaction details
|
||||
print('Tapped transaction: ${transaction.id}');
|
||||
},
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
|
||||
child: Row(
|
||||
children: [
|
||||
// Leading icon
|
||||
Container(
|
||||
width: 36,
|
||||
height: 36,
|
||||
decoration: BoxDecoration(
|
||||
color: categoryDetails.colorCode.withOpacity(isDark ? 0.2 : 0.15),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
const SizedBox(height: 4), // Spacing between lines
|
||||
// Display formatted date/time
|
||||
Text(
|
||||
displayDate,
|
||||
style: theme.textTheme.bodyMedium?.copyWith(
|
||||
color: secondaryTextColor, // Lighter color for secondary text
|
||||
fontSize: 12, // Smaller font size
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
child: Icon(
|
||||
categoryDetails.iconCode,
|
||||
color: categoryDetails.colorCode.withOpacity(isDark ? 0.9 : 1.0),
|
||||
size: 16
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12), // Spacing before amount
|
||||
),
|
||||
|
||||
// Transaction Amount
|
||||
Text(
|
||||
// Format amount as currency (negative for expense)
|
||||
NumberFormat.currency(symbol: '-\$', decimalDigits: 2).format(transaction.amount),
|
||||
style: theme.textTheme.bodyLarge?.copyWith(
|
||||
fontWeight: FontWeight.w600, // Bold weight for amount
|
||||
color: amountColor, // Use expense color
|
||||
),
|
||||
// Content
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
// Category and merchant on same line
|
||||
Row(
|
||||
children: [
|
||||
Text(
|
||||
transaction.categoryName,
|
||||
style: const TextStyle(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 13
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
'·', // Bullet separator
|
||||
style: TextStyle(
|
||||
color: isDark ? Colors.grey.shade400 : Colors.grey.shade700,
|
||||
fontSize: 13,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Expanded(
|
||||
child: Text(
|
||||
transaction.merchant,
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: isDark ? Colors.grey.shade400 : Colors.grey.shade700,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
const SizedBox(height: 4),
|
||||
|
||||
// Date and time
|
||||
Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.access_time,
|
||||
size: 10,
|
||||
color: isDark ? Colors.grey.shade400 : Colors.grey.shade600,
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
displayDate,
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
color: isDark ? Colors.grey.shade400 : Colors.grey.shade600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Amount and Time
|
||||
Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
Text(
|
||||
'- \$${transaction.amount.toStringAsFixed(2)}',
|
||||
style: TextStyle(
|
||||
color: isDark ? Colors.redAccent.shade100 : Colors.red.shade700,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 13,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
displayTime,
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
color: isDark ? Colors.grey.shade400 : Colors.grey.shade600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user