refactor: Make SpendingPieChart stateful to prevent list flicker

finance_app/lib/screens/expenses_screen.dart

@@ -41,7 +41,7 @@ class _ExpensesScreenState extends State<ExpensesScreen> with TickerProviderStat
   late Animation<double> _pieChartHeightFactor;
 
   // State variables
-  int _selectedPieIndex = -1; // Index of the selected pie chart slice
+  // Removed _selectedPieIndex as it's now managed by SpendingPieChart
   int _selectedNavIndex = 0; // Index for bottom navigation bar
   bool _isPieChartExpanded = true; // Controls visibility of the pie chart section
   bool _isFilterVisible = false; // Controls visibility of the filter chips
@@ -113,16 +113,7 @@ class _ExpensesScreenState extends State<ExpensesScreen> with TickerProviderStat
     });
   }
 
-  // Handles selection of a pie chart slice
-  void _selectPieCategory(int index) {
-    setState(() {
-      // If the same index is selected, deselect (-1), otherwise select the new index
-      _selectedPieIndex = (_selectedPieIndex == index) ? -1 : index;
-    });
-    // Optionally apply filter when pie slice is selected/deselected
-    // This requires getting the category name from the index, potentially async
-    // _applyFilterBasedOnPieSelection(index);
-  }
+  // Removed _selectPieCategory method as it's now handled internally by SpendingPieChart
 
   // Applies the selected filter to the transaction list
   void _applyFilter(String filter) {
@@ -358,8 +349,7 @@ class _ExpensesScreenState extends State<ExpensesScreen> with TickerProviderStat
                         child: SpendingPieChart(
                           categories: categories, // Pass categories from stream snapshot
                           totalExpenses: totalExpenses, // Pass calculated total
-                          selectedPieIndex: _selectedPieIndex,
-                          onSelectPieCategory: _selectPieCategory, // Callback for selection
+                          // Removed selectedPieIndex and onSelectPieCategory props
                           animation: _pieChartAnimation, // Appearance animation
                         ),
                       ),

finance_app/lib/widgets/spending_pie_chart.dart

@@ -4,22 +4,36 @@ import 'package:intl/intl.dart'; // For number formatting
 
 import '../models/category.dart'; // Keep using the Category model for UI structure
 
-class SpendingPieChart extends StatelessWidget {
+// Changed to StatefulWidget to manage its own selection state
+class SpendingPieChart extends StatefulWidget {
   final List<Category> categories; // Expect List<Category> from database calculation
   final double totalExpenses;
-  final int selectedPieIndex;
-  final Function(int) onSelectPieCategory; // Callback when a slice is selected/deselected
   final Animation<double> animation; // For fade/scale animation
 
   const SpendingPieChart({
     Key? key,
     required this.categories,
     required this.totalExpenses,
-    required this.selectedPieIndex,
-    required this.onSelectPieCategory,
     required this.animation,
+    // Removed selectedPieIndex and onSelectPieCategory
   }) : super(key: key);
 
+  @override
+  State<SpendingPieChart> createState() => _SpendingPieChartState();
+}
+
+class _SpendingPieChartState extends State<SpendingPieChart> {
+  // State for the selected index is now managed internally
+  int _selectedPieIndex = -1;
+
+  // Handles selection logic internally
+  void _handlePieTap(int index) {
+    setState(() {
+      // If the same index is selected, deselect (-1), otherwise select the new index
+      _selectedPieIndex = (_selectedPieIndex == index) ? -1 : index;
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     final isDark = Theme.of(context).brightness == Brightness.dark;
@@ -27,11 +41,11 @@ class SpendingPieChart extends StatelessWidget {
     final currencyFormatter = NumberFormat.currency(locale: 'en_US', symbol: '\$'); // Or your preferred locale/symbol
 
     // Handle the case where there are no categories to display
-     if (categories.isEmpty) {
+     if (widget.categories.isEmpty) {
        return AnimatedBuilder( // Still use animation for consistency
-         animation: animation,
+         animation: widget.animation,
          builder: (context, child) => Opacity(
-           opacity: animation.value,
+           opacity: widget.animation.value,
            child: Container(
              height: 230, // Maintain similar height to the chart version
              alignment: Alignment.center,
@@ -48,12 +62,12 @@ class SpendingPieChart extends StatelessWidget {
 
     // Use AnimatedBuilder to apply the fade/scale animation
     return AnimatedBuilder(
-      animation: animation,
+      animation: widget.animation,
       builder: (context, child) {
         return Transform.scale(
-          scale: animation.value, // Apply scale animation
+          scale: widget.animation.value, // Apply scale animation
           child: Opacity(
-            opacity: animation.value, // Apply fade animation
+            opacity: widget.animation.value, // Apply fade animation
             child: Container(
               padding: const EdgeInsets.symmetric(vertical: 8.0), // Reduced vertical padding
               height: 230, // Fixed height for the chart and legend area
@@ -76,13 +90,13 @@ class SpendingPieChart extends StatelessWidget {
                                   if (section != null) {
                                     // Tap occurred ON a section
                                     final touchedIndex = section.touchedSectionIndex;
-                                    // Toggle selection: if tapped section is already selected, deselect (-1), otherwise select it.
-                                    onSelectPieCategory(touchedIndex == selectedPieIndex ? -1 : touchedIndex);
+                                    // Use internal handler to update state
+                                    _handlePieTap(touchedIndex);
                                   } else {
                                     // Tap occurred OUTSIDE any section
                                     // Deselect if something was selected
-                                    if (selectedPieIndex != -1) {
-                                      onSelectPieCategory(-1);
+                                    if (_selectedPieIndex != -1) {
+                                      _handlePieTap(-1); // Pass -1 to deselect
                                     }
                                   }
                                 }
@@ -99,7 +113,7 @@ class SpendingPieChart extends StatelessWidget {
                           swapAnimationCurve: Curves.easeInOut,
                         ),
                         // --- Center Text (Displayed when a slice is selected) ---
-                        if (selectedPieIndex != -1)
+                        if (_selectedPieIndex != -1)
                           _buildCenterText(context, currencyFormatter)
                         else // Optional: Display total or default text when nothing is selected
                           _buildDefaultCenterText(context, currencyFormatter),
@@ -113,7 +127,7 @@ class SpendingPieChart extends StatelessWidget {
                     flex: 4, // Allocate space for the legend
                     // Use ListView for scrollable legend if many categories
                     child: ListView.builder(
-                      itemCount: categories.length,
+                      itemCount: widget.categories.length,
                       padding: const EdgeInsets.only(right: 8), // Padding for legend items
                       itemBuilder: (context, index) => _buildPieLegendItem(context, index),
                     ),
@@ -131,11 +145,11 @@ class SpendingPieChart extends StatelessWidget {
   Widget _buildCenterText(BuildContext context, NumberFormat formatter) {
     final theme = Theme.of(context);
     // Check if selectedPieIndex is valid before accessing categories
-    if (selectedPieIndex < 0 || selectedPieIndex >= categories.length) {
+    if (_selectedPieIndex < 0 || _selectedPieIndex >= widget.categories.length) {
       // Return an empty container or default text if index is invalid
       return _buildDefaultCenterText(context, formatter);
     }
-    final selectedCategory = categories[selectedPieIndex];
+    final selectedCategory = widget.categories[_selectedPieIndex];
     return Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
@@ -177,7 +191,7 @@ class SpendingPieChart extends StatelessWidget {
               ),
               const SizedBox(height: 4),
               Text(
-                  formatter.format(totalExpenses), // Display total expenses
+                  formatter.format(widget.totalExpenses), // Display total expenses
                   style: theme.textTheme.titleMedium?.copyWith(
                       fontWeight: FontWeight.bold,
                       color: theme.textTheme.bodyLarge?.color // Use default text color
@@ -193,18 +207,18 @@ class SpendingPieChart extends StatelessWidget {
   Widget _buildPieLegendItem(BuildContext context, int index) {
     final isDark = Theme.of(context).brightness == Brightness.dark;
     final theme = Theme.of(context);
-    final isSelected = index == selectedPieIndex; // Check if this item is selected
+    final isSelected = index == _selectedPieIndex; // Check if this item is selected using internal state
     // Check if index is valid before accessing categories
-    if (index < 0 || index >= categories.length) {
+    if (index < 0 || index >= widget.categories.length) {
       return const SizedBox.shrink(); // Return empty if index is invalid
     }
-    final category = categories[index];
+    final category = widget.categories[index];
     // Calculate percentage, handle totalExpenses being zero
-    final percentage = totalExpenses > 0 ? (category.amount / totalExpenses * 100) : 0.0;
+    final percentage = widget.totalExpenses > 0 ? (category.amount / widget.totalExpenses * 100) : 0.0;
 
     // Use InkWell for tap feedback and GestureDetector for tap logic
     return InkWell(
-      onTap: () => onSelectPieCategory(isSelected ? -1 : index), // Toggle selection on tap
+      onTap: () => _handlePieTap(index), // Use internal handler on tap
       borderRadius: BorderRadius.circular(8), // Match border radius
       child: AnimatedContainer(
         duration: const Duration(milliseconds: 200), // Animation for selection change
@@ -264,21 +278,21 @@ class SpendingPieChart extends StatelessWidget {
   List<PieChartSectionData> _generatePieSections(BuildContext context) {
     final isDark = Theme.of(context).brightness == Brightness.dark;
 
-    return List.generate(categories.length, (i) {
+    return List.generate(widget.categories.length, (i) {
       // Check if index is valid before accessing categories
-      if (i < 0 || i >= categories.length) {
+      if (i < 0 || i >= widget.categories.length) {
         // This should ideally not happen if List.generate is used correctly,
         // but adding a safeguard.
         return PieChartSectionData(); // Return an empty section
       }
-      final isTouched = i == selectedPieIndex; // Check if this slice is selected
+      final isTouched = i == _selectedPieIndex; // Check if this slice is selected using internal state
       // Make selected slice slightly larger
       final double radius = isTouched ? 65 : 55;
       // Make title font slightly larger when selected
       final double titleFontSize = isTouched ? 14 : 12;
-      final category = categories[i];
+      final category = widget.categories[i];
       // Calculate percentage for the title
-      final percentage = totalExpenses > 0 ? (category.amount / totalExpenses * 100) : 0;
+      final percentage = widget.totalExpenses > 0 ? (category.amount / widget.totalExpenses * 100) : 0;
 
       return PieChartSectionData(
         color: category.colorCode.withOpacity(isDark ? 0.85 : 1.0), // Use category color

finance_app/lib/widgets/transaction_list_item.dart

@@ -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; // Keep alias if needed elsewhere, though not used here directly
 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,118 @@ 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.redAccent.shade100 : Colors.red.shade700; // Keep amount color distinct
 
-    // 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
-                ),
+      opacity: animation,
+      // Use SizeTransition for a smoother vertical entrance/exit animation
+      child: SizeTransition(
+        sizeFactor: animation,
+        child: Card(
+          // Reduce vertical margin to decrease space between items
+          margin: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 2.5), // Reduced vertical margin
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(12.0),
+          ),
+          elevation: 1.5, // Subtle elevation
+          child: ListTile(
+            // Reduce vertical padding and apply compact density to decrease height
+            contentPadding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 2.0), // Reduced vertical padding
+            visualDensity: VisualDensity.compact, // Make the ListTile more compact vertically
+            // Leading icon
+            leading: Container(
+              width: 40, // Slightly larger icon background
+              height: 40,
+              decoration: BoxDecoration(
+                // Use a slightly less opaque background for better icon visibility
+                color: categoryDetails.colorCode.withOpacity(isDark ? 0.25 : 0.18),
+                shape: BoxShape.circle,
               ),
-              const SizedBox(width: 12), // Spacing
+              child: Icon(
+                categoryDetails.iconCode,
+                color: categoryDetails.colorCode.withOpacity(isDark ? 0.95 : 1.0),
+                size: 20, // Slightly larger icon
+              ),
+            ),
 
-              // 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
-                    ),
-                    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,
-                    ),
-                  ],
-                ),
+            // Title: Category Name
+            title: Text(
+              transaction.categoryName,
+              style: const TextStyle(
+                fontWeight: FontWeight.w600,
+                fontSize: 14.5, // Slightly larger title font
               ),
-              const SizedBox(width: 12), // Spacing before amount
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+            ),
 
-              // 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
+            // Subtitle: Merchant and Date
+            subtitle: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween, // Push date to the right
+              children: [
+                Expanded( // Allow merchant name to take available space and ellipsis
+                  child: Text(
+                    transaction.merchant,
+                    style: TextStyle(
+                      fontSize: 12.5, // Slightly larger subtitle font
+                      color: secondaryTextColor,
+                    ),
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                  ),
                 ),
-              ),
-            ],
+                // Optionally add a small spacer if needed
+                // const SizedBox(width: 8),
+                Text(
+                  displayDate, // Show only the date part in the subtitle
+                  style: TextStyle(
+                    fontSize: 11.5, // Smaller date font
+                    color: secondaryTextColor.withOpacity(0.8), // Slightly faded date
+                  ),
+                ),
+              ],
+            ),
+
+
+            // Trailing: Amount and Time
+            trailing: Column(
+              mainAxisAlignment: MainAxisAlignment.center, // Center vertically
+              crossAxisAlignment: CrossAxisAlignment.end, // Align text to the right
+              children: [
+                Text(
+                  '- \$${transaction.amount.toStringAsFixed(2)}',
+                  style: TextStyle(
+                    color: amountColor,
+                    fontWeight: FontWeight.w600,
+                    fontSize: 14, // Consistent font size with title
+                  ),
+                ),
+                const SizedBox(height: 3), // Small space between amount and time
+                Text(
+                  displayTime, // Show time below the amount
+                  style: TextStyle(
+                    fontSize: 11.5, // Smaller time font
+                    color: secondaryTextColor.withOpacity(0.8), // Slightly faded time
+                  ),
+                ),
+              ],
+            ),
+            onTap: () {
+              // TODO: Implement navigation to transaction details
+              print('Tapped transaction: ${transaction.id}');
+            },
           ),
         ),
       ),