Editor’s note: This post was updated on 19 September 2022 to include information about Flutter 3.0 and its increased accessibility through organized documentation and faster app development.
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:
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, now, it’s possible to create desktop and web applications with Flutter 3.0 release.
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:
With the release of Flutter 2.0 onward, you can now build the following:
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.
Now let’s break down the pros and cons of using Flutter for cross-platform app development.
Below are some reasons why Flutter is quickly gaining popularity among other cross-platform frameworks such as React Native, Xamarin, and NativeScript.
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 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.
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 Stack Overflow surpassed the number of questions asked on React Native. This implies that more developers are eager to learn more about Flutter.
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.
Cross-platform apps are made much easier with Flutter. Built-in widgets facilitate quicker app development, testing, and issue fixing. Flutter is helpful for fast prototyping and developing an MVP.
Flutter is known for its excellent documentation, Flutter documentation is organized and well formatted, making it simple to understand, and helpful for a developer to build Flutter apps.
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.
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 a 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.
Flutter 3.0 has stable support for the web and 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. Flutter now supports all desktop platforms, including Linux and macOS, with the release of version 3.0 for the desktop application.
With the release of Flutter 3.0, it now offers accessibility features for the desktop versions of Windows, macOS, and Linux, including a screen recorder, sufficient contrast, and bigger font sizes.
Unlike other cross-platform mobile development frameworks such as React Native and Xamarin, Flutter compiles its code to the native ARM machine code, which contributes to excellent performance.
With the introduction of Flutter 3.0, macOS desktop apps are now created as universal binaries for Macs with Intel and Latest Apple Silicon processors.
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.
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.
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.
Flutter takes some time to provide new capabilities as they are added to the iOS and Android platform native SDK.
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. As of right now, there are more than 26K packages available to facilitate the creation of Flutter apps, and the number is continuously growing.
Flutter leverages built-in widgets rather than platform widgets, and the resulting app is typically larger in size. Larger applications take longer to download and take up more space on a smartphone.
But the use of specific libraries and packages, asset compression, and the removal of unused resources can all help to reduce the size of the Flutter app.
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.
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.
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).
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.
Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not
server-side
Learn more →
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
// Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
Let’s see how SolidJS props work to promote component reusability, exploring basic to advanced concepts for a complete understanding.
We evaluate Eleventy and Next.js and compare both static site generators in terms of performance, developer experience, scalability, and ecosystem.
We show how to use Goxgen to scaffold a full-stack React app. See how to integrate React with Go and modify Goxygen to suit your project requirements.
Express.js is a Node.js framework for creating maintainable and fast backend web applications in JavaScript. In the fast-paced world of […]
4 Replies to "Pros and cons of Flutter app development"
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
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.
Thanks
Thanks for sharing such an amazing information i hope you keep on sharing such interesting and informative articles