Search Page

Features

• Search Transactions: Users can search for transactions by typing in keywords.

• Filter Transactions: Filters can be applied based on:

• Transaction Type: Income or Expense

• Date Range: Filter transactions by selecting a date range.

• Amount Range: Specify a minimum and maximum amount to filter by.

• Dynamic UI Updates: The transaction list updates dynamically as filters or search inputs change.

• User-Friendly UI: The app includes a clean interface with ChoiceChips to easily toggle between filters.
  

  As shown Below

  

  Landscape view

  

Implementation

• Initialization: initialize the filter parameters like _isIncome, _isExpense, _dateTo, _dateFrom _max_amount, _min_amount, _searchControlle for the search queries, and List<Transaction> _filteredTransactions = [] for the filtered trascations according to the parameters.

• BottomSheet: Bottom sheets are a type of modal window that slides up from the bottom of the screen. They are used to display additional content or options without navigating to a new screen.

  1. _showAmountBottomSheet(): For showing Amont range slider.
  2. _showDateBottomSheet(): For showing date selection sheet.

• Ui Structure

  1. AppBar: Modified App Bar component to have a input field, whenever the value is changed it calls _filterTransactions()
  2. ChoiceChip Row: It visually represents choices in the form of chips, we have created Income, Expense, Date, Amount fields using this, We have also implemented single choice in expense and income.
  3. ListView.separated : To make list of all filtered transaction using TransactionCard() widget seperated with a divider.
  4. bottomNavigationBar : Bottom Navigation Bar as discribed in Home Page

• Filter Logic

  1. Whenever the Filter parameters are updated, _filterTransactions() is called, which asks the getFilteredTransactions service from ./lib/services/get_filtered_transaction.dart to return all the filtered Transactions accordingly.
  2. getFilteredTransactions call the query.find() on the objecBox trascation database.
  3. the required query is build using

  final queryBuilder = objectbox.transactionBox
                // check if contain search text  in different fileds
      .query((Transaction_.title.contains(searchText, caseSensitive: false) |
              Transaction_.merchantName
                  .contains(searchText, caseSensitive: false) |
              Transaction_.invoiceId
                  .contains(searchText, caseSensitive: false)) &
                // date filter
          (dateFrom != null
              ? Transaction_.date
                  .greaterOrEqual(dateFrom.millisecondsSinceEpoch)
              : Transaction_.date.greaterThan(0)) &
          (adjustedDateTo != null
              ? Transaction_.date
                  .lessOrEqual(adjustedDateTo.millisecondsSinceEpoch)
              : Transaction_.date
                  .lessThan(DateTime.now().millisecondsSinceEpoch)) &
                // is income or expense
          (expense
              ? Transaction_.isExpense.equals(true)
              : Transaction_.isExpense.equals(true) |
                  Transaction_.isExpense.equals(false)) &
          (income
              ? Transaction_.isExpense.equals(false)
              : Transaction_.isExpense.equals(true) |
                  Transaction_.isExpense.equals(false)) &
                // amount range
          (min_amount != null
              ? Transaction_.amount.greaterOrEqual(min_amount)
              : Transaction_.isExpense.equals(true) |
                  Transaction_.isExpense.equals(false)) &
          (max_amount != null
              ? Transaction_.amount.lessOrEqual(max_amount)
              : Transaction_.isExpense.equals(true) |
                  Transaction_.isExpense.equals(false)))
      .order(Transaction_.id);
  

TransactionCard()

described in the ./lib/components/transaction_small_card.dart, the TransactionCard widget is used for forming the preview of the transactions, with the expense type, title, date, merchant name.

It takes int transactionId, Function onTransactionUpdated as input and builds a FutureBuilde which calls the getTrasaction funtion upon completion it creates the required card.

It links the detailed Trasaction card upon clicking, and calls the onTrasactionUpdated function, so when detailed trasaction card is poped, it updates the fields according to new data.