Rapid Cross-Platform Mobile App Development with Flutter

Native mobile application development can be an expensive undertaking. With a user market split between two main players, Google's Android and Apple's iOS platforms, effort can easily be doubled when developing an app to target both platforms.

The expectation from user's is high that there is parity between the apps available on each platform, and, that targeting one platform over the other, does nothing more than leave an app out of reach of half of your potential users.

Aside from initial development costs, ongoing support costs add to this expense, locking in the need to have a team of developers skilled in each of the platforms for the lifetime of the application.

Cross-platform frameworks are considered the antidote to this problem.

What are cross-platform frameworks?

Cross-platform frameworks seek to reduce the cost and the effort of implementing an application's UI & logic in two separate codebases, targeting two separate platforms, using their own, incompatible languages.

There have been a number of frameworks that have sought to tackle the problem of providing a flexible, powerful and highly usable cross-platform solution.

Some solutions have sought to re-use web technologies familiar to web application developers such as Javascript and Html. These frameworks wrap content and style to create a UI appearing the same as the native controls and UI elements of the mobile platform. They provide Javascript 'hooks' allowing access to the underlying functionality of the operating system. Although coming close, they tend not to capture the nuances of the native elements, create an experience that can feel not-quite-right and are subject to obsolescence with subsequent OS updates.

Microsoft threw themselves into the cross-platform market when they purchased Xamarin in 2016. Xamarin provides .Net developers a way to produce native applications while avoiding learning Swift, Kotlin or Java, and, instead, relying on familiar technologies such as C# and XAML. The two options Xamarin provides are Xamarin Native and Xamarin Forms, with Xamarin Forms aimed at reducing the amount of code duplication. While Xamarin Forms has achieved a solid measure on this goal, it is let down when the requirements of the app go beyond the most simple of user interfaces.

What is Flutter?

Flutter is an open-source platform, developed by Google and released at the end of 2018. It utilises the Dart programming language and a number of widgets, provided by the framework or via plugins, to create a reactive user interface rendered on top of the native platform's controls.

It's goal and the biggest selling point is its ability to produce native applications while sharing almost all user interface and application code across each platform. The benefits to achieving this has brought down the cost of mobile app development, increased velocity and reduced the time it takes to resolve issues for each platform the app targets.

By producing natively compiled code when built in release mode, Flutter allows apps to be submitted to each of the platform's app stores for distribution to to users, unlike apps developed using web technologies styled to look native, which often have restrictions publishing to Apple users.

What makes Flutter 'Rapid'...?

Flutter supports a growing ecosystem of package plugins at their package repository http://pub.dev. Often open sourced & maintained by the community on GitHub, these plugins provide a way for developers to get up and running on their application with minimal effort. Common plugins provide access to underlying operating system features, such as communication via Http, location services, and other sensor services, and, also important functionality such as state management frameworks, MobX, redux etc.

Flutter provides a 'Stateful Hot Reload' feature which means a developer can push changes into a running application without needing to reload state and receive feedback within seconds. This speeds up the development of a feature and also increases the amount of experimentation that can be done in a short period of time. Flutter was recently ranked third most loved in StackOverflow's Other Frameworks, Libraries and Tools in their annual survey, with almost 69% of respondents saying they loved working with it - above React Native (58%), Xamarin (45%) and Cordova (28%). And, its use amongst developers is growing - 47% over the year to Q1 2021 according to the Flutter team, and 1 in 8 apps submitted to the Google Play Store in May were built with Flutter.

Flutter implements both Material Design (Android's design framework) and Cupertino (Apple) widgets and allow you to target the design system you wish. It's also customisable enough to re-style the application as you wish and create a bespoke design.

With the very latest Flutter release (version 2), in May 2020, Flutter can be deployed on a range of other operating systems as well, including Linux and Windows desktops, and to even build web applications such as Progressive Web Apps & Single Page Applications.

How do we use Flutter?

At Kiandra, we're using Flutter to develop a mobile application utilising location sensors and a Bluetooth OBD2 device to record trips and encourage safe driving within a fleet of professional drivers. The UI widgets provided by the framework have been versatile and flexible, allowing us to create a rich native experience for users featuring a mix of custom and traditional UI elements.

Initially, we're targeting iPhones. Yet the application has not required any code to be specifically written for the iOS platform. All the code that has been developed is ready to be deployed onto an Android device in the future. During development, both platforms have been used by the development team, depending on which devices and which platforms were most available and convenient to an individual developer.

Conclusions

Flutter has been a pleasure to work with. It's had a range of benefits in delivering an app with a rich UI, manages moderately complex, real-time business logic and is ready to be deployed across other platforms when required. The development experience has been a joy, with Dart feeling quite familiar to Javascript and Typescript developers, and the Hot Stateful Reload functionality has allowed for fast feedback after making code changes.

With Google's and the community's continued support, it will no doubt remain to be a solid framework for rapid cross-platform application development.

Want to learn how these tools can help with your next project? Contact us.