Flutter — you will take to it in no time. It’s all because of the high-speed development, its attractive interface and components whose UI will work on many platforms, instantly visible effects, and a huge open-source community around this project. That is why we decided to use Flutter in our two projects — check out which features of Flutter have proved the most useful.
Flutter is an open-source framework invented by Google, geared to create applications designed for various operating systems. Initially available only for Android devices, it currently allows you to build applications for iOS, macOS and web browsers.
Flutter allows you to efficiently implement attractive-looking, responsive user interfaces. It enables the simultaneous use of UI components and design patterns from different platforms — including Material Design widgets derived from Google design language and the Cupertino set, originating from Apple operating systems.
The basis for creating the application is the Dart language, which is currently being developed by Google, mainly having the discussed framework in mind. Dart is an object-oriented language with the C programming language-derived syntax that also allows the use of functional programming. Additionally, Dart has a well-designed API for asynchronous operations and the ability to instantly update the code of a running application. For developers who know languages, such as C#, Kotlin or Swift, it allows them to quickly become fluent in using it.
Since Flutter is an open-source framework, in the last few years, a large community of programmers has formed around it, creating libraries with a wide range of applications — from highly- specialised UI components, to databases, to libraries dedicated to network communication.
It is also worth noting that building richly detailed GUIs with Flutter is very smooth. Due to the “Hot reload” functionality, changes in the code generating visual elements are immediately visible on the device screen. This process does not require the developer to restart the application and navigate to the modified sections of the application.
Let’s look at how Flutter works in practice, using the example of two projects developed by our team.
Our task was to create two mobile applications, the key purpose of which was to present the content downloaded from the server, as well to process and send data entered by the user via the smartphone touch screen. The use of this framework in both cases enabled developers to create software compatible with Android and iOS using a common source code.
In the case of the Sustac application, which is a compendium of knowledge about good practices that the user can apply in everyday life to minimise the climate change, Flutter has allowed us to create one code, compatible with iOS and Android, which significantly shortened the work time and markedly reduced the costs of project implementation.
The application integration with the database created in the Google Firebase service only required the configuration of the available dependency and writing the code fetching the data using the Firebase API. Then the downloaded data was sent to the widgets presented on the user’s smartphone screen.
The main screen of the application features a grid of thematic categories of texts accessible to the user and a gallery of green cards representing posts available on the blog. Below you can see a bar that enables you to navigate between the various sections of the application (energy savings calculators, a search engine).
Since Flutter offers a rich set of graphic elements, such as navigation bars, view grids, lists and image views, we have availed of ready-made components, adapting them to the nature of the UI / UX project.
Sustac also offers the possibility of searching for articles using words entered into the textfield. The content of articles stored in the Firebase server database was indexed using the Algolia service, to which the application sends queries using a library written in the Dart language. Sending queries and receiving search results is a matter of typing in just a few lines of code, and the associated list of widgets showing the results is automatically generated.
OMS (Order Management System)
OMS is an application designed for engineers working on construction sites. It enables you to quickly browse a catalogue of construction elements and tools, and then place orders, just like we normally shop online.
The application is designed for Android smartphones but the experience in programming using Flutter allowed for the work of the team that natively creates software for iOS on a daily basis.
Like in the case of Sustac, the users take advantage of the application to search and navigate the catalogue of contents, that this time is the description of items, which can be added to the basket, and then ordered by sending a list of selected products to the orders department.
The user interface is slightly more expanded here, compared to the application discussed above. The complexity of the product variants available in the catalogue required several ways of showing data on the smartphone screen. Depending on the available options of the product, its description is displayed via a photo gallery, detailed text description or a list of variants. The user makes their selection by using the picker or buttons visible on the screen.
The database this time is located on the AWS server, and its content is downloaded and stored by the mobile application to facilitate the user to browse the catalogue, also in the case when there is no Internet access on the construction site.
On the technical side, a Dio — an HTTP client library for the Dart language was applied here, which downloads resources from the AWS server, and Hive — a no-sql database, in order to save a local copy of the product catalogue, as well as the purchase history sent by the user to the orders department.
As you can see, the specific advantages of Flutter allowed us to create applications in an efficient way. Not without significance was the Android application created by a team that specialises in iOS on a daily basis — this is the strength of Flutter. What was characteristic of both projects was quick and efficient implementation. We could venture to say that it would not have been possible with a more traditional approach to creating mobile applications.