How Flutter Is Revolutionizing Cross-Platform Development

As a business owner seeking to reach as many users as possible with a custom mobile app, or as a developer responsible for its creation, you know that the ideal app will need to run seamlessly on both Android and iOS platforms. In the past, the only way to do this well was by writing the app twice—once for Android in Java, and once for iOS in Objective-C or Swift.

Since duplicating efforts is time-consuming and costly, this led business owners and developers toward a common goal: Build an app just once, and have it work effortlessly across multiple platforms. Obviously, this would significantly cut costs by reducing the amount of code that needs to be written, tested, and maintained.

So what methods have been developed to fill this need, and are they any good? This article explores cross-platform development strategies, with a particular focus on Flutter, the recent game-changer in the field. 

Tracing the Roots of Cross-Platform Development

Java was one of the first languages to offer the promise “write once, run everywhere.” It was extremely popular and held up in many ways. Unfortunately, it never fully delivered user interfaces that looked like native apps.

Soon, other attempts at cross-platform applications were made using web technologies—with mixed results. Initially these tended to be slow, glitchy, and resource-hungry. As time went on, many cross-platform solutions had a virtual machine running in the background, effectively running an app to run your app. Naturally, performance took a big hit in these cases. Some apps used web technologies, which had the appeal of enabling web developers to become mobile developers, but these apps rarely lived up to users’ expectations. The quality just wasn’t there.

In the face of these challenges, it has become something of a best practice to “always go native” when developing an app. The extra cost is simply the price of quality. In some cases, this is still true. But in 2017, a new player entered the field—Flutter, an open source framework created by Google for cross-platform app development—and the game has never been the same. 

Recent solutions for cross-platform development have centered on the practice of translating a command into a native component.

Tools like Xamarin and React Native allow developers to define a UI that runs on Android and iOS by translating to the underlying native UI layer. However, this means that the developer is restricted by the pre-existing control set defined by either UI system. These constraints, for instance, can result in a button's size and behavior varying slightly between the two platforms, leading to subtle differences in the look and feel on different devices.

This method of development can be likened to the difference between an original painting and a collage. In an original painting you have the freedom to make any shapes or colors you like, but if you are assembling an image with cut pieces of paper, you will be limited to the shapes and colors as they already appear on the pieces. 

Unpacking the Benefits of Flutter 

Flutter, on the other hand, treats all platforms like blank canvases, drawing every single pixel as defined by the developer. It’s like an original painting, unlimited by predetermined parameters. This results in the same UI on iOS and Android, losing nothing in translation. 

 This sounds fantastic in theory, but how well does Flutter perform in real-world professional use? Here at TSG, we have used Flutter on a number of production customer projects. These apps are now successfully in the hands of the end users. 

Here’s why we like Flutter:

Reliability: Flutter Actually Works! 

We encountered no major issues with Flutter itself, its stability, or its performance. Features typically work as described—a rare delight in the world of programming—and the documentation for getting up and running was excellent.

Enhanced Developer Experience

Our team was very impressed with Flutter’s hot reloading right out of the box. Some even prefer it to the Swift previews found in native iOS development. The unit and UI testing out of the box are also excellent. We were especially impressed that UI tests can be run without starting up a device or a simulator. This pre-configured, ready-to-use functionality not only proved efficient but also significantly expedited our production process, leading to notable cost savings. If tests take a long time to write or run, a team will be reluctant to use them, and they can decay over time. However, in our case, the experience was so enjoyable that one of our developers went so far as to say, “It’s fun to write unit tests in Flutter!”

Another benefit is the robust first party support for Integrated Development Environments (IDEs), with Visual Studio Code (VS Code) standing out. The available extensions make it genuinely easy to work directly in your editor.

Something that might initially scare people away from Flutter is that it uses the somewhat esoteric Dart language, but its similarity to modern languages (especially Typescript) makes it accessible and easy to learn. Our team had no complaints about using Dart. We were also impressed with the debugging functionality. Setting breakpoints in VS Code at an exact line worked well and quickly. To top everything off, the documentation is excellent. Google has clearly invested heavily in Flutter and Dart, from YouTube demonstrations to interactive written documentation. If GitHub is more your speed, the open-source nature of Flutter makes it possible to dig into the source code and find exactly what you’re looking for.

You Can Still “Go Native” 

For those moments when you need deeper integration with the Operating System (OS), Flutter provides a seamless API. You can even selectively introduce Flutter into an existing app. For example, you could write just a sign-up screen in Flutter and integrate it into your Swift app. Conversely, it’s also possible to use iOS technology in your Flutter app. 

Simple and Intuitive UI and UX Design

As with any system, there is a learning curve involved, but it’s not overly complicated. Widgets in Flutter are the basic building blocks of the app's UI. They can be as simple as a button or as complex as a fully functional screen. Widgets can have child widgets, forming a hierarchical structure similar to a tree. This hierarchical design allows for efficient and modular design. Flutter also currently has built-in UI components for Material design (Android) and Cupertino (mimicking iOS). This is great not only for designers, but also helps support staff down the line. Not having to learn how two different versions of the app work makes it much easier to support the end user. Additionally, there is no visual (drag and drop) UI design tool. This may initially sound like a missing feature, but seasoned developers often prefer defining an app's UI programmatically. Writing human-readable code allows for peer review and better transparency of changes, especially in a team environment.

A Responsive and Growing Community 

Our team found some bugs in the Flutter code itself and reported it to the Flutter team on GitHub. Within a matter of hours, they had a response, and within days, a fix. Knowing that there is an active, responsive community behind this product is a major upgrade from other frameworks, where issues can linger for months or even years, often resolved with mere workarounds rather than genuine fixes.

Understanding the Downsides of Flutter

We clearly like Flutter, but do we consider it perfect? No. Here are some of the challenges we ran into. 

Facing the Learning Curve in Flutter’s Layout System

In Flutter, each widget's size and position are dictated by “constraints.” These constraints can be set by the widget itself, or inherited from its parent widget in the hierarchy. While powerful, understanding and using constraints effectively can be challenging for developers new to Flutter.

The Downside of Flutter’s New Community

Not all the developers understand Dart to the degree that they understand other programming languages, and some will sometimes try to make Dart and Flutter fit the principles of whatever language they’re most familiar with. This creates some very questionable third-party packages. Our team ran into a major security package that was untested, written in incomprehensible code, and was in fact bypassing security in several places. It's important to note that high ratings on GitHub may not always equate to quality, given Dart's limited range of options. You can assume that a similarly rated package in other communities is high quality, but you’ll need to do your due diligence with Flutter.

Google Support: A Necessary Requirement 

True, it is open source, but Google is currently paying senior level full-time developers to maintain and support it. If that were to go away, the most likely result would be that Flutter would fizzle out, and you could be left with an app that would need to be rebuilt. Based on the amount of resources that Google is currently investing, we think it’s highly unlikely that they will discontinue this product (and if they did there would be time to move off of it), but it has been known to happen.

The Challenge of Non-Native Controls

Apps that interact with other apps, such as 1Password, need to see native controls in order to function, and therefore do not work with Flutter. Workarounds are possible, such as designing the login screen in both native languages, but this isn’t a ready-to-use solution. You’ll also notice that native control updates won’t appear in your app until the framework is updated. Xamarin and React Native don’t have this issue because they are working with native controls underneath the translation layer, which allows native apps to receive all updates automatically and without extra work.

The Limitations of Native Development Tools 

Xcode and Android Studio only work to a limited degree with Flutter. Building and debugging tools may be missing if the Flutter team has not yet fully integrated them, and Play Store automated testing does not work at all.

In Conclusion: Weighing the Pros and Cons of Flutter

Depending on the needs of your business, Flutter may be the most efficient and cost-effective option for getting your mobile app built for multiple platforms. Our team has found that in most use cases, the positives greatly outweigh the negatives. As a developer, you still need to know and understand the platforms you are developing for; Flutter is not a shortcut. And for business owners who desire the highest level of user experience, seamless platform integration, and customized native features, opting for native development may be necessary. But for many apps that simply call for data input, data output, and maybe a little more, Flutter will easily serve your needs at half the price.