Flutter vs React Native - Which is best in 2021?
If you want to build a cross-platform mobile app in 2021 your two best choices are Flutter and React Native.
Both frameworks have risen in popularity and promise fast development, near-native performance, and a smooth UI - all from one codebase. But how do they differ? And which framework is the best one to pick in 2021? Read on to find out.
I will first give a short introduction to both frameworks. Then I will walk you through direct comparisons between React Native and Flutter. By the end of this guide, you will have a solid understanding which cross-platform framework to pick for your next project.
What is Flutter?
Flutter is a cross-platform app development framework. Flutter allows you to develop apps for iOS, Android, macOS, Windows, and the web with just one codebase.
Who created Flutter?
Flutter was created by Google in 2018. However, Flutter is an open-source project that is maintained by a diverse community of developers and other companies.
What popular apps are made with Flutter?
Quite a few companies have built large apps with Flutter - despite being such a young framework.
Google is using Flutter in a variety of applications such as Google Assistant, Google Ads, and even the large gaming application Stadia.
But other companies have also adopted the framework and had big success with it. Chinese tech giants such as Alibaba, Tencent, Baidu, and ByteDance (creator of the TikTok app) have adopted Flutter for at least some of their applications.
BMW, eBay, Philips, Sonos, and Groupon have used Flutter in a variety of mobile apps as well. Many of them report faster development speed and great performance.
One of my favorite examples of a great Flutter app is the diary app Reflectly. It uses a variety of custom interfaces and animations that show you what is possible with Flutter. The developers of the Reflectly app have even written up an article on why they switched from React Native to Flutter.
All of the above examples have used Flutter for mobile applications. Desktop and web support is a recent addition to Flutter and thus not broadly used yet.
You can find an updated list of apps using Flutter on the Flutter showcase site.
What is React Native?
Who created React Native?
Facebook created React Native back in 2015. The company was trying to find a way to share part of its development efforts across the two major mobile platforms.
Today, Facebook is still active in maintaining and further developing the framework. However, React Native is also open-sourced and has a large community of developers and companies contributing.
What popular apps are made with React Native.
Naturally, a lot of the Facebook mobile apps are made at least in part with React Native. If you have used Facebook, Messenger, or Instagram before you have experienced React Native in action.
Many other popular apps from other companies started using React Native. Wix, Shopify, Discord Tesla, and Uber Eats are all using React Native in some of their mobile applications.
The Shop app by Shopify is one of the most recent examples of a widely loved and well-implemented React Native application.
Flutter vs React Native: Programming Language
undefined? A whole class of bugs simply disappears.
Which framework should you learn if you are a developer looking for jobs? Currently, there are more jobs available for React Native. You will also learn ReactJS for the web which has plenty of jobs on the market. There are fewer jobs available for Flutter, but the demand seems to grow fast:
Is it me or there's a sudden spike in job offers for #Flutter?— Remi Rousselet (@remi_rousselet) April 22, 2021
And I'm not talking about those offers that just say "knowledge in React Native/Flutter is a plus".
I'm talking about proper Flutter jobs
Dart has one trump card though which makes it a great fit for developing cross-platform apps. This is what we will look at next.
Flutter vs React Native: Performance and User Experience
To truly understand how Flutter and React Native differ in their performance and experience for the user, we need to take a closer at how they work.
Let’s start with React Native.
The team around React Native has spent much time optimizing the performance of the Bridge, but fundamentally it remains a bottleneck. This is why some React Native libraries, such as React Native Reanimated, use complicated architectural setups to achieve even better frame rates.
The core architecture of React Native makes it hard to optimize for native performance.
If you want your app to be as close as possible to the design of your chosen platform, iOS or Android, this is great news. React Native apps will adopt the design of the current platforms well and look very similar to a natively written app.
However, most companies today want to achieve a consistent experience across any device. They want their apps to have consistent branding — colors, fonts, and form language. In React Native, only because your app works and looks great on iOS, does not mean it will look the same on Android!
This means that Flutter applications can achieve fast performance once they are compiled.
Flutter does not render native components on the screen. It uses a rendering engine called Skia that paints your interface and animations from scratch.
This gives you complete control over the UI. You can implement completely custom forms and animations. Flutter also implements native components for both Android (these are Material design widgets) and iOS (called Cupertino widgets).
Don’t be fooled however by how close they look to the actual components. They are drawn on the screen from scratch just like anything else in Flutter.
The downside is that the Flutter team needs to implement every interface component in their framework. New components might only make it to the framework after some time.
While you can make your app look like the native design specifications in Flutter, it is probably not the right tool for this job. You will write a lot of forking logic and might still not get the results you are looking for.
If you want to have a consistent design across both platforms Flutter really shines. In most cases, your apps will look identical on iOS, Android, and other platforms.
Flutter and React Native on the Web
So far we have been looking at mobile applications. What if you would like to have a consistent experience across native mobile applications and the web?
If you need your website to have great SEO, you probably will be happy with neither of the options below. It is still best to build out your web experience separately if you want to optimize your page for being publicly available.
But if your website is guarded behind authentication or you don’t care as much about SEO you can seriously consider both Flutter and React Native Web.
React Native Web is different from ReactJS, the original web framework. React Native Web lets you leverage your mobile codebase with few tweaks for the web. Twitter has been using React Native Web for its website experience and has had great success with it.
React Native Web has become quite mature and is even included in the popular React Native development framework Expo. At this point, you can safely reuse most of your code from React Native and use it on the web!
Flutter has added web support officially in the latest version Flutter 2 in March. This means that Flutter for Web is stable to use in production.
One very promising first example of what web apps can look like with Flutter is the Rive App. Rive has rebuilt their animation tool to work with Flutter across web and desktop platforms. The results are impressive.
However, Flutter applications don’t resemble a typical Html structure. Flutter leverages the Web canvas to custom draw your UI. This means that search engine support is poor and probably will never be great.
But it can come with some unexpected benefits. The web was never built for complex data-driven apps of specific types. For example, Google implemented their Docs app recently with the web canvas instead of native Html
textarea elements. A collaborative editor is one of those things that is simply hard to build with the traditional web toolbox.
If you want to build publicly accessible websites that follow web standards your best bet is still to use a separate codebase for the web. You can use frameworks like NextJS that come with a lot of optimizations for loading images and improving SEO.
If you use React Native and have structured your codebase well, you can even reuse most of your application logic and state. You simply need to replace the interface component layer.
If you are using Flutter, you have to maintain a separate codebase in another language than Dart.
So think hard about your project and what the requirements for the web application really are before choosing React Native or Flutter.
Flutter and React Native on Desktop
Both React Native and Flutter projects can be compiled as a desktop app.
React Native for macOS and Windows is still in its early stages and has not released version 1.0 yet. However, it promises to develop performant desktop apps in the React ecosystem and could be become a great alternative when you are picking React Native.
Flutter has been working on desktop support over the past years and has released it in their stable channel. There are not many reference apps available yet, but since the framework was built to support any platform from the very beginning it is the better choice right now for native desktop apps.
Which one is easier to learn? React Native or Flutter?
Both frameworks have endless content on Youtube, Udemy, Medium and other places to get started and to find help on specific topics.
The documentation of Dart and Flutter is also excellent to start with. It presents the language and framework concisely.
When to use Flutter for cross-platform apps
Are you building an app that requires
- smooth animations
- looks similar on all platforms
- needs a great native experience on desktop
- does not require SEO or semantic Html
you can't go wrong with Flutter!
Flutter has a young but thriving ecosystem and has a well-architected base that lets you create just about any interface in your platform of choice.
When to use React Native for cross-platform apps
Are you building an app that
- adapts to the design language of your target platforms
- is launched primarily on mobile
- is developed with a ReactJS web app
- is developed by a team of web engineers
pick React Native!
React Native is used in large applications you use every day. It is battle-tested and has a wide developer community and package ecosystem around it.