--- title: "Build a Flutter Expense Tracker with Advanced Transaction Features" published_at: "2025-06-16T10:56:23+00:00" modified_at: "2025-06-16T10:56:27+00:00" url: "https://www.syncfusion.com/blogs/post/flutter-expense-tracker-transaction-features" excerpt: "Discover how the Expense Tracker's Transaction Page lets you effortlessly add, edit, delete, and filter financial data with real-time updates and Excel exports." taxonomy_category: - "CRUD" - "Data Grid" - "Data Table" - "Flutter" - "UI" taxonomy_post_tag: - "Cross-Platform" - "CRUD operations" - "Dynamic DataGrid" - "Flutter" - "Flutter DataGrid" - "Flutter Expense Tracker" --- # Build a Flutter Expense Tracker with Advanced Transaction Features [Naveen Kesavaraj](https://www.syncfusion.com/blogs/author/naveenkesavaraj) ![Expense Tracker: Effortlessly Log and Manage Your Financial Transactions](https://www.syncfusion.com/blogs/wp-content/uploads/2025/04/Expense-Tracker-Effortlessly-Log-and-Manage-Your-Financial-Transactions-2.jpg) **TL;DR:** Dive into the Flutter Expense Tracker’s Transaction page — add, edit, delete, and filter your financial data in real-time using a responsive UI powered by Syncfusion’s Flutter DataGrid. Enjoy Excel export, state management, adaptive layouts, and seamless CRUD operations, tailored for desktop, tablet, and mobile screens. Welcome back to the Expense Tracker sample blog series! So far, we have explored the setup process, import pages, and dashboard features that enhance user experience and financial tracking. Now, let’s look closer at the **transaction page**, which allows users to view, add, edit, and delete transactions seamlessly. This section plays a crucial role in keeping financial records organized and accessible. ## Transaction overview The transaction page offers a range of features designed for efficiency and ease of use: - **Responsive layout:** Adapts seamlessly across desktop, tablet, and mobile devices. - **Advanced filtering:** Quickly sort transactions by type and date range for better insights. - **CRUD operations:** Effortlessly add, update, or delete transactions as needed. - **Dynamic DataGrid:** Features height-based row pagination for a structured display. - **Excel export:** Enables easy data backup and financial analysis. - **Real-time updates:** Uses custom notifiers to ensure transactions reflect instantly. This section ensures users have complete control over their financial records while maintaining a smooth and intuitive experience. ### Desktop view ![Desktop View of Transaction Overview](https://www.syncfusion.com/blogs/wp-content/uploads/2025/04/image001-1.png) Desktop view of transaction ### Mobile view ![Mobile View of Transaction Overview](https://www.syncfusion.com/blogs/wp-content/uploads/2025/04/image003-1.jpg) Mobile view of transaction ## Transaction page layout The Transaction Page is structured into three key sections to ensure a seamless user experience: - **Action bar:** This bar provides buttons and dropdown menus for filtering transactions by type and date, enabling quick and efficient navigation. - **Filter options:** This option offers additional filtering tools, particularly for mobile users, to enhance usability across different screen sizes. - **Transaction DataGrid:** This tool displays transaction records in a structured table format using the [Syncfusion® Flutter DataGrid](https://www.syncfusion.com/flutter-widgets/flutter-datagrid) , making it easy to view, analyze, and manage financial data. This well-organized layout ensures smooth interaction and efficient transaction tracking across all devices. ``` Widget _buildTransactionPage(TransactionNotifier transactionNotifier) { return ExpenseCard( child: Column( children: [ _buildActionBar(transactionNotifier), // Use < and > for conditionals if that's your requirement if (isMobile(context)) _buildMobileFilterAndExportRow(), // Only on smaller (mobile) screens Expanded(child: _buildTransactionDataGrid(context)), ], ), ); } ``` ## Transaction filtering system The transaction page includes an intuitive filtering system that helps users refine transaction records based on type and date range, ensuring a seamless and efficient browsing experience. ### Transaction type filter Users can filter transactions by selecting specific types: - **All:** Displays all transactions without any filters. - **Income:** Shows only income-related transactions. - **Expense:** Displays only expense-related transactions. In the **transaction page** of the ** Expense Tracker** sample, we have optimized the filtering UI for different screen sizes to ensure a seamless user experience: - **Desktop view:** Use Flutter’s built-in [SegmentedButton](https://api.flutter.dev/flutter/material/SegmentedButton-class.html) widget for quick and efficient filtering. - **Tablet view:** Use Flutter’s [DropdownMenu](https://api.flutter.dev/flutter/material/DropdownMenu-class.html) widget, replacing the [SegmentedButton](https://api.flutter.dev/flutter/material/SegmentedButton-class.html) for better accessibility. - **Mobile view:** Use Flutter’s [PopupMenuButton](https://api.flutter.dev/flutter/material/PopupMenuButton-class.html) widget, further improving usability on compact screens. ``` Widget _buildFilteringSegmentsOrDropDownButton(BuildContext context) { final TransactionNotifier transactionNotifier = context.watch(); return isTablet(context) ? ChartsDropdownFilter( intervalFilters: const ['All', 'Income', 'Expense'], selectedDuration: transactionNotifier.selectedSegment, onTap: (String? value) => _handleSegmentChange(value!, transactionNotifier), ) : SegmentedFilterButtons( options: const ['All', 'Income', 'Expense'], onSelectionChanged: (Set selections) => _handleSegmentChange(selections.first, transactionNotifier), selectedSegment: transactionNotifier.selectedSegment, ); } ``` ### Date range filter Users can also filter transactions based on predefined **date ranges**, allowing them to view records within a specific period. We have used Flutter’s built-in [DropdownMenu](https://api.flutter.dev/flutter/material/DropdownMenu-class.html) widget to allow users to select a date interval, triggering real-time updates. ``` Widget _buildTransactionFilter(BuildContext context) { final TransactionNotifier transactionNotifier = context.watch(); return ChartsDropdownFilter( intervalFilters: dateDuration, onTap: (String? newValue) { if (newValue != null) { transactionNotifier.updateSelectedDuration(newValue); transactionNotifier.updateTransactions(_transactions); } }, selectedDuration: transactionNotifier.selectedDuration, ); } ``` ### Desktop view ![Desktop View of Transaction Filtering System](https://www.syncfusion.com/blogs/wp-content/uploads/2025/04/image005-1.gif) Desktop view of the transaction filtering ### Mobile view ![Mobile View of Transaction Filtering System](https://www.syncfusion.com/blogs/wp-content/uploads/2025/04/image006-1.gif) Mobile view of the transaction filtering ## State management in the transaction page State management is essential for enabling **dynamic filtering**, ** real-time UI updates**, and ** tracking user selections**. The transaction page leverages two key notifiers to handle state efficiently: - **TransactionNotifier**: It manages transaction data, handles filtering logic, and ensures seamless state updates. - **TransactionSelectedCountNotifier:** It tracks the number of selected transactions to delete. ``` class TransactionNotifier extends ChangeNotifier { void updateTransactions(List transactions) { _transactions = transactions; _filteredTransactions = _applyFilters(transactions); notifyListeners(); } void updateSelectedSegment(String segment) { _selectedSegment = segment; _filteredTransactions = _applyFilters(_transactions); notifyListeners(); } } ``` ## Excel export functionality The transaction page includes an **Excel export feature**, allowing users to download their transaction data for ** backup, analysis, and easy sharing**. This functionality offers several benefits: - **Backup & record-keeping:** Users can maintain a local copy of their financial transactions. - **Advanced data analysis:** Transactions can be analyzed using spreadsheet tools like Microsoft Excel or Google Sheets. - **Simplified sharing:** Users can effortlessly share financial records with accountants or advisors. ``` _buildExportButton() { child: ExportButton( onTap: () async { handleOnTapExportLogic(context, 'Transactions', 'Transaction'); }, ), } ``` The **handleOnTapExportLogic()** method facilitates the export process by converting the current transaction data into an ** Excel-compatible format**, ensuring: - **Seamless data conversion** without loss of transaction details. - **Accurate preservation** of financial records. - **A user-friendly export process** that requires minimal effort from the user. ### Desktop view ![Desktop View of Excel Export Functionality](https://www.syncfusion.com/blogs/wp-content/uploads/2025/04/image007-1.gif) Desktop view of Excel export ### Mobile view ![Mobile View of Excel Export Functionality](https://www.syncfusion.com/blogs/wp-content/uploads/2025/04/image008-1.gif) Mobile view of Excel export ## Efficient data management with SfDataGrid The [Syncfusion Flutter DataGrid](https://www.syncfusion.com/flutter-widgets/flutter-datagrid) plays a central role in displaying and managing transaction data on the Transaction Page. This **powerful Flutter widget** provides a structured, interactive, and efficient way to handle large datasets with ease. The [SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/) offers advanced capabilities, including: - **Dynamic column creation** based on provided headers. - **Multiple row selection** with checkbox support. - **Adaptive column width modes** for optimal data visibility. - **Custom cell rendering** to display different data types effectively. - **Page-based data loading** using CustomDataGridSource. - **Responsive design** that adjusts seamlessly across mobile, tablet, and desktop views. The implementation combines [SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/) **,**[DataGridController](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridController-class.html) **, and CustomDataGridSource**, allowing for ** efficient data handling** with minimal configuration. This ensures a ** smooth, user-friendly experience** when navigating and interacting with transaction records. ``` SfDataGrid( source: dataSource, columns: _buildGridColumns(), selectionMode: SelectionMode.multiple, rowsPerPage: rowsPerPage, columnWidthMode: ColumnWidthMode.fill, ) ``` ### Data Paging mechanism To ensure efficient data management and smooth navigation, the **TransactionGridSource** class implements an advanced data paging strategy. Key features include: - Efficient data loading, which prevents performance degradation when handling large datasets. - Smooth page navigation, allowing users to browse transactions seamlessly. ``` class TransactionGridSource extends CustomDataGridSource { final int rowsPerPage; TransactionGridSource({ required BuildContext context, required List transactions, required int rowsPerPage, }) : super( rowsPerPage: rowsPerPage, data: transactions, columns: ['Date', 'Category', 'Type', 'Amount', 'Notes'] ); } ``` ## CRUD operations in the transaction page This Flutter application implements a comprehensive transaction management system with smooth CRUD (Create, Read, Update, Delete) operations. Let’s explore how these core features work: ### Edit transaction Editing functionality allows users to modify existing transaction records. The process is as follows: - Users select a transaction from the data grid using checkboxes. - The system detects the selection and displays action buttons. - When the edit button is pressed, a dialog with pre-populated fields appears. - Users can modify any field, including type, category, subcategory, amount, date, and notes. - Upon submission, the transaction is updated in memory and saved to storage. ``` void handleEditTransaction() { // Get selected transaction index int selectedIndex = getSelectedTransactionIndex(); // Show edit dialog if (isMobile) { showMobileEditDialog(selectedIndex); } else { showDesktopEditDialog(selectedIndex); } // On save: // 1. Create an "updated transaction object" // 2. Update transaction list // 3. Close dialog } ``` ### Desktop view ![Desktop View of Editing Transactions in Transactions Page](https://www.syncfusion.com/blogs/wp-content/uploads/2025/04/image009-1.gif) Desktop view of editing transactions ### Mobile view ![Mobile View of Editing Transactions in Transactions Page](https://www.syncfusion.com/blogs/wp-content/uploads/2025/04/image010-1.gif) Mobile view of editing transactions ### Delete transaction The delete operation removes one or more transactions with confirmation: - Users select the transactions to delete. - Clicking the delete button displays a confirmation dialog. - Upon confirmation, the transactions are removed from the list and storage. - The user interface updates to reflect the changes and clears the selection. ``` void handleDeleteTransaction() { // Show confirmation dialog showDeleteConfirmationDialog( title: "Delete Transaction?", content: "Do you want to delete this transaction?", onConfirm: () { // Get selected transaction indexes List selectedIndexes = getSelectedTransactionIndexes(); // Remove from transaction list transactionNotifier.deleteTransactions(selectedIndexes); // Update storage updateTransactions( context, userDetails, transaction, UserInteractions.delete, selectedIndexes ); // Reset selection state clearSelection(); // Close dialog Navigator.pop(context); } ); } ``` ### Desktop view ![Desktop View of Deleting Transactions in Transactions Page](https://www.syncfusion.com/blogs/wp-content/uploads/2025/04/image011-1.gif) Desktop view of deleting transactions ### Mobile view ![Mobile View of Deleting Transactions in Transactions Page](https://www.syncfusion.com/blogs/wp-content/uploads/2025/04/image012-1.gif) Mobile view of deleting transactions ### Add transaction The add functionality creates new transaction records as follows: - The user clicks an add button (which is not explicitly shown in the provided code). - A dialog appears with empty fields. - The user enters transaction details, including type, category, amount, date, etc. - Upon submission, a new transaction is created and added to the list. Refer to the following code example. ``` void handleAddTransaction() { // Set interaction type userInteraction = UserInteractions.add; // Show add dialog showDialog( context: context, builder: (context) => TransactionCenterDialog( userInteraction: userInteraction, userDetails: userDetails, categories: categories, subCategories: subCategories, // Other parameters ) ); // On dialog submission: // 1. Create a new transaction from form data // 2. Add to transaction list // 3. Persist to storage // 4. Close dialog } ``` ### Desktop view ![Desktop View of Adding Transactions in Transactions Page](https://www.syncfusion.com/blogs/wp-content/uploads/2025/04/image013-1.gif) Desktop view of adding transactions ### Mobile view ![Mobile View of Adding Transactions in Transactions Page](https://www.syncfusion.com/blogs/wp-content/uploads/2025/04/image014-1.gif) Mobile view of adding transactions The application uses responsive design principles to adapt the UI for different screen sizes, showing appropriate dialogs for mobile and desktop views. The transaction management system is integrated with a data grid for visual representation and selection capabilities, with proper validation to ensure data integrity. ## Conclusion Thanks for reading! In this blog, we’ve explored how developing an effective transaction management page requires careful consideration of filtering, data presentation, and user interactions. By leveraging Flutter’s flexibility and Syncfusion’s DataGrid component, we have created a powerful and user-friendly interface adaptable to different devices. This implementation showcases: - Advanced filtering with multiple criteria. - Responsive layouts for various screen sizes. - Efficient data management with selection-based actions. - Visually distinct representations of transaction types. - Intuitive workflows for editing and deleting transactions. By extending these functionalities, we can incorporate additional features such as analytics, reporting, and integration with external financial tools. What other features would you like to see in future updates? Please let us know in the comments below! Existing Syncfusion® users can access the most recent Essential Studio® on the [license and downloads](https://www.syncfusion.com/account/downloads) page. If you’re new to Syncfusion®, we offer a 30-day [free trial](https://www.syncfusion.com/downloads) to test these exciting new features. You can also contact us through our [support forum](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback/) . We are always happy to help you! ## Related Blogs [Simplify Your Finances with the Flutter Expense Tracker](https://www.syncfusion.com/blogs/post/flutter-expense-tracker) [Build a Smart, AI-Powered DataGrid in Flutter for Predictive Data Analysis](https://www.syncfusion.com/blogs/post/smart-ai-datagrid-flutter) [Build Interactive Trading Apps Using Flutter DataGrids](https://www.syncfusion.com/blogs/post/flutter-datagrid-trading-apps) [Customize Flutter DataGrid for Enhanced Data Visualization](https://www.syncfusion.com/blogs/post/customize-flutter-data-grid-widget)