Building a Smart Budget Manager Desktop Application Using Flutter

Hello everyone!

Today I am here to share a user interface of the Smart Budget Application which will run on desktop. I will use flutter framework to develop this user interface. I will try my best to build a unique and modern user interface using flutter framework. As the application is large so I will develop complete UI and some core functionalities such as recording transactions and displaying them on the dashboard of the application.

I have created the project with the name smart_budget.

Finally you can see that the project has been built and now next process will start from here. Now everything will be done in this project and it will run on windows because I am building it especially for the desktop.

flutter config --enable-windows-desktop flutter devices

In order to setup it for the desktop windows I am going to run this command in the terminal of the project and it will setup everything.

I will design the main UI and my entry point will be in the main.dart file. Let us start building UI step by step.

This is the main.dart file where at the top I have imported material library to use MaterialApp design for the screen. I have returned Scaffold widget and everything is empty at the moment just a simple white screen.

I have created a theme.dart file in the utility folder. This will include a complete format for all the screens and each screen will share the same theme and design. I have passed that theme file to the theme of the main.dart file so that each file can have the same theme.

This is the constant.dart file. As from the name it is obvious that this is the file which contains constant values which do not change over time. I have defined the primary and secondary colours in this file. I have defined the background colour and layout of the screen. In future if I need to apply a global change in the colour then I just have to update the value here and it will be done.

This is the theme.dart file. This file defines global theme for the entire application. If you notice I have already passed this theme file to main.dart to apply the impact throughout the application. So due to this all screens will share the same look.

I have defined all the things such as title text, card widget style, elevation, padding, input decoration theme, different font styles for different screen sizes.

I have created a beautiful sidebar that is like a static sidebar. It is just like the navigation drawer but I have used NavigationRail to generate this beautiful static sidebar. It allows navigation between different screens without any complete loading or building of the screen.

There are 5 buttons in this sidebar such as Dashboard, Transactions, Categories, Reports, and Settings.

---

After setting the theme file, constants to use in the files I have created new dart file dashboard_screen.dart. In this screen I have started creating the dashboard or homescreen of the expenses managing application.

At the top I have wrapped it with Scaffold and then in the Scaffold I have added appbar. I used simple text for the appbar. Then in the body I have used a column widget for the vertical alignment. Then inside the column widget I have used 3 rows. In each row I have called SummaryCard widget which I built separately and made it available to use it again and again by calling it instead of writing complete code again. I have used text in the cards and gave a unique colour to the icons according to their nature.

This is the output of this code. You can see the appbar, and the row of representing different transactions.

Then in the remaining part I have designed a different section which will show all the transactions in the application. If any transaction is reported then it will appear in this section and similarly the income, balance, and expenses will be calculated.

Here you can see the output of the this code. Currently as there are no any transactions or hard coded data so the section is empty and there are no any transactions in the record. When any transaction will happen that will automatically appear here.

Then I am exploring how the transactions are recorded from the transaction screen. There is a dialogue box which appears when we click on Add Transaction. It has two input fields as you can see in the picture. One input field is for the title of the transaction and the other is used to enter the amount of that transaction. Then there is a dropdown to identify the type of the transaction. The dropdown shows Expense and Income option and we can choose according to our needs.

After adding the details there are two options such as save and cancel. If we have entered the transaction accidentally but we did not want to add that one so we can cancel that transaction. But if we find all the details are correct then we can proceed next and save that transaction. In this way that transaction will appear there as well as it will be reflected in the dashboard page as well.

This is the complete code for the dialogue box.

I have added one transaction. I added the title as salary and then added the amount of salary. I chose it as income and then saved it. It is how it appears on the transactions screen.

On the same time I can see that the transaction has been recorded on the dashboard. The income is appearing in the first element in the row with the green colour wallet icon. Moreover the record of the transaction is also visible as recent transactions in the dashboard.

In the transactions section there is also a delete button. It is necessary to delete any transaction. I can delete any transaction from the record of the transactions if it was wrong or unnecessary. If I delete it from here then it will also reflected on the main dashboard.

	Transactions recorded

Here you can see that my desktop application is working very well. I can easily add transactions in my application. Each transaction has its own record with date and title.

	Dashboard & calculations

Similarly on the dashboard all the transactions are reflected and calculated correctly. My total income is 100,000 which is my salary. And I have performed some shopping of the grocery and paid some utilities and house rent. My all expenses are 35,000 and my remaining balance from the income is 65,000.

	Categories Screen
	Reports Screen
	Settings Screen

I have designed there more screens for the future development but so far I have developed them as dummy screens but later on I will develop them.