Google’s hybrid mobile app development platform, Flutter, debuted in late 2018. Though a recent addition to the hybrid framework scene, its innovative approach has rapidly made it a developer favorite.

This article delves into Flutter’s merits based on my personal experience, highlighting why I believe it represents the future of hybrid mobile app development.

Despite the availability of established hybrid app frameworks, a growing number of prominent companies are opting for Flutter. While the Flutter showcase page offers an extensive list, here are some noteworthy examples utilizing Flutter for either the entire app or a key feature:

• Google Ads app
• GrabFood’s GrabMerchant app
• Alibaba Group’s Xianyu app, boasting over 50 million downloads
• Nubank
• eBay Motors app

Flutter, while highly capable, is still relatively new. For a balanced perspective, I’ll also address some limitations to consider before committing to Flutter for cross-platform development.

This article aims to provide a comprehensive overview of Flutter’s pros and cons, equipping you to determine its suitability for your next mobile application project.

Flutter’s Strengths: A Developer’s Viewpoint

As a developer, this perspective resonates most strongly with me, allowing me to offer the most insightful commentary.

Swift Learning Curve

One of Flutter’s initial attractions for developers is its ease of entry. Within just 30 minutes, you can complete the installation process and set up a functional development environment. From there, you’re ready to [build your first Flutter app.

Seamless Editor Integration

Flutter boasts exceptional editor integration. My preference leans towards Android Studio, but instructions available are available for IntelliJ, VSCode, and Emacs.

Streamlined Development Experience

Compared to my prior experiences with hybrid app frameworks, Flutter offers a more refined development process. For instance, when using WebViews to render lists exceeding 100 elements, I encountered high CPU usage, particularly during scrolling. This was mitigated by implementing Ionic framework elements designed specifically for such scenarios. In contrast, Flutter employs a standardized method for list display – the highly performant ListView – which works seamlessly out of the box.

Instantaneous Live Reload

The live reload functionality came as a welcome surprise. My background as a full-stack developer had accustomed me to frameworks like BrowserWatch, which provide live reload in the browser.

Native development lacks this feature (although Apple’s SwiftUI seems to be bridging this gap for iOS). Typically, Android and iOS developers must write code, wait for compilation, and then load it onto the device or simulator to observe changes.

Similar to React Native, Flutter introduces a live reload mechanism, instantly refreshing the app code on the device upon saving. This real-time feedback significantly accelerates development.

Performance Prowess

Application performance is another area where Flutter steadily emerging as a winner.

As an actively developed framework, Flutter presents numerous opportunities for performance optimization. This is evident in releases like Flutter 1.17, which enhanced rendering performance by up to 50% on newer iOS devices and reduced memory consumption by up to 70% for specific workloads.

Cross-Platform Uniformity

A standout feature of Flutter is its ability to deliver genuinely consistent UIs across both iOS and Android. By leveraging its own rendering engine (more on that later), Flutter ensures pixel-perfect UI replication on both platforms. This liberates developers from grappling with platform-specific styling intricacies, guaranteeing design fidelity as an inherent framework feature.

Language, Tooling, and Extensibility

Three additional noteworthy aspects, though smaller in scope, are:

• Dart, the language underpinning Flutter app development, is remarkably approachable. However, it’s also a robust language initially conceived by Google as a JavaScript successor. Developers familiar with JavaScript or other C-like languages can readily grasp Dart within a day or two.
• The default toolchain includes a powerful plugin manager (pub), accompanied by a vast plugin library accessible through the pub.dev plugin repository.
• Creating plugins to leverage native platform capabilities is straightforward, so even if a plugin doesn’t exist for a specific feature, creating one is relatively painless.

Flutter’s Business Benefits

For most businesses, the primary advantage of Flutter lies in consolidating iOS and Android development under a single team. However, a more crucial, often overlooked, benefit is accelerated time-to-market. By capitalizing on the Flutter development advantages outlined earlier, a leaner development team can swiftly deliver a polished, performant application offering a unified user experience across platforms.

Flutter empowers developers to craft visually stunning user interfaces. Consider a recent challenge, a collaborative effort by Google and Lenovo challenging developers to create an aesthetically pleasing clock face UI for the Lenovo Smart Clock. The winning entry, Particle Clock by Mickel Andersson, not only exudes elegance but also exemplifies Flutter’s animation prowess.

Businesses hesitant about fully embracing Flutter can adopt it incrementally. Existing mobile apps can integrate Flutter one component at a time. In fact, many large companies initiate their Flutter journey by building a small portion of their app using Flutter and gradually replacing other parts as they witness its benefits.

Considerations Before Embracing Flutter

To be fair, Flutter’s relative youth means it hasn’t undergone the same rigorous real-world testing as more established frameworks like React Native, whose reach extends to mobile giants like Facebook, Instagram, Skype, and Discord.

Currently, the answer to “Should I use Flutter?” is a qualified yes. Project managers must carefully evaluate required advanced features and ensure their availability in Flutter before committing. In particular, it’s crucial to assess the libraries and plugins needed for a specific application. As a newer entrant, Flutter’s library and plugin ecosystem hasn’t reached the breadth of React Native’s.

For example, camera support in Flutter is still under development, with zooming and flash control absent from the official camera plugin. Fortunately, I found a third-party plugin when I needed to incorporate photo/video functionality into an app.

Another potentially absent plugin is Google Maps. While a plugin exists for integrating Google Maps into Flutter code, it utilizes features (platform views) currently in developer preview.

One final, albeit niche, limitation: Flutter doesn’t currently support 3D capabilities, focusing solely on 2D. However, this shouldn’t be a deal-breaker for most applications.

Insights from My Flutter Journey

Over the past two years, I’ve launched three Flutter apps, gaining valuable experience along the way. Here are some lessons I wish I had known earlier, hopefully benefiting your own Flutter development endeavors.

Flutter is deceptively easy to get started with. I began with an excellent course on App Brewery. However, after a few modules, I prematurely assumed proficiency and jumped into building my first app.

This impatience led me to skip crucial modules, forcing me to learn their lessons through trial and error. Specifically, my initial Flutter app development experience would have been smoother had I grasped a few best practices:

• Modularizing and structuring Flutter app code.
• Understanding state management.
• Implementing user authentication and tracking its status across different app pages.
• Integrating notifications using the Firebase Messaging package.

While I eventually learned these concepts, it came at the cost of numerous mistakes and significant code rewrites in my first app. My second Flutter app benefited from these lessons, resulting in a faster, more efficient development process.

Abundant resources are readily available through a simple Google search, offering guidance on the concepts mentioned above. The Learn More page on the Flutter website serves as an excellent starting point.

Another observation: due to Flutter’s relative novelty, there’s no single “winning” app architecture pattern. My background, primarily rooted in Django development, ingrained in me the MVC pattern’s dominance in Django apps. Similarly, iOS has MVVM, and Android has its own architectural guidelines.

Flutter lacks such a dominant architectural pattern. This initially presented a challenge, but after developing multiple Flutter apps, I believe it’s best to simply choose an architecture and adhere to it consistently.

Personally, I favor the provider package as both a dependency injection and change management framework. My Flutter apps generally follow a three-tiered structure:

1. Views: Widgets composing the application’s UI, including screens. I inject services and models using the Consumer widget from the Provider package, enabling UI construction based on available data. The Consumer widget also triggers view rebuilds upon state changes, ensuring responsiveness.
2. Models: Plain old objects used to represent structured data.
3. Services/Controllers: Houses the majority of the business logic. API interfaces reside here, responsible for data exchange with the API. These interfaces utilize models for data transfer.

The bloc library presents a viable alternative to the provider package. It adopts a slightly different architecture, employing streams of events and states to connect views and models.

While potentially more complex than provider, BLoC’s strengths shine in intricate applications requiring data manipulation from multiple sources and multi-point response to these changes.

If neither BLoC nor provider aligns with your needs, establishing a consistent method of managing state throughout your application is crucial, especially for notification handling.

Flutter vs. Other Hybrid Frameworks

Flutter vs. React Native

React Native currently reigns supreme as the most prevalent and successful hybrid mobile application framework, and for good reason. It extended the reach of the popular and well-designed React framework, enabling millions of front-end developers to build mobile applications. I firmly believe that many of today’s remarkable mobile apps wouldn’t exist had developers been forced to learn native iOS and Android SDKs.

However, how does Flutter’s popularity compare, and can it potentially dethrone React Native? I confidently assert that Flutter will ultimately emerge as the dominant hybrid mobile app framework. Here’s why.

React Native components, described in JavaScript, are translated into native controls. While this provides a native UI feel on both iOS and Android, it also means developers seeking a consistent cross-platform UI must invest significant effort in styling native components or resorting to different components altogether.

Flutter, in contrast, provides its own widget library across all supported platforms. This eliminates translation, as Flutter doesn’t rely on native controls for UI rendering. Instead, it utilizes its own set of controls. While Flutter’s widget library offers widgets mimicking native controls, their use is entirely optional.

This approach has its trade-offs. The primary advantage is a truly unified app experience across platforms. However, this comes at a cost.

By employing its own widgets, Flutter sacrifices access to the vast library of custom control libraries readily available for React Native. Wrapping existing native controls for use in React Native is relatively straightforward. This also explains the current lack of a stable Google Maps implementation for Flutter.

However, the ability to embed native controls is actively being developed and is currently in developer preview. Once released, this will address a significant functionality gap compared to React Native.

Ironically, this same Flutter characteristic – utilizing its own widgets – also offers a significant advantage when creating entirely new components. In React Native, this would necessitate building a platform-native component and integrating it through bindings.

Flutter, on the other hand, allows for custom component creation directly within the Dart codebase. Widgets like CustomPainter provide complete UI control, enabling you to draw anything necessary. Additionally, a library of widgets facilitates custom animation implementation, all without leaving the Dart codebase.

This, I believe, is one of Flutter’s most compelling strengths. It grants complete UI control within the Dart code, freeing developers from the burden of mastering platform-specific native SDKs.

Flutter vs. Apache Cordova

Apache Cordova is less a framework and more a browser wrapper. Cordova leverages web technologies (HTML, CSS, and JavaScript) for app development. It enables running these web apps on mobile platforms and exposes native platform APIs through JavaScript, facilitating platform interaction.

Cordova boasts numerous frameworks built upon it, one notable example being the Ionic framework. It offers a suite of UI components visually and functionally similar to their native counterparts, implemented using HTML/CSS/JavaScript.

Cordova and Ionic offer a pleasant development experience, particularly for web developers. Leveraging web technologies grants access to the entire web ecosystem, including countless HTML/CSS/JavaScript-based components and libraries. This translates to readily available “widgets.”

However, this advantage can also be a drawback. Using web technologies demands meticulous attention to detail to ensure the app emulates a native mobile experience rather than a mere scaled-down website.

While Cordova excels for MVP development and early app iterations, my first Flutter app was actually a port of an Ionic app. The performance gains, particularly in content-heavy, scrollable views, were immediately apparent.

Flutter vs. Xamarin

Lacking personal experience with Xamarin, I can’t offer a direct comparison. However, I encountered a great article during my research that provides a balanced assessment.

While the article concludes in a tie between Flutter and Xamarin, I believe that based on the highlighted strengths, Flutter would be my preferred choice.

Demystifying Flutter: A Technical Glimpse

Flutter: The “Game Engine” of Hybrid App Development

Flutter stands out among hybrid frameworks with its unique approach. Instead of relying on native UI rendering or web views, it employs its own rendering engine, akin to game engines generating entire UIs independently of native controls.

Flutter leverages the robust, extensively tested Skia graphics engine for rendering every element within a mobile app. Using Skia brings two primary benefits to mind, though I’m certain the Google engineers behind Flutter had a more extensive list:

1. Platform-agnostic UI consistency without customization.
2. Near-native performance due to the absence of an intermediary layer translating code into native platform code for widget rendering.

The “Everything Is a Widget” Paradigm

Flutter’s documentation often describes it as a “React-style framework.” This is evident in its approach of composing smaller widgets (akin to React’s “components”) to build apps.

However, Flutter takes the everything is a widget philosophy a step further than any other framework I’ve encountered.

Consider padding as an example. In most frameworks, padding is a UI element attribute. In Flutter, Padding itself is a widget capable of wrapping other widgets, adding padding around its child.

More uniquely, the InheritedWidget lacks a visual representation and user interaction. Its sole purpose is to inject information into the widget tree, making it retrievable at any point down the tree.

For instance, the MaterialApp widget, representing the root of your application, can inject an authentication service into the widget tree using an InheritedWidget. This service can then be accessed and utilized from any other page, such as the user profile page.

While this everything is a widget approach takes some acclimatization, it becomes a powerful tool for building application functionality.

The Flutter-Dart Synergy: Unveiling the Source

Flutter and Dart are inextricably linked. While the core rendering engine is written in C/C++, it constitutes a small fraction of Flutter’s codebase.

The majority of Flutter is written in Dart, driven by several excellent reasons. However, the most significant benefit for me was the ability to easily inspect the framework’s source code, including its various widgets, and learn from it.

This advantage is often underestimated. I encourage developers to seek answers within the code of their frameworks and libraries. Not only does this deepen their understanding, but it also exposes them to well-engineered, high-quality code – a surefire path to growth.

Bridging the Gap: Native Platform Interoperability

While Flutter handles UI and business logic is managed through pure Dart packages, accessing native platform capabilities like geolocation and camera control is most easily achieved through third-party packages from pub.dev.

However, if a required functionality lacks an existing package, writing one yourself is relatively straightforward. While I haven’t personally built any platform-native packages, I have explored the source code of many out of curiosity.

Despite my lack of native app development expertise, I could grasp the native components of these plugins and their connection to the Dart runtime through message passing. Experienced native platform developers will find it seamless to create new packages leveraging native capabilities.

Embracing Flutter: The Verdict

This article aimed to equip you with sufficient information to determine if Flutter aligns with your cross-platform development needs. I’ve strived to present a balanced view, encompassing both its strengths and limitations.

While the ultimate decision rests with you, I can offer some parting guidance based on my own approach to evaluating Flutter for mobile app development. If Flutter’s capabilities fulfill the app’s requirements, I wouldn’t hesitate to choose it.

This stems from the fact that, aside from a few areas requiring further development, Flutter excels in every aspect I’ve come to appreciate and rely on while developing and launching five different Flutter applications over the past year:

• Effortless initiation
• Accelerated development speed stemming from a framework designed for rapid development from the ground up
• A vibrant ecosystem of readily available Dart libraries and third-party packages
• Flutter’s unique, yet highly productive, everything is a widget development paradigm

Mobile app development service providers would be remiss not to seriously consider Flutter.

In closing, I’d like to highlight one final Flutter advantage: its exceptional documentation, arguably among the best I’ve encountered in any library or framework. Rarely do I resort to Google for Flutter-related queries without finding an answer on Flutter’s own site.

As a Google Cloud Partner, Toptal provides on-demand access to its network of Google-certified experts for companies undertaking mission-critical projects.