Features

  • Dashboard Card - Displays a general overview of the user’s Total Balance, Income and Expenses

  • Add Transaction - Allows users to add new transactions using camera/photo by clicking on “+” button at bottom of the screen.

  • Last Transactions - Displays last 3 transactions of the user in a minimal manner. The See All button will take the user to “Search” page where users can see and filter transactions.

Homepage

Components

The Bottom navigation bar of the homepage include Add Transaction button, link to the Search Page, Transaction Analysis Page and the User Profile Page.

BottomNavBar Widget

Overview

The BottomNavBar widget provides a custom bottom navigation bar for the app, allowing users to switch between different screens: Home, Search, Analysis, and Profile.

Key components

  • BottomNavBar Class: A stateful widget that requires the currentIndex parameter to indicate which tab is currently active.

  • _BottomNavBarState Class:

    _onItemTapped(int index): Handles the navigation to different pages based on the tapped item. It also provides haptic feedback when an item is tapped.

    Index 0: Navigates to HomePage.
    Index 1: Navigates to SearchPage.
    Index 2: Navigates to AnalysisPage.
    Index 3: Navigates to ProfilePage.

    build(BuildContext context): Constructs the bottom app bar with navigation items. BottomAppBar: Contains the navigation items arranged in a row with space for the floating action button.

    _buildNavItem({required IconData icon, required int index}): Widget having each navigation item as an icon that changes color based on whether it is selected. It triggers navigation when tapped.

 Widget _buildNavItem({required IconData icon, required int index}) {
    return GestureDetector(
      onTap: () => _onItemTapped(index),
      child: Container(
        padding: EdgeInsets.fromLTRB(10, 5, 10, 20),
        color: Colors.transparent,
        child: Icon(
          icon,
          color: widget.currentIndex == index ? Colors.blue : Colors.grey,
        ),
      ),
    );
  }

Overview Card

The overview card located at the top of the Homepage displays Total Balance, Income, Expenses for the user in clear and concise manner. The values inside this dynamically updates whenever the user interacts with the application.