Flutter Applications
Expense Calculation App Step by Step
What you'll learn
- Understand the idea of the expense tracking app
- Create a Flutter project
- Design the app screen
- Create the model
- Use an external library to display the date
- Add a general style to the app
- Add the logic to the app
- Change how data is displayed and add new data
- Display the percentages of days
- Finish the app
About this course
This course teaches you to build an expense tracking app with Flutter step by step. It is a practical app in which you learn how to turn an idea into an app that runs on your phone. It starts with an overview of the app, then the first stage, which is creating the project, the initial design of the app screen and creating the model. Next you use an external library to display the date and add a general style to the app. In the second stage you add the logic to the app, including the logic for the app lifecycle, you make changes to how data is displayed and you add new data. In the last stage you prepare the display of the percentages of days and then finish the app. The course suits those who have learned the basics of Flutter and the Dart language and want a practical app, and it is best to have a basic knowledge of both before you start. Afterward you will be able to create a Flutter project, design its screens, connect them to data, add the programming logic and finish a complete app on your own. The teaching is practical and gradual, and you follow the lessons in order to move from the idea to the application step by step.
Expected outcomes
- Develop professional applications using Flutter
- Create attractive and high-quality user interfaces
- Optimize application performance across different operating systems
- Use Flutter tools to build applications quickly
- Understand data handling in applications
- Apply programming concepts in Dart
- Enhance programming skills in a modern environment
Learner reviews
Course content
1Expense Tracking App using Flutter
12 lectures
- Overview of the ApplicationAn overview of the weekly personal expenses app: showing spending for each day, adding a purchase with name, amount and date, distributing the percentages, and the widgets it will be built from.4:55
- Phase One - Project CreationCreating a new Flutter project in Android Studio and setting its basic options, then cleaning up the main code, naming the app and running it on the emulator.7:41
- Initial Design for the Application ScreenBuilds the initial home screen design by splitting widgets into separate files, adding an IconButton with onPressed to add purchases, and laying out Containers and Cards with spacing and shadow.14:33
- Creating the ModelCreates the Transaction model inside a models folder, defines the list of transactions, then designs how each transaction is displayed using Container, Text and an IconButton that adds the ability to delete an item.13:43
- Using an External Library to Display the DateSeparates the code into organized files and folders, creates standalone widgets, then uses the intl package to display dates in a suitable format after adding it to pubspec.yaml and restarting the app.9:03
- Adding a Global Style to the ApplicationSets up the app's global theme in main.dart, including the font and a default image shown when there is no data, registers them in pubspec.yaml, and locks the screen orientation using SystemChrome.8:00
- Phase Two - Adding Logic to the ApplicationStarts writing the app logic in the home file, defining a getter that returns the transactions, a method to add a new transaction with a title and amount, and a method to delete a transaction by its id.12:20
- Adding Application Lifecycle LogicOpens the add-transaction sheet from the icon button, calculates the available height with MediaQuery to split the screen by proportion between the chart and the list, and adds a FloatingActionButton.13:10
- Modifications in Data DisplayRefines how transactions are displayed by replacing the Container with a CircleAvatar inside a ListTile, creating a separate widget for the transaction list, and showing an image and message when the list is empty.16:24
- Adding New DataBuilds the new-transaction input screen with text fields and a button to pick the date through a date picker, validates the entered values, then adds the transaction and closes the sheet using Navigator.pop.24:40
- Final Phase - Preparing Day Percentage DisplayStarts building the chart by calculating the total transaction amount for each of the recent days, extracting the weekday name, and preparing these values to pass to the chart bar widget.17:13
- End ApplicationCreates the ChartBar widget that receives the day, amount and percentage, showing the amount inside a FittedBox and a bar whose height matches the percentage with rounded corners, then tests it by adding transactions.17:19
Instructor
Eng. Amr Abdel Fattah
