An Expense tracker app that lets you add expenses along with a price tag on any valid date selected from the calendar. It then shows the result in a list along with a beautiful colored chart showing the data of the last seven days.
Topics covered: • Flutter Fundamentals: Compose UI from built-in and custom widgets, style and configure via arguments • Theme: Define a global theme for colors and texts and using Theme.of(context) • Styling and configuring widgets • Lifting state up and using stateful widgets only when required. • Passing function references and data around.
Workflow/Breaking down the app:
- Make a class of transaction with 4 variables: id, amount, title, date.
- In Main.dart, create an empty list of transaction type called UserTransaction. This list will hold all the transactions.
- Create a function to add data to this empty list. AddNewTransaction. Now in order to output new transactions we need to add the setState to this function.
- Now our main screen is divided into two parts, chart and user transaction. The input for user transaction is done with the add button on appbar that opens a bottom modal.
- Create the add button on appbar in main.dart file, onpressed for this would take a function.
- Create the function openModalScreen in the main.dart file that calls another class. Pass the AddNewTransaction function as a parameter for constructor of this new class called NewTransaction. Now why are we doing this? We are doing this to allow the input fields created in the modal to be able to add data to the list created in the main.dart file. This function provided a direct link between NewTransaction class and userTransaction function.
- Okay now, create the NewTransaction class, it should be stateful because we have to output the chosen date from datepicker on the screen here.
- Now this class creates a function type variable tx and it is passed to its constructor.
- Then create two textfields, a text to show chosen date, a flatbutton for datepicker, a raisedbutton for add transaction.
- Now these fields must add data to the main.dart user_transaction. Flutter offers another type of variable, textEditingController. These controllers are added to TextFields to record the data entered. Make two new variables, one for title and another for amount in the stateClass and pass these as controllers to TextFields.
- Make a button for datePicker, and pass in a function to on-pressed. In this function, use a built-in feature for datePicker showDatePicker and set the parameters, intial date, last date etc. .then(variable) at the end helps us get the value chosen by user. Store this value in another class variable using the setState. We use setState here because the value needs to be updated when user chooses a value.
- Create another function submitData, this will be passed to onPressed of the Add transaction button. This function passes the parameters to the tx function, parameters are the textEditingControllers along with the ChosenDate from the datePicker.
- Now, our main.dart AddNewTransaction Function has these values, these values are added to the userTransaction list. And that list is passed into another class that will be used to output transactions on the screen. Class name: Transaction_list.
- Create a list variable for the class, pass in the constructor, make a front-end for Transaction_list, we can do this be creating flutter built-in ListView.builder. itembuilder ListTile, it gives us leading, title, subtitle, trailing etc, use those to output the values on the screen.
- A delete trash will also be added here and the function for that will be passed into the constructor. Onpressed will be this function.
- In the main.dart, we create a function for deletion. It uses the transaction ID and removes it from the list. Milestone: Application takes input from user, shows it in form of tiles onto the screen as transactions and deletes the transaction when trash can is pressed.
ChartBar
- Now in the main.dart file, create a getter of List type, this getter creates a list of transaction of the last 7 days. Pass this getter as a parameter to Chart.
- In chart, create a List and pass into the constructor.
- For chart, we need different data, first letter of the days of the last seven days, total weekly expenditure, total daily expenditure. All these will be calculated in the chart.dart file.
- Make a list map string object getter getGroupedTransactions, it will calculate the last seven day names, then a loop to calculate total sum, then the first letter of the day names, and it’ll be return by the function.
- Another getter totalSpendings will be used to calculate the total spendings within a day using the above getter.
- The chartbar.dart will be called by passing in these values, for totalSpendings, we pass in the percentage.
- 3 variables will be created in the chartbar, passed into the constructor, create the front-end and pass in the values. Containers, sized box, stack, container and fractionally sized box is used for the front-end.
This project is created by following along the Flutter course on Udemy. Here is a link: https://www.udemy.com/course/learn-flutter-dart-to-build-ios-android-apps/