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.
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.
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.
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)
- testing is easier, since the code shall be checked once for all platforms;
- communication is more transparent, since a single development team is involved in the project;
- adaptability making it possible to configure PWA out of the box, while some of the features can be taken from a ready-made solution and adapted to the needs of your business;
- cost-saving due to fewer developers engaged in the project that results in fewer development hours and reduced expenses.
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.
- The Cards section makes your cards with a shared and divided balance visible.
- The Accounts and Goals sections have the typical functionality of a “money box” and existing accounts: debit and credit.
- History displays the monthly expenses by category.
- The Autopayments section includes transfers by phone number and payment by QR code.
Functionality offered by Flutter web is on a par with a regular mobile app
Head of Flutter team at Surf
