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.
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, 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 in the beta version
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.
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.
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.
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.
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 — 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.
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
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) 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.
LogRocket: 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.