Charles Freeborn Cloud | JavaScript | Python | Technical Writer | Lead GDG Warri & Developer Circles Warri |

Pros and cons of Flutter app development

5 min read 1550

Flutter App Development Pros Cons

If you’re an experienced mobile app developer, you’ve already made your decision to build apps for either Android or iOS devices. If you’re a beginner, you might still be considering which is your preferred platform. These decisions determine which technologies you should learn on your path to becoming a mobile or cross-platform app developer.

No matter where your app development journey takes you, Flutter is a solid choice. In this guide, we’ll introduce you to Flutter, outline the pros and cons of using Flutter, and explore what you can build with this open-source software development kit.

We’ll cover the following:

What is Flutter?

Flutter is an open-source UI toolkit developed by Google for building beautiful native user interfaces, UIs from a single codebase. In other words, apps built with Flutter can run on Android, iOS, and the web.

The Flutter framework is built with Dart. Dart is a modern object-oriented programming language. It is easy to pick up with your knowledge of any other programming language like JavaScript.

Though designed primarily for developing cross-platform apps, at the time of writing, Flutter can be used to build for the web and desktop (currently in the beta with the release of Flutter 2.0).

Widgets: The building blocks of Flutter

You can’t talk about Flutter without mentioning widgets. Widgets are the core building blocks of any Flutter app.

Basically, a widget is a description of a part of a user interface. Widgets are analogous to components in React.

You can build your UIs in Flutter by taking advantage of the customizable widgets. Widgets can have properties such as background, height, etc.

There are two types of widgets in Flutter:

We made a custom demo for .
No really. Click here to check it out.

  • Stateless widgets are immutable, meaning their properties, such as background and height, cannot change once a widget has been created
  • Stateful widgets are mutable, meaning they can change. This creates room for user interactivity. You can use stateful widgets to save state and responses to user interactions

What can you build with Flutter?

With the release of Flutter 2.0, you can now build the following:

  1. Cross-platform mobile apps for Android and iOS
  2. Web apps, including Progressive Web Apps (PWAs), single-page apps (SPAs), and the expansion of existing Flutter mobile apps to the web
  3. Desktop (Windows, Mac and Linux) apps in the beta version

What makes Flutter unique?

If you’ve ever built a mobile app using a cross-platform framework such as React Native or Xamarin, your code will go through a bridge or switch that compiles the code into a webview via JavaScript before it’s rendered on the device. Flutter, on the other hand, renders apps natively instead of letting the platform do so. All Flutter needs is a canvas to render widgets on the screen and access events such as tap and services such as the camera on the device.

Flutter targets the ARM of the device by compiling the code into native ARM code through Dart’s support for just-in-time and ahead-of-time compilation. This leads to greater consistency and makes Flutter apps extremely fast and responsive.

Pros and cons of using Flutter

Now let’s break down the pros and cons of using Flutter for cross-platform app development.

Pros

Below are some reasons why Flutter is quickly gaining popularity among other cross-platform frameworks such as React Native, Xamarin, and NativeScript.

One codebase to run anywhere

Arguably Flutter’s biggest draw is the concept of write once, run anywhere. You don’t have to worry about maintaining consistency across Android, iOS, and the web. A single codebase handles it all, leading to faster build time, saving resources, and simplifying maintenance of the code.

Stateful hot reload

Stateful hot reload leads to high developer velocity. Flutter offers an instant UI update when changes are made to the code. This is possible thanks to the just-in-time compiler.

Community support

At the time of writing, Flutter has surpassed React Native in terms of GitHub stars. This suggests that more developers are embracing Flutter over React Native.

In addition, the number of questions asked in 2020 about Flutter on Stackoverflow surpassed the number of questions asked on React Native. This implies that more developers are eager to learn more about Flutter.

Open-source

Flutter is an open-source framework, meaning you can access the original codebase used to develop it. As such, you can make contributions, file issues and help the Flutter community. Some of the greatest advances in software development have been made thanks to the open source community.

Customizable widgets

Almost everything in Flutter — from the layout, to colors, to text, to buttons — is essentially a widget, like components in React. Thus, Flutter comes with a wide array of customizable widgets.

You only need to know Dart

Dart is a client-optimized language for developing apps on any platform. The Flutter framework is built in Dart, so if you’re looking to build apps using Flutter, you only need to know Dart.

Here’s why Dart is amazing: it’s terse, strongly typed, object-oriented programming language that offers sound null safety, meaning values can’t be null unless you say so.

The Dart language supports just-in-time (JIT) and ahead-of-time (AOT) compilation. JIT facilitates hot reloads — as the app code is compiled while running immediately, a change is made. AOT compilation handles the compilation of code to the native ARM machine code, which makes Flutter extremely fast.

Support for web and desktop

Flutter 2.0 now has a stable support for the web and beta for desktop. Flutter developers can now build not just for mobile, but also the web with a single codebase. Support for the web is a big win because it gives you access to a wider reach of end users.

Compiles to native ARM code

Unlike other cross-platform mobile development frameworks such as Reactive Native and Xamarin, Flutter compiles its code to the native ARM machine code, which contributes to excellent performance.

Flutter DevTools

Flutter DevTools — including hot reload, code formatter, widget inspector, etc. — help you to develop and debug more efficiently. With the widget inspector, you can navigate between pixels on the device, the widget tree, and the line of code that created the widget.

Cons

Compared to the benefits of using Flutter for cross-platform app development, there aren’t many disadvantages. However, when deciding which framework is best for your project, it’s worth considering the relative immaturity of the framework and the limitations associated with that newness.

Below are some potential drawbacks you should consider.

Emerging framework

Though it’s gaining steam among the cross-platform developer community, Flutter is still an emerging framework. This means there are limited learning resources and a relatively small number of plugins and packages.

For some basic tutorials and information to help you get started using Flutter, check out our Flutter archive.

Dearth of plugins/packages

Compared to React Native, Flutter has a limited number of plugins and packages. This is to be expected for a framework that’s relatively new; the first stable version of Flutter was released on 4 December 2018.

The impact of this limitation should be lessened over time as the community builds more plugins and packages for Flutter.

Limited number of developers using Dart

Compared to JavaScript, there is a relatively small community of developers writing in Dart, the programming language used for building Flutter apps. That means, like the Flutter framework itself, there are limited resources designed to help you learn Dart.

Should you use Flutter?

Given its one-codebase-for-all-platforms approach, I believe Flutter will play a major role in the advancement of app development for all supported platforms. For this reason, if you haven’t already, I recommend learning how to develop cross-platform apps with Flutter.

Knowing how to use Flutter enables you to wear multiple hats, acting as both a mobile and web developer, by creating a single codebase that compiles to native machine code and treats the device as a platform.

What’s more, Flutter takes a lot of inspiration from React and the web in that apps built with Flutter can adapt to any platform. This is similar to responsive/adaptive web design.

Summary and key takeaways

The Flutter team’s stated mission is to “fundamentally shift how developers think about building apps, starting not with the platform you are targeting but rather the experience you want to create.”

Flutter has evolved beyond being a toolkit for building cross-platform apps into a portable framework for building for various platforms, including Android, iOS, web, and desktop (Windows, Mac, Linux) for beta.

Flutter is fast because it compiles your code to machine code. With stateful hot reload, developer productivity increases, and now support for the web and desktop, Flutter gives developers the leverage they need to create beautiful experiences.

Finally, you don’t need to worry about how your app’s UI will appear on Android, iOS, or the web; Flutter helps you maintain consistency by using a single codebase. Flutter was created to allow developers to build beautiful UIs for all devices.

To learn more, check out the official docs. If you already have experience building mobile apps, here’s a crash course on adding Flutter to your existing app.

: Full visibility into your web apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

.
Charles Freeborn Cloud | JavaScript | Python | Technical Writer | Lead GDG Warri & Developer Circles Warri |

3 Replies to “Pros and cons of Flutter app development”

  1. Nice write up. I recently published a Flutter app and can attest Flutter’s ease of development and performance. I was skeptical about Flutter’s/Dart’s performance in particular because my app needed to process millions of data points. Flutter/Dart handles it well as long as this kind of heavy processing is pushed off the UI thread to an Isolate. Below is a video that shows off some of the app’s features.

    https://youtu.be/TXiwzf-UJhQ

  2. Thank you for this blog post. However, I would disagree with two arguments:

    1. Xamarin or React Native do not use a WebView. React Native uses a Javascript bridge to transpile React Native components to platform-specific components. And Xamarin does the same with Xamarin.Forms components but they use C# not Javascript. So there is no real big ,,performance advantage” compared to React Native and Xamarin.
    2. You can find more than 16000 packages for Dart and/or Flutter on pub.dev. More than 4000 packages have been made for Flutter.

Leave a Reply