Flutter-based Neobank App

Concept of a 3-in-1 universal banking app: mobile, web, and desktop

Launched by Google in 2018, Flutter has outstripped competitors and grown into one of the most modern cross-platform frameworks.

Meanwhile, Google continues to actively develop Flutter, and has recently released the third version. It has made a real revolution in frontend development at the required stability level. This means, it is possible now to develop an application on a single code base and adapt it for different digital platforms: mobile, web, and desktop.

As a result, Flutter provides for high development speed and considerable cost saving. Where a business owner would need three development teams: for Android, iOS and web version, a Flutter team can do twice as fast.

In case with a Flutter mobile app, the business can save 40% if compared to native app development. With a new multiplatform approach, the project budget can be reduced by up to 60% due to building applications for mobile, web and desktop versions with a single code base.

How does it work? You can reuse 80-95% of the code base for different platforms. Then, you have some platform-specific features and UX solutions that will have to be finalized. As a result, your overall costs will be less than for separate native projects for each platform.

We have tried out Flutter web in practice and created an online banking conceptual prototype and are ready to share the result. 

Try our online banking conceptual prototype
Let’s try

Working well on all platforms and adaptive to any device

Flutter allows creating a universal product for your bank or fintech company covering three distribution channels in one go: mobile, web, and desktop applications.

Flutter creators abstracted themselves from the platform-specific mechanisms for designing UI. This allows the UI to be multiplatform.
Vladimir Makeev

Director

How it works in mobile and desktop versions: Flutter has implemented its own layout framework, which is rendered in the hardware of the device with a special rendering engine.

How it works in the web version: the rendering engine is downloaded, which weighs 2.8MB, and the rendering runs similar to the process in mobile. The engine is started via WASM. Figma functions in a similar way, for example. This process removes issues with HTML, CSS, browser and OS incompatibilities.

dart2js is used for the web app compilation. It is actually in charge of translation of a Dart-written  program into a program in a JavaScript language. You can read more here.

As a result, we get a web application with the same graphics engine under the hood as used in the Flutter app for Android and iOS. Since the rendering methods themselves are identical, there will be no difference. At the same time, the user on their side will see no changes.

Another strong point of the Flutter app is adaptability. It adapts to any user environment and works on any operating system and in any browser. This option is due to a number of different compilers implemented for the framework that allow building a Flutter app to be started on different platforms. The web application, when compiled, will have 100% the expected behavior (and will be identical to Android/iOS).

The app UI adapts to different devices: for example, when exiting the full-screen version of the browser, a tab bar appears at the bottom of the screen, as in the usual mobile interfaces. At the same time, the web version is really fast.

A new Flutter version can become a real lifesaver where the application shall be identical for all platforms: iOS, Android, web, Windows, macOS — and does not need any SEO promotion. These can be services with the functionality of task managers, calendars, Notion analogues for creating notes and text documents, streaming, complex professional applications, such as music editors, and more.

Try how the app works on all platforms
Go to the app

Changeable look for any platform

Our idea was to develop an impersonal banking app concept in a laconic minimalistic style to demonstrate how easy it is to create a design in the corporate style of the specific bank. Custom fonts can be loaded into the system — and the Flutter engine will display them properly.

The Flutter web application allows you to easily determine the platform where the user opens the browser to run the app. Additionally, it’s possible to implement any UI, depending on the design or business needs.

Flutter also allows developing PWA out-of-the-box. PWA stands for a Progressive Web Application. It is a type of web app that can operate both as a web page and mobile app on any device. 

The neobank PWA can be downloaded via the installation APK file from the bank’s official website (for Android) or added to the home screen (for iOS). The obvious advantages of PWA are that it loads faster, can work offline, and takes less storage space.

Driving technology benefits for fintech

Flutter is the optimal technology for creating a multiplatform app (mobile, web,desktop) 

In our experience, we became convinced that Flutter did an excellent job with building on the web, and did almost a complete job for us. The thing that remains is only to conduct a final check-up, find and fix errors that may appear when switching to the web platform.

Covering mobile bank basic functionality

With Flutter web you can quickly deploy a web version without changing the development process and without rewriting everything from scratch.

Such a version of the banking application will offer the same functions as in the typical mobile application of the standard bank.

Functionality offered by Flutter web is on a par with a regular mobile app

Non-standard problems require non-standard solutions. This is not for the first time when Flutter turns to such a solution for us in large projects for our clients. We believe Flutter offers the most thorough implementation of the multiplatform concept. It not only optimizes the development process and reduces costs, but also helps to overcome force majeure that may seem insurmountable.
Eugene Saturov

Head of Flutter team at Surf

Ready to enter the next Flutter technology level to fight off competition?

We are ready to assist.

Vadim Mazin

Chief Commercial Officer, Surf

Let's develop your banking app!

Drop a file here or click to upload Attach file
    Continue reading
    Hidden span
    Estimate project