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:
- What is Flutter?
- Widgets: The building blocks of Flutter
- What can you build with Flutter?
- What makes Flutter unique?
- Pros and cons of using Flutter
- Should you use Flutter?
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.
Though designed primarily for developing cross-platform apps, now, it’s possible to create desktop and web applications with Flutter 3.0 release.
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:
- 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 onward, you can now build the following:
- Cross-platform mobile apps for Android and iOS
- Web apps, including Progressive Web Apps (PWAs), single-page apps (SPAs), and the expansion of existing Flutter mobile apps to the web
- Desktop (Windows, Mac and Linux) apps with Flutter 3.0
What makes Flutter unique?
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.
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
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.
More great articles from LogRocket:
- Don't miss a moment with The Replay, a curated newsletter from LogRocket
- Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
- Use React's useEffect to optimize your application's performance
- Switch between multiple versions of Node
- Discover how to animate your React app with AnimXYZ
- Explore Tauri, a new framework for building binaries
- Compare NestJS vs. Express.js
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.
Faster app development
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.
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 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.
Support for web and desktop
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.
Compiles to native ARM code
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.
Smaller Dart community
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.
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).
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.
LogRocket: Full visibility into your web and mobile 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.