Flutter Fix
No Result
View All Result
  • Login
  • Register
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
FORUM
ASK QUESTION
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
No Result
View All Result
Flutter Fix
No Result
View All Result
Home Flutter Apps Finance App

A Flutter App for Tracking Funds/Money – Budget Tracker

August 17, 2020
in Finance App, Material Design
12 min read
A Flutter App for Tracking Funds/Money – Budget Tracker

This a simple Flutter application that keeps track of lots of money & fund transactions and budgets. the Source code of the app is available below

RELATED FLUTTER RESOURCES

A Flutter package that detects credit card types from the first input

A Mobile Banking App UI made with Flutter

A Contextual Action/App Bar Implementation for Flutter

I built this because I couldn’t find any application that allowed a custom or a 4-week period.

ADVERTISEMENT

Allows authentication with Firebase and uses Firestore as a cloud database on top of using the devices’ local database as backup.

Features include:

  • statistics
  • custom periods
  • recurring transactions
  • custom categories
  • filters

and more…

To run

To build this application and run it on your device or an emulator, you need:

  • Flutter
  • Android SDK
  • XCode if you wish to run iOS

Follow the instructions here to set up: https://flutter.dev/docs/get-started/install.

DOWNLOAD SOURCE CODE
REPOSITORY

Demo

The first screen is the login page.

Empty Login

Click on `Register` to create a user.

Register

Alternatively, you can log in with your existing credentials.

Login

The home page is a list of transactions.

Empty Home

Let’s add a transaction. I bought an app from the Play Store for $1.99.

Adding Google Play Store Purchase

I can also choose from a preset of categories. Let’s choose Games & Apps.

Adding Google Play Store Purchase Category

I also want to add an income. I sold my car for $5000. I chose Transportation as the category.

Added Sold Car

Say I wish to create a custom category for things I’ve sold. Let’s open the menu and go to Categories. This page displays a list of all the categories. You can choose to show these in the transactions page by selecting/unselecting individual categories and change the order it is displayed in the dropdown.

Menu From Home
Default Categories

But we are here to create a new category, so click on the floating + button. In the category creation/edit page, you can specify the name, the icon (from MaterialIcons), and the colour.

Adding Category Name
Adding Category Icon
Adding Category Colour
Adding Category Filled

Click Add and at the bottom of the list, voila!

Added Category

You can click on each category to edit them, if you wish. For now, let’s go back to the car transaction and change the category. In the category dropdown, you can see that Items Sold is now available to use. Select the category, save, and the transaction is now updated.

New Category In Dropdown
Updated Transaction New Category

I just bought another app from the Play Store and wish to add a transaction. As soon as I start typing, transactions from the past that starts with the same name are suggested. Choose the suggestion. The name and the category are changed for you. Enter the rest of the details and save.

Show Suggestions
Add Suggestion Details

Now that you have a few transactions, let’s check out our statistics. You can swipe to the left or click on Statistics.

Statistics

There are three main views:

  • All-Time
  • Period
  • Custom

The All-Time tab shows you stats from your first-ever transaction. The Period tab shows you periodic stats, which you can select from the dropdown. The Custom tab shows you stats from the range of transactions that can be set in Preferences, or you can use the date selector to select the start date in which to show the stats from. (TODO: Allow end date selection)

The statistics page currently has the following information:

  • Balance
  • Remaining days in current period / Remaining balance per day
  • Actual Income / Expenses
  • Expenditure per category (TODO: Consider income? preferences)
  • Top Expenses
Statistics
Statistics Categories
Statistics Top Expenses

The transactions can be filtered from the home page (Transactions or Statistics). This filter is shared and affects the statistics. You can filter by income/expenses or by categories.

Filters

There is also a search function at the top of the transactions list.

Another useful feature is custom periods. By default, periods are set by month. In the Periods menu, let’s add a custom period. I want a 4 week custom period that starts this Friday. Don’t worry about past transactions, this will set the past periods properly from any set start date. Let’s also set this as the default (active) period.

Empty Periods
Add 4 Weeks Period

I’ve also added a 2 week period to show that the active period is highlighted in blue.

Periods With 4 Weeks Active

Back to the home page and the transactions list, and we can see that the transactions are split in different periods. The first two transactions were added on June 11 (before the current period started), and the last one was added on the 12th.

Custom Period in Home

The statistics page > Period tab also shows the updated period and any other periods that have transactions.

Custom Period in Stats

Another feature that is essential are Recurring Transactions. We can add this from the menu > Recurring Transactions.

Empty Recurring Transactions

Let’s say I want to give my little brother $5 for the next 5 days. I can set the next date (or the start date), transaction details, the frequency, and if applicable, the end condition using either the number of times I would like, or the end date.

Add Recurring Transaction
Added Recurring Transaction

Now that the recurring transaction is added, let’s go to the home page. Since we set the next date for today, the transaction is already added. (Note: the allowance transaction shows up before the google play app purchase because recurring transactions are added with the time set as 00:00)

Recurring Transaction Added

The last item in the menu are the Preferences. You can currently change these items in Preferences:

  • Custom Range for the Custom tab in Statistics
  • Default tab in Statistics when opened
  • Reset Preferences
Preferences

RelatedFlutter Resource

A Flutter package that detects credit card types from the first input
Card

A Flutter package that detects credit card types from the first input

September 7, 2020
A Mobile Banking App UI made with Flutter
Finance App

A Mobile Banking App UI made with Flutter

August 20, 2020
A Contextual Action/App Bar Implementation for Flutter
App Bar

A Contextual Action/App Bar Implementation for Flutter

August 19, 2020
backdrops flutter
Material Design

How To Add a Backdrop in Flutter (Material Design)

August 6, 2020
custom fonts text style flutter
Flutter Widgets

Flutter Custom Fonts and How to Style Text

July 24, 2020
HOW TO USE THE FLUTTER TEXTFIELD
Flutter Widgets

How to use the Flutter Text Field and Input Widget

July 13, 2020
Next Post
How To Display Flag on Your Flutter App Using the Flag Package

How To Display Flag on Your Flutter App Using the Flag Package

A Contextual Action/App Bar Implementation for Flutter

A Contextual Action/App Bar Implementation for Flutter

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended Stories

flutter google map embed

Trying To Embed Google Map to your Flutter App? Here’s The Solution

June 24, 2020
A Verification Code Input Widget to get Value in Flutter.

A Verification Code Input Widget to get Value in Flutter.

September 7, 2020
flutter run no connected devices

How to fix “flutter run: No connected devices”

August 8, 2020

Popular Stories

  • FLUTTER-FUTUER-APP-DEVELOPMENT

    Why Google Flutter Is the Future of Mobile App Development

    0 shares
    Share 0 Tweet 0
  • Container Widget & Box Model in Flutter – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Flutter Future, Await, and Async – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Create a Beautiful & Customized Tab/Toggle in Flutter

    0 shares
    Share 0 Tweet 0
  • How to use the Flutter Text Field and Input Widget

    0 shares
    Share 0 Tweet 0
  • HOME
  • ABOUT US
  • CONTACT US
  • DMCA
  • TERMS & CONDITIONS
  • PRIVACY POLICY
Call us: +234 705 505 5426

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

No Result
View All Result
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In