Skip to content

SBTopZZZ-LG/flutter-banking_app

Repository files navigation

Basic Banking App (made with Flutter)

Programmed by Saumitra Topinkatti.

Problem Statement

To create a banking mobile app with basic functionality of transferring money from one user to another.

Essential packages used!

  • sqflite (sqlite for flutter)
  • provider (state management)
  • intl (localization and formatting date or time)

Page flow

graph TD
home_page(Home page) -- Home tab --> transfer_list[Display transfer history]
home_page -- View Users tab --> users_list[Display all users]
users_list -- Clicking on a user --> user_profile(User profile page)
user_profile --> user_transfer_money[Transfer money]
user_transfer_money -- After selecting a user to transfer money to --> user_transfer_money_action[Perform transfer]
Loading

Model layout

classDiagram
	  ChangeNotifier <|-- DatabaseModel
      DatabaseModel <|-- User
      DatabaseModel <|-- Transfer
      class ChangeNotifier {
		  -void notifyListeners()
	  }
	  class DatabaseModel {
		  +int id
	      +void save()
	      +void refresh()
	      +void refreshAndSave()
	      +Map toJson()
	  }
      class User {
          +String name
	      +String email
	      +int balance
	      +String phone
	      +String occupation
      }
      class Transfer {
		  +int from
		  +int to
		  +int amount
		  +int datetime
      }
Loading

Project file structure

Brief description

At the beginning of the app, sqlite.dart initializes the database required to create and store new records (such as new transfers) by creating the database file and running queries to create the necessary tables, after which a list of sample users is generated in users table. A table for transfers is created as well, but is left unfilled.

After the setup is complete (first run initialization), user can begin using the app to perform the basic actions like viewing transfer history, viewing users, viewing user profile, and making transfers. Once user commits a transfer from one user to another, the user details (for both users) is updated with the specified amount and is immediately saved. Simultaneously, a record of transfer is created with the necessary details, which is finalized by appending to the transfers table.

The app also displays warning pop-ups wherever needed. For example, when trying to transfer money from an account with no money.

When models perform operations like saving, refreshing, or even inserting, the same is notified to the UI and the components are re-built, thus displaying the updated information.

So users are being generated randomly?

No, this is where the configs come in handy. All users are generated by referring from the config file users.dart.

But Saumitra since you're saving three models at once, you're re-building the UI three times

Yes that's inefficient and refreshing widgets that aren't necessarily being changed is a bad practice. To implement a better state management, I use the provider package to implement this for me. Using provider, only the widgets that access the specific model are refreshed and other widgets are left aside. For example, saving a user model results in re-building of the user tile that depends on that user model.