Dariusz Konieczko, Android Developer
The IT industry has long been like a sprint run across the marathon. Once we think that we have reached the right pace, we need to speed up a lot so as not to fall behind and get ahead of the competition. We have to keep an eye on trends, because we never know when the technology that will actually revolutionise our work will appear on the market.
Flutter is a set of development tools (SDK) for creating multi-platform applications. The project is developed by Google and independent programmers. At present Flutter supports the programming of mobile applications for Android and iOS systems. What is more, this technology is accompanied by such a dynamic development that soon we will be creating web and desktop applications in Flutter. However, for the time being these platforms are still in the testing phase, so we will focus on solutions strictly related to our smartphones. See the positive aspects of writing applications in this technology from the programmer’s point of view, which directly contribute to the speed, quality and lower price of the project.
Common code, one syntax – multiple platforms
One of Flutter’s greatest advantages is the ability to nearly completely co-share the code. We write one code that is compatible with all platforms, with a single language – Dart. Interestingly, this applies to the whole application, including the user interface. This significantly increases the pace of project development and response to changes – programmers can focus on business logic, without getting into the specifics of a given platform. Since flutter applications are written using only one syntax, the implementation is consistent and transparent, and thus easier to test and understand.
Quick code verification
The “Hot reload” function allows you to view code changes almost in real time and you must admit that it performs well, and on the other hand, a similar solution in native Android often fails. We can observe changes in the code in real time on a simulator or physical device. In case of the slightest doubt as to whether a given piece of code will work as we expect, we press the appropriate key combination and after a while we see the effects. This is especially useful when we want to test the view in different configurations. This function also allows you to use Flutter as a live prototyping tool. This is particularly useful in workshops with customers or when consulting a graphic designer.
System-independent UI layer
On Flutter’s home page there is a large inscription explaining what the tool was created for: “UI toolkit for building beautiful, natively compiled applications”. Indeed, the authors have put a lot of work into providing elegant and consistent graphic elements that look the same, regardless of the platform or current version of the system. How did they achieve this? Simply because Flutter, unlike its competitors, does not use a native implementation of UI controls. Instead, it uses its own components and an independent rendering engine. These components are largely based on the generally accepted style of Material Design in the Google ecosystem.
It is worth mentioning that there is no need to include a single external library to design an elegant interface. The standard includes almost everything you need in Material Design. The good news is that for selected components (currently there are 26 of them) it is possible to use Cupertino style, known from iOS system. For example, on Android we can display a dialog box in Material style, and on iOS in Cupertino style.
Kingdom of widgets
The Widget concept deserves a special recognition in Flutter. These are the pieces that make up the user interface. The widget is most often a view or graphic control, but there are others that can be used to detect gestures or position inferior widgets. We come to the conclusion that basically everything connected with the graphic layer of the application is a widget. At first glance, this may appear to be a strange solution, but after a few moments of tinkering with the code, we will see the purpose and unlimited possibilities of this approach. Widgets can be combined into larger elements just like blocks. The creators have designed standard UI controllers in such a way that the possibilities of their adaptation through composition are as great as possible.
Let’s take a widget representing a button. In Flutter, its content is not defined by text, as is the case in native Android, but by the general property of ‘child’, or any other widget. This means that we can put anything in a standard button, not just a text. In most cases, therefore, the need to implement our own interface controls from scratch in order to implement the most sophisticated ideas of the client disappears. This cannot be stressed enough. It saves a lot of time and unnecessary stress for the programmer.
We can choose from a really large number of standard widgets, most of which are perfectly documented. On the documentation pages you will also find interactive implementation examples and sometimes also instructive videos. Because of the flexibility of composing, you only need to look at a few widgets to start with to create a view tailored to your needs. We can easily test the components we have prepared using the standard “flutter_test” package. Importantly, since the Flutter graphic layer is isolated from the native platform, no target device or simulator is needed to run UI tests.
Performance similar to that of native applications
Applications written in Flutter are compiled to the native code, which results in a great advantage for their speed of operation. In addition, the graphics engine is designed to operate at 60 frames per second and, if the device allows it, Flutter can maintain up to 120 fps. The programmers also have tools at their disposal to detect possible performance drops. In this respect there is really nothing to fear.
Working environment and tools
There are two officially supported work environments to choose from: Android Studio and Visual Studio Code. Both work very well in everyday work, allowing the use of predefined keyboard shortcuts dedicated to Flutter. The DevTools kit includes a brilliant tool called “Flutter inspector” to analyse and debug the user interface. It allows, among other things, to analyse the hierarchy of views, display a frame around UI controllers in order to verify their size and position, and even search for a controller in the code by clicking on it during application operation. There are also tools for: memory analysis, CPU, network traffic analysis or application size testing.
This is the first tangible result of our work with Flutter. We have taken care of our existing application for the IoT product GoodieBox. It is an incentive system for companies that enables their employees – through the application – to grant each other virtual points, which in turn can be exchanged for prizes from the vending machine. We have written the application from scratch, at the same time introducing graphic improvements and several new functions. As the application uses the style of Material Design and also offers different colour versions and icons tailored to the customer, Flutter with its GUI-centric architecture proved to be a great success. The application not only looks good, but works reliably from the beginning. Since the publication of the new version, we have not recorded a single failure.
We used Flutter once again in cooperation with BPSC. The result of our actions is the Start Screens application – a mobile tool for managing a production company. The application downloads data and uses the proprietary Impuls EVO platform (ERP system from BPSC), enabling a quick overview of the most important indicators in the company. The solution places great emphasis on intuitive operation and clear interface. More information can be found in the video.
Successful implementations and positive customer feedback encouraged us to use Flutter also directly in Netizens. We started rewriting our internal application, originally written natively. The application is an extended version of GoodieBox. Apart from the mechanism of awarding points, it contains data and contacts to employees, a calendar of events or the latest information from the life of the company downloaded from the intranet. Flutter is supposed to guarantee more efficient application development.
When writing about Flutter, it is impossible not to mention its biggest competitor when it comes to multi-platform applications – React Native. In numerous articles about Flutter, we find a lot of comparisons and attempts to answer the question: which technology is better? React is undoubtedly a more mature tool. It debuted on the market in 2015. At present, its advantage is certainly the large community and the number of libraries available. Undoubtedly, both platforms have their strengths and weaknesses, but each of them guarantees a solid application.
However, there is something that can turn the tide in the future in favour of Flutter and, at the same time, it is the seventh reason for our calculation in the title. This is the Fuchsia operating system. It has been created for several years by Google, which uses Flutter in the user interface layer. Rumours are already spreading on the web that this system would replace Android in the future, thus eliminating its biggest disadvantages. Importantly, it would also support existing android applications. This year it has been reported that the giant from Mountain View has begun to obtain Bluetooth certificates for the new system, which may mean that everything is slowly moving in this direction.
With tools as comfortable as Flutter or React Native that optimise the work considerably, the question may arise as to whether we still need native applications. At present, a native approach can still be better and sometimes necessary. This is the case, for example, with applications that make extensive use of specific system functions, such as background operation.
There is no doubt that Flutter has brought additional value and a lot of revival to the mobile market. We do not need to involve two teams of programmers to write two different codes. The beginner developer will create his first application in it, without encountering as many “surprises” as when working on the single-platform version. The professionals, on the other hand, will offer their customers a reliable and impeccable looking product in much shorter time and at a lower price than would be possible with a native approach.
Are you looking for a mobile application contractor who will complete the whole project for you? Write to firstname.lastname@example.org. We will answer all your questions and prepare a personalised offer.
Author: Dariusz Konieczko, cooperation: Adrian Leks.