Online Banking System using Flutter

Janvi Ajudiya
4 min readMar 19, 2021

The Charotar University of Science and Technology did not stop worrying about their students development in midst of COVID-19 pandemic as they provide chance to their students to make project as a part of curriculum. As a part of it, I am able to complete my project in this pandemic situation to add it extra to resume.

You have questions like what’s the use of this project? Where it is helpful? What it does? What is the purpose behind this project? So basically, this project is all about flutter application which we can use it in bank to carry on online banking i.e. Netbanking. Cybersecurity is always remain a concern thing with respect to important data or information. So, security of data is also important as it is all about banking system.

What is Flutter?

Flutter is an open-source SDK for building mobile apps from Google. It suits iOS and Android development, and it is also the only way to develop apps for Google Fuchsia so far. The first version of Flutter was called “Sky” and only worked for Android. It was presented in 2015 and announced to have rendering capability 120 frames per second. On December 4, 2018, during Flutter Live, the release of the first stable version 1.0 was announced.

Flutter uses Dart programming language and works in a Dart virtual machine with a JIT compiler. Dart platform supports hot reloading, where a change in source code is applied immediately to a running app without having to restart it. Besides, Flutter has many tools and well-structured documentation for creating software. With this framework, you can build iOS and Android apps from a single codebase.

Look and Feel :

Website or else application is easily available for use in mobiles, tablets, laptops or any other devices like mega-screens or website in projectors. Like in mobiles, small screen is there and laptop has wider screen compared to mobile. So, screen adjustment should be there and this can be achieved via website or application easily. Also, font sizes and images also should be adjusted.

More devices, more users

Like in application, if we use Flutter as Software Development Kit(SDK) and dart as a language, then we can have more number of user as it is for both platform, i.e. for IOS and for android as well.Users can be more attracted through eye-catching application UI as drastic improvement in mobile development has taken place. Also, via Flutter, mobile development becomes easier as it has many in-built libraries which we can directly use for our purposes.

Technology :

Front-end : Dart

Backend : Firebase

Tool :

Android Studio

SDK : Flutter

Flow of the Project :

Content of application :

Whole application is designed by following sequence : start page, login page, sign up page, home page, app drawer. Whole idea will be cleared by following images.

First of all, in start page, There are two options : Login or SignUp. If user already have Signed Up and has an account, then by clicking on Login option and after entering correct credentials, it will redirect to HomePage. If user doesnot have pre-existing account, then by clicking on SignUp, he/she can make an account for this application and after filling up proper details, it will make an account and will redirect user to HomePage.

In HomePage, there are mainly 5 options :

(i) Pay

(ii) Scan

(iii) Collect

(iv) UPI Mandate

(v) History

In first option Pay, you can make payment to anyone after filling up required details of payment like to whom you want to pay, how many rupees you want to pay, how to pay i.e. from card, netbanking or wallet, etc. For implementation of this option, I have integrated this application with RazorPay Payment Gateway. After Selecting details of payment and how to make it, it will finally ask whether to make payment or to cancel payment. If user select cancel option, payment will be cancelled and it will redirect user to PaymentFailed Page. If user select success option, payment will be made and it will redirect user to PaymentSuccess Page and it will display success message to user along with payment id of the payment which is made.

In second option Scan, you can scan anything like QR code and can see to which thing, this QR code belongs to. In third option Collect, you can collect QR code of anything by just entering link of that thing for which you want to make QR code.

In fourth option UPI Mandate, user can make payment through various UPI methods like PayPal as it is offering free API. In fifth option History, application will show transaction history of user like how many payments were made, to whom it was made, payment id of payments, when it was made, etc.

In drawer menu, there are many options like my account, transaction history, contact management, FAQs, UIBlock, invite and logout.

My account consists of profile of user while transaction history contains history of transactions. Contact Management contains contacts of user like to know phone number/ mobile number of any another user. Also, user can call another person or message from there only. FAQs contains frequently asked questions while UIBlock whole UI and load async and we need to start application again in order to continue.Invite option is used to invite any user to this application or to share UPI link with any user and logout is used to complete the session and to logout from this application.

Github link :