Hybrid performance
At OWA, we like to recommend hybrid app builds for our mobile app development as this approach enables us to create a single app that can run on multiple platforms, including Android and iOS. As such, we often work with Apache Cordova where an HTML- and JavaScript-based application can be wrapped into a native container for use on mobile devices. Alongside Cordova, alternatives include React Native and Xamarin – plus newcomer Flutter.
With the latest Flutter 2.0 release in 2021 adding support for web browsers alongside iOS, Android and desktop operating systems – and its huge growth and adoption within the community – we thought it would be a good time to dive into the world of Flutter and the Dart language in which its apps are written.
What is Flutter?
Flutter is a cross-platform tool developed by Google that allows you to write a single codebase in the Dart programming language. This is then compiled to machine code for a variety of platforms via platform-specific software development kits (SDKs) – such as those provided by Android and iOS.
Flutter apps use a reactive programming model and a tree-like structure made up of ‘Widgets’ which is then rendered into the native user interface (UI) and reacts and updates to any state changes within the app. Flutter contains a core selection of widgets that provides all of the essential interfaces and functionality required within a mobile app. This includes the ability to display specific stylings based on the platform being used – for example Material design on Android and the Cupertino widgets on iOS – to provide interfaces that match specified design language.
To illustrate this, a Circular Progress Indicator Widget can display uniquely based on its platform as shown below:
Our use case for Flutter
With the recent launch of our redesigned OWA Digital website we thought it would be a good time to mirror these changes on Domain Analyser. This is an OWA-published app that allow users to enter a domain and return all of the information for it, with the ability to email the results to yourself. Domain Analyser is currently written in HTML / JavaScript and published to both Android and iOS with the use of Apache Cordova.
The app provided a good variety of UI elements and underlying logic, such as external application programming interface (API) access, for us to re-create within Flutter and to compare the differences in development between the two hybrid app development practices.
The updated Domain Analyser Flutter app is now available in the Apple and Google Play stores.
Flutter excels in its development speed and efficiency, user interface flexibility and performance from out-of-the-box widgets.
The good
Learning any new language can be an intensive process. However, Google-backing and the open-source community-based nature of Flutter mean setup documentation is easily navigated and a new project can be up and running on a mobile device pretty seamlessly. This, combined with Flutter’s capability to hot reload directly on a mobile device during development, and the ability to create and re-use individually customised widgets across multiple parts of the app, meant the development cycle for re-building the Domain Analyser app was smoother and faster than expected.
Although the Domain Analyser app does not contain any massively complex design elements, we were able to explore a multitude of widgets outside of the rebuild requirement to get a better understanding of their uses and any potential downsides. From the ability to ‘Paint’ interfaces to generate a fancy navigation menu or just display design-specific elements, such as the loading spinners, it was evident that the consistency in display and performance of these widgets was impressive. A few other positives include:
- Code re-use from customised widgets within the project
- The ability to develop not only for Android and iOS but also web browsers with the Flutter 2 release
- The huge selection of widgets and Dart packages via community submissions
- Dart as a language is easy enough to pick up if familiar with JS, Swift or Kotlin / Java
- Animations are easy to create and implement and provide much better performance than we’ve seen in other cross-platform tools
The not-so-good
Despite Flutter’s many good points there were a few apparent limitations to its use. While Flutter does support the use of individual design of widgets this does not apply across the board and especially when considering the use of community packages. If there is a strong requirement for the entire app to look seamlessly native and not share any individual UI elements across platforms then you may struggle to achieve this in a simple manner.
In addition, some actions that require a deeper level of native integration with iOS seem to be lacking although this does not appear to be an issue with Android. One potential issue could be when Apple releases an iOS update that breaks a part of the Flutter UI – how quickly can this be rectified?
Another issue we came across occurred during familiarisation with the platform tool. Due to the large number of widgets available it often became a trial-and-error task to find the correct widget for the job – especially when dealing with specific UI layering and positioning. However, this issue improved during repeat uses throughout the re-development process.
In summary
Flutter is quite an impressive tool when developing cross-platform projects. It mostly excels in its development speed and efficiency, user interface flexibility and performance from out-of-the-box widgets. It also benefits from Google’s ongoing extensive support and the active Flutter community, which produces additional open-source widgets and documentation. All of the above make the onboarding process an enjoyable experience and Flutter a very promising tool for future use in projects that meet the ideal criteria for hybrid app development.
The Domain Analyser app is available at the following links:
