The Good and the Bad of Flutter App Development

Reading time: 14 minutes

“I think React Native is mature, but Flutter is the future.”

User’s comment on Reddit

Without knowing it, you’ve probably already used the apps made with Flutter. Whether you shopped on Alibaba, ran an ad campaign on Google Ads, made payments with Google Pay, or used a digital coupon, you’ve likely witnessed the results of Flutter’s still comparatively short history.

After its alpha launch in May 2017 and the official stable version release in December 2018, it didn’t take Flutter too long to gain incredible popularity, judging by the number of stars on GitHub (119k vs React Native’s 95k). And it keeps increasing, substantiating the unfading interest in the product.Interest to main mobile frameworks over time

Interest to main mobile frameworks over time, source: Google trends

In March 2021, the second generation of Flutter was released, with more upgrades and enhancements offering a better experience for developers and users alike. So, we looked under the hood to discover Flutter’s advantages and drawbacks are there behind Flutter to help you decide whether it fits the parameters of your next app.

What is Flutter?

Flutter is Google’s open source technology for creating mobile, desktop, and web apps with a single codebase. Unlike other popular solutions, Flutter is not a framework or library; it’s a complete SDK – software development kit. Let’s briefly clarify it here to make sure we’re on the same page.

A library is basically a reusable piece of code that you put in your application to perform a certain common function.

A framework is a structure that provides you with a skeleton architecture for building software. It’s a set of tools that serves as a foundation for your app, requiring you to fill in the blanks with your code to complete the entire structure and get the desired functionality.

An SDK has a much wider scope as it’s a collection of tools, including libraries, documentation, APIs, sometimes frameworks, and more, giving you all you need for software development. And that’s the case with Flutter — it already contains everything necessary to build cross-platform applications.

Other technologies such as Xamarin, React Native, Ionic, or NativeScript are also used to develop apps that work across multiple platforms. We have a detailed comparison of these cross-platform tools in a dedicated article. So what does Flutter have to offer?

Flutter SDK

Since Flutter is a full-fledged SDK, it includes a rendering engine, ready-made widgets, testing and integration APIs, etc. Let’s talk about the main components and the way it works in general.

Flutter architecture

Flutter architecture, source: Flutter.dev

The three main architectural layers are

  1. an embedder that uses a platform-specific language and makes the app run on any OS;
  2. an engine written in C/C++ that provides low-level implementation of the Flutter’s core APIs. That includes graphics (through Skia 2D graphics library), text layout, file and network I/O, accessibility support, plugin architecture, and a Dart runtime and compile toolchain; and
  3. a framework based on the Dart programming language. Its implementation is optional, but it provides a rich set of libraries that can be divided into layers: basic foundational classes, rendering layer, widget layer, and Material/Cupertino libraries.

Now, the details. First of all, the language that lies in Flutter’s foundation is Dart. It’s a client-optimized, object-oriented programming language developed by Google. Dart is capable of compiling into native code for mobile and desktop, as well as JavaScript. What’s great about it is that because of this direct compilation it doesn’t require an additional bridge to communicate with the platform as does, for example, React Native. That considerably improves the startup time and the overall app performance. We’ll talk more about it in the next sections.

Another crucial part of Flutter is its widgets. Within the Flutter SDK, they serve as building blocks that can cover almost all aspects of development. Flutter offers not only a wide range of ready-made widgets, but also allows you to customize the existing ones or create your own. Read on for more details on the Flutter widgets.

Flutter also offers an automated testing toolset, specifically, for three types of tests: unit test, widget test, and integration test. Here are Google’s tutorials for those tests. Besides, Flutter supports the Continuous Delivery model via fastlane, a free platform that bridges Flutter with such popular CI tools as Travis, Jenkins, or Cirrus (check the guide on continuous delivery with Flutter).

Debugging in Flutter is conducted with the help of Flutter DevTools (also called Dart DevTools). They are used to inspect layout, analyze performance, debug apps, etc. If you want to know more, read Flutter debug docs.

For more details on Flutter’s insides, check Flutter’s architectural overview and the FAQ section.

Flutter 2

Originally, Flutter was designed as a mobile-focused SDK for creating native Android and iOS apps with a single codebase. However, Google has been hard at work developing and refining its brainchild, and now, with their last major upgrade came the long-promised capability to build apps for virtually any platform. Here’s what the official announcement states:

With Flutter 2, you can use the same codebase to ship native apps to five operating systems: iOS, Android, Windows, macOS, and Linux; as well as web experiences targeting browsers such as Chrome, Firefox, Safari, or Edge. Flutter can even be embedded in cars, TVs, and smart home appliances, providing the most pervasive and portable experience for an ambient computing world.”

In the same report, Google boasts its collaboration with Microsoft, Toyota, and Canonical aimed at bringing Flutter to desktops, foldables, and embedded devices.

To showcase this adaptability, they built a scrapbooking Flutter Folio app that runs on multiple platforms from a single codebase. You can check the source code for Folio on GitHub.

Flutter Folio

Flutter Folio

As of today, Flutter’s web support is best for

  • building progressive web applications (PWAs),
  • creating single page applications, and
  • expanding existing Flutter mobile apps to the web.

The desktop support is still in beta, but a snapshot of the beta is available on the stable channel. So, you can now try it out, but the production-quality support should come with the next release later this year.

Some other upgrades of Flutter 2 include the beta release of Google Mobile Ads SDK for those who want to monetize Flutter apps, a Flutter Fix tool to automatically clean up deprecated APIs in your codebase, updated Firebase plugins, new widgets, new iOS features, and other smaller improvements.

Now that we explained the basics of the Flutter technology, let’s identify its strong and weak sides.

Pros of Flutter development

What’s innovative, different, and simply better executed about Flutter? Let’s review the features that will make you consider abandoning traditional tools for a newer one.

+ Ready-made and custom widgets for fast UI coding

Previously we mentioned that Flutter uses ready-made widgets. You could even say that Flutter is widgets. One of the revolutionary things about the product is how it helps create a user interface utilizing these building blocks. Compare that to other approaches that use different objects (layouts, views, controllers), when Flutter has a consistent and unified object model.

Flutter widgets

Everything is a widget in Flutter, source: ProAndroidDev

Any object in Flutter is a widget, from a button to padding or a font. Widgets can be combined to create layouts, and you can choose to use widgets on any level of customization – from existing building blocks to the lowest level when you create your own widgets with the same tools the Flutter team did theirs.

Widgets in Flutter are organized in trees, which is handy for rendering, but may result in an excessive complication of the whole structure. Large applications may require up to 10 layers of code to create a basic object, so you’ll have to plan the structure ahead.

flutter widget tree

Flutter widget tree

The fact that Flutter has its own widgets gives you one big advantage: Flutter already provides widgets that perfectly follow Android’s Material Design and Apple’s Cupertino looks. The UI customization that usually takes the longest to finish in cross-platform development takes a minimum amount of time with Flutter.

+ Dart – simple and effective language targeted at Java programmers

Dart is a modern object-oriented language that will remind you of Java or C++ with its syntax. It supports both strong and weak typing styles making it easy to pick up for beginners. Above, we mentioned that Dart is responsible for some of the crucial things about Flutter. Let’s analyze what about Dart’s nature makes Flutter… well, Flutter.

Both AOT and JIT compilation types. In development, engineers usually have to opt for the compilation their programming language provides. Programs compiled Ahead-of-Time usually run faster because they’ve been compiled before. However, in this case, the development itself slows a lot. Just-in-Time compilation results in faster development cycles, but, predictably, affects the app startup speed since the compiler does its analyzing before code execution. Flutter takes the best of both worlds by using JIT compilation during development and switching to AOT for app release.

No need for XML files. In Android development, the work is separated into layout and code. The layout should be written in XML as Views that are then referenced in the Java code. Dart takes care of that by keeping layout and code in one place. Since everything in Flutter is a widget, the layout is also created in Dart.

Better performance without a JavaScript bridge. As you already know, the app on a user’s device will run smoothly because Dart compiles into native code directly, without the bridge.

While we’re talking about Dart benefits, it’s worth mentioning that the language isn’t limited to mobile development – it’s also used for building web apps, and by Google no less. It’s commonly used in combination with web frameworks, AngularDart being Google’s own choice for some of its services.

+ The mildest learning curve and great documentation for an easy start

Given that getting used to Dart is not a massive problem to you, learning the tool itself should be easy. The Flutter team notes that they’ve seen people with very limited programming knowledge prototyping and building apps, and also mentions that no mobile development experience is required to start with Flutter.

Besides, Google is known for creating detailed and well-structured documentation, something that React Native struggles with. Apart from classic docs, you can watch video lessons from the Google team, and go through practical exercises on Codelabs. And these are just the resources provided officially. You can find hundreds of courses on Udemy and Udacity, join Facebook communities, and even a study group on Slack.

+ Flutter developers community for knowledge sharing

Considering its short history, you might assume that Flutter is lacking community support. However, for such a young technology, it’s growing rapidly. We’ve already mentioned the impressive statistics of GitHub and Google trends. The annual study by Stack Overflow showed that Flutter is the 3rd most loved and 4th most wanted framework of 2020.

Most loved frameworks-2020 by StackOverflow

Most loved frameworks 2020, source: Stack Overflow 2020 Developer Survey

A plethora of Flutter fans on Medium, Stack Overflow, Discord, Reddit, Gitter, and all the major social networks won’t leave you high and dry with any issues that may arise. Besides, Dart communities are also splentiful.

+ Google as a guarantee of long-term support

Since Flutter is backed up by Google and actually Google itself is a big user of this technology, rest assured that it will have constant support. All the bugs will be fixed immediately and the product will keep developing  far into the future.

There’s also another project Google has been working on for years now — Google Fuchsia. It’s an open source operating system based on the Zircon kernel. To make it multi-platform and ensure high performance, Google is developing Fuchsia UI and apps with Flutter. So, considering its involvement in such a massive project, we believe that Flutter is not going to be abandoned any time soon.

+ Hot reload function for instantaneous updates

The hot reload tool is already engraved into Flutter’s architecture and doesn’t require any plugins to work. Hot reloading basically allows you to see updates in real time. Imagine you’ve encountered an error while running a program. In Flutter, you can fix it right away, continuing from where you left off, without restarting the whole thing. Going back to regular programming where deployment takes several minutes may be a struggle. Hot reload elevates programmers’ productivity, helps with quick iterations, and allows you to experiment without long delays.

Changing app UI with Hot Reload

Changing app UI with Hot Reload, source: BuildFlutter

React Native has a similar feature called Fast Refresh and Xamarin offers XAML Hot Reload.

As for the newly introduced web development with Flutter, hot reload is not available. Instead, it’s replaced by hot restart, which has similar function, except hot reload remembers your state and hot restart does not.

+ High performance

A lot of factors go into assessing an app’s performance: central processing unit (CPU) usage, number of requests per second, average response time, number of frames per second, and more. The Flutter team promises a constant 60fps (or 120 fps performance on devices capable of 120Hz updates), which is the rate at which modern screens display a smooth picture.

We’ve already explained that the speed of Flutter’s apps is higher due to direct code compilation without any bridges that slow down performance.

To assess how well Flutter pulls through, see this research comparing Flutter, Xamarin, and React Native performance. Spoiler alert: Flutter came in first with 58fps and a 220-millisecond launch time. Xamarin launched in 345 ms with 53fps and React Native came second with 57fps and 229 ms.

Other comparisons were also made, with slightly differing results. According to thoughtbot, Flutter almost matched native app CPU usage, but used 50 percent more memory than React Native, while a recent performance study by inVerita showed Flutter’s close to native performance with React Native having the worst results.

+ Portability

With the aforementioned release of Flutter 2, Flutter completed its transformation from mobile-focused to portable and platform-agnostic. Due to Dart’s portability and compilation capabilities, the same codebase can be deployed across five main operating systems: iOS, Android, Linux, macOS, and Windows. Moreover, Google is working on expanding Flutter’s embedding potential to cover cars, TVs, smart home appliances, foldable devices, and so on.

As an example, admire the amazingly beautiful results of the competition held by Google and Lenovo to design a dynamical clock face, check the educational iRobot Coding App built with Flutter, or watch a video about what’s new in Flutter where Daniel Hall, Chief Engineer at Toyota, announces using Flutter for building next-gen infotainment systems for their vehicles.

The March 2021 Flutter Engage event results

+ Internationalization and accessibility

Being an advocate for diversity and inclusivity, Google provides built-in opportunities to make your apps accessible to a wider range of users. Usually, when you want your app to run in different languages and be used in different regions, you need to prepare your code so it’s ready for localized content which is typically created later. This process is called internationalization.

Flutter natively provides widgets based on the Dart intl package that simplifies this process. Today it supports 78 languages, as well as currencies, units of measure, dates, layout options (for languages written from right to left), and more. Here’s a detailed guide on internationalizing your Flutter apps.

Flutter also ensures web accessibility and supports these three components:

  • Large fonts – adjusts font sizes to the ones a user specified in OS settings,
  • Screen readers – provides spoken feedback on UI elements, and
  • Sufficient contrast – makes text easier to read.

While all this is automated, developers should also test their designs for different settings. For instance, they can use the largest font setting to see how it fits in a small mobile screen. To know more, go to Flutter’s accessibility (a11y) documentation.

Standard vs the largest possible font settings in FlutterStandard vs the largest possible font settings

Cons of Flutter development

Any technology has its weaknesses, especially in the beginning of its existence. Immaturity alone and uncertainty about how things are going to develop with the new product can scare off potential pioneers.

However, as we kept following Flutter’s evolution, we saw a steady growth with a lot of initial issues addressed. For example, the early doubts about Flutter’s implementation for iOS are no longer an issue due to constantly updated Cupertino widgets. Also, its reliability and efficiency have already  been time-tested by such giants as Alibaba and Google Ads with millions of downloads and daily users.

So, what are Flutter’s drawbacks?

– Lack of third-party libraries

Third-party libraries and packages play a big part in automating software development for programmers and relieving the need to code everything from scratch. These libraries are mostly open source, easily available, and pre-tested – who wouldn’t want to try a tool that’s been used and tested in different environments before?

For many older and more popular technologies, finding the needed package is not a big problem, while for newer ones it’s often an issue. However, as of today, there are 15k+ packages on Flutter’s official resource and the number keeps growing. Of course, it’s less than for its main competitor, React Native, but  it’s more than sufficient. Plus, as we said, there are lots of pre-set widgets in Flutter out of the box that allow for covering most of the development cycle without any additional third-party tools.

– Dart, again

You may have seen in our comparison of Flutter vs Xamarin, that we mentioned Dart both in positive and negative lights. That’s because Dart is a great language by itself – its paradigm should be familiar to most programmers, it’s fast and object-oriented. But it often loses in comparison to other technologies, especially giants such as JavaScript, C#, or native Objective-C and Java. Not many beginning developers will pick up Dart on their journey so finding new people for your mobile team can be a challenge. This should be something to consider when you’re choosing a cross-platform approach.

– Larger app size

Developers go to great lengths to minimize the size of an app. Users have limited storage on their phones, so it’s much more preferable to release an app that won’t make them delete it in favor of precious photos or a music library. To decrease the program size, programmers tend to avoid animations, bring the number of libraries and packages to a minimum, or compress images.

Since it has the built-in widgets instead of using platform widgets, Flutter’s apps minimum size is over 4MB, which is definitely bigger than native Java (539KB) and Kotlin (550KB) apps – and that’s for the bare minimum app. Although, to be fair, its competitors share the same problem, and probably even more so – the release version in Xamarin will take almost 16MB and 7MB in React Native.

How to get started with Flutter

So, we’ve reviewed Flutter’s main features, dropped in some comparison with other products, and hopefully helped you form your own opinion about the technology. Now, how do you get started with Flutter?

Check your system requirements. Windows users must have PowerShell 5.0 and Git for Windows pre-installed. Mac OS developers need a 64-bit version with Xcode 9.0 or newer installed while Linux users are only advised to have a few command-line tools in their development environment.

Download Flutter SDK. Choose your OS and follow the instructions. All operating systems support development both for iOS and Android, but you will also require a platform-specific editor. For web development you’ll need a Chrome browser. Dart comes pre-installed with Flutter.

Install an editor. You can use any IDE with Flutter command lines, but Google recommends using their plugins for officially supported editors: Android Studio, IntelliJ, and Visual Studio.

Also, you may find following links useful:

Learn about Material Design docs for Flutter

Check out the curated list of resources

Explore Flutter apps in a showcase

Review the gallery of Flutter widgets

Will Flutter replace React Native and Xamarin?

Short answer: No.

Long answer: Considering Flutter’s skyrocketing surge in just a few years and Google’s continuous support, Flutter is definitely here to stay. More and more developers get seduced by its capabilities, performance, and ease of use, give it try, and become avid fans.

We never aim to promote Flutter or any other technology and we always objectively list both pros and cons. However, in the case of Flutter, we’re sure that it’s a decent competitor to the older and more mature frameworks and that the market share of Flutter mobile apps — and now also web and desktop solutions — will keep growing.

Hopefully, this article answered most of your Flutter questions. Let us know what new technology you’d like to read about next in our series The Good and the Bad.

This post is a part of our “The Good and the Bad” series. For more information about the pros and cons of the most popular technologies, see our other articles:

The Good and the Bad of React Development

The Good and the Bad of Selenium Test Automation Software

The Good and the Bad of Xamarin Mobile Development

The Good and the Bad of .NET Framework Programming

The Good and the Bad of Angular Development

The Good and the Bad of Node.js Web App Development

The Good and the Bad of TypeScript

The Good and the Bad of Vue.js Framework Programming

The Good and the Bad of Swift Programming Language

The Good and the Bad of Ionic Mobile Development

The Good and the Bad of Android App Development

5 Comments

Comments

avatar
Sort by: newest | oldest | most voted
Honey Umraniya
Aug 17, 2021

Great stuff! Specially, the images of flutter framework explanation and the closing topic i.e. will flutter replace react and Xamarin? Who is looking for the knowledge regarding the flutter has to go through this blog once.

Softwareistic
Sep 22, 2021
Softwareistic

Great blog about flutter app development. This is surely a great help in improving our flutter app development services.

Josephine baker
Sep 3, 2021

Thanks for sharing ! Flutter app development pros and cons.

Jake Clarke
Aug 31, 2021

Nice article. Flutter is great for the front end development of all the points you discussed in the article.

eBizneeds
Jul 8, 2021

Good article! I found some useful information in your blog, it was awesome to read.