Personal web app expense application.
This code is part of myExpense application, an Expense and Income tracker.
The intent behind this application is to create an expense application that can support multi currency, so we can utilise a single application to track our expense.
The code here is the front-end part of the myExpense which compiled and serve as web app.
What WEB APP? 😡
Yes web app, I knew a lot of people will say that Web App on Flutter is not "production" ready, but as this application is going to be used by my self only, so the liability of the bug free application is not really that demanding.
Thus, I can ensure you that this application most likely is sh*t one. I am not an expert in Flutter, and I can say that this is my first project that I create using Flutter, after trying them once or two on the early Flutter (and forget about it afterwards).
I was trying a lot of other framework (Ionic, Vue, React either with Onsen or Antd ) before decide to Flutter just because Flutter have Cupertino Date Time Picker (Antd also have, but I am not really good at reading chinese, so, Flutter it is), and I think my decision is correct one as I can focus on creating a simple UI without needed a hefty knowledge of design.
Note: The backend part of this application currently is not being open-source yet, but as the function of the application is simple enough, I think creating a backend application is not as hard nor as demanding also.
Below is the screenshot of the application in action.
This page will be showed if user setup PIN for their configuration. PIN is stored in a secured box using Hive.
| Pin Page | Pin Input |
|---|---|
 |
 |
In transaction list page, you can navigate all your expense using Calendar.
| Transaction List | Table Calendar |
|---|---|
 |
 |
If you click the Month and Year title on the AppBar it will showed the calendar for you to jump to distant date, instead navigating and scrolling one by one.
| Click Appbar | Navigate On Calendar | Click OK |
|---|---|---|
 |
 |
 |
All the transaction being fetched from server will be cache on the local storage.
This page will showed you the summary of the all the account you have, how much income and expense (in total and in average) that you have on the current month.
| Summary Stats | Stats Bar Chart |
|---|---|
 |
 |
You can navigate to the other month, either by click the month arrow on the header or by swiping left and right on the screen.
You can also perform query of all your expense and income, based on currency, date, and account that you want to see the statistics.
To do this, you can click on the Pie Chart icon on the top right, and it will showed you the Filter Stats Page.
| Filter By Month | Filter By Year | Filter By Custom |
|---|---|---|
 |
 |
 |
When you press the "Filter Statistics" button or the "Start" icon on the top right, it will send request to backend, and backend will perform calculation based on the filter statisctics given by user input. Once finished, it will be showed on the Detail Statistic Page.
| Stats Income | Stats Expense |
|---|---|
 |
 |
If you clicked on the income/expense category it will showed you the detail transaction that you performed during the date that you input.
In budget page, you can control the budget for specific category, and you can configure a different budget category for each currency that you have on your wallet.
The first page that will be showed on the budget page is the "default currency" budget that you can configure on the User page.
Here you can see how much is your expense related to the total budget, and each category to see which category is already passed the budget.
To select different currency, you can tap on the Currency Selection on the Budget Bar header, and it will showed you the list of currency that we have on our Wallet/Account.
When you click the expense category, you will directed to detail transaction for that expense category. In there you can see what is the detail of the expense you performed on that category.
To configure the expense category on the budget, you can click on the "Settings" icon on the top left. It will direct you to the Budget List page.
The page will listed all your budget list on the currency currently selected on the budget page. To add new category, you can press the Add Category button, to Edit the current expense category you can double tap the expense category, and once finished you can press the Save button on the top left.
| Budget List | Add New Budget | Edit Budget |
|---|---|---|
 |
 |
 |
In here you can see all your wallet/account, it will showed you the current balance of your wallet/account also.
There are several action on the account that you can do, such as Edit, Disable, and Delete. You can do this by slide the account and it will give you the options.
The account that disabled will not going to be showed when you adding the transaction, or in the statistics pages. Account that disabled will be marked with dark grey color.
You can see the detail transaction of each account, by tap the account, and it will showed you the transaction that performed on that account on the current month.
On the add account page, you can give the account name, account type, starting balance, and what is the currency of the account. You can also decide whether you want to include the account on the statistics computation or not, or whether the account already disabled or not?
| Add Account | Account Type | Currency Type |
|---|---|---|
 |
 |
 |
When you adding/edit the transaction, you can choose either this 3 type of transaction:
- Expense
- Income
- Transfer
| Expense | Income | Transfer |
|---|---|---|
 |
 |
 |
When you input the transaction, it will showed you custom Pin Pad that that also act as calculator, and you can choose the category, and date of the transaction. You can also define this transaction is performed on which account, and whether there are any description on the transaction or not. This Cupertino Date Time Picker is the first reason why I am choosing Flutter when I create this application.
| Custom Calc | Date Time Picker | Account Selection | Description |
|---|---|---|---|
 |
 |
 |
 |
There are also "auto complete" feature during the transaction input, that will be generate based on the expense or income that you already performed. This will be only showed if only the virtual keyboard is being open on the screen.
When you perform Transfer, in case it have different currency, it will showed you the exchane rate box.
| Transfer Same Currency | Transfer Different Currency |
|---|---|
 |
 |
You can perform search on the transaction, and the result for the tranasction will be showed lazy loading, so we will not fetch too many data.
| Search Fields | Search Result |
|---|---|
 |
 |
The user configuration page, here you can configure all the default value.
- Default Expense: Expense category that will be automatically populated during add expense transaction
- Default Income: Income category that will be automatically populated during add income transaction
- Default Budget Currency: Used on the budget page to showed which currency will be showed first
- Default Wallet: Wallet/account that will be automatically populated during add expense/income/transfer transaction. In the transaction transaction the default wallet will be put on the "Transfer To"
Here you can also control whether you want to change your password, or enable/disable the PIN.
Before you press your F5, change the .dev.env files, so it will point to the correct backend-server.
Use ./docker_build.sh to build the application for production.
It will clean your flutter project, perform pub get, and build it using main.prod.dart instead of main.dart.
The main.prod.dart will load the Production ENV Configuration file.