Learning Flutter with a React Native background

Google developed Flutter in 2017 as a complete software development kit which can be used to create applications on multiple platforms. It was designed to build natively compiled, high-performing and appealing user interfaces (UI) quickly.

While React Native uses a popular JavaScript, Google’s Dart is the main programming language for Flutter. It is strongly typed with nullable value, class-based, and supports named parameters in function.

According to Github, Flutter has approximately 139K stars in May 2022 while React Native (RN) has around 102K stars.

One codebase for five operating systems

In addition to the Android or iOS in RN, Flutter can share its code across other operating systems such as Windows, MacOS and Linux. This is also the ultimate choice if a developer wants a solution that works on both mobile and web.

To optimize Flutter’s web support, it should be used in one of these cases: Progressive Web Apps (PWA), Single Page Applications or apps based on existing mobile versions. Interestingly, Flutter can also be used in embedded devices like vehicles or TVs. For example, Toyota has used Flutter for the built-in entertainment system of its cars.

Animations as a plus

Handling animation is one of the most noteworthy advantages of Flutter at the moment. Whereas React Native has two default animated systems and a third-party library is required to implement complex transitions, Flutter has its collection of animations and some widgets come with their own motion effects.

Furthermore, Flutter includes Skia as a 2D graphic library, so it can process pictures faster and smoother. In general, Flutter is useful for transparent  situations like delay or reverse, but React Native would handle flexible value controlling better.

Advantage of using UI widgets

I mentioned that Flutter uses ready-to-use and fully customizable widgets  to display user interfaces. Therefore, it would save lots of time to focus on functionality rather than use a library or build components from scratch as in React Native. Dropdowns or menu widgets would be an obvious example.

The application would look identical on both Android and iOS, but if a native appearance is required, Flutter has Material Design and Cupertino to support styling respectively.

Their UI widgets make Flutter applications resilient to system updates, while React Native might have some issues with native elements. Though the problem rarely occurred, I felt that it would be worth highlighting in this article.

Plugins developed by Google

Because Flutter was developed by Google, it inherited a number of the company’s advanced features, such as sensor use, GPS, Bluetooth and mapping. It makes this framework the optimal choice for apps that do not allow third-party libraries.

However, React Native inevitably dominates in the number of plugins due to its earlier release and big community. In addition, applications that involve less tracking or location work best with RN thanks to its fast iteration cycle and ease of use.

Time compilation

There are two compilation methods: just-in-time (JIT) and ahead-of-time (AOT). RN uses the first one, which compiles when the app is starting and allows it to execute a dynamic block of code. Since Dart in Flutter is AOT-compiled, the app is processed before running in order to reduce application size, optimize performance and error detection. Flutter also uses JIT in development mode for hot reload.

CI/CD support

Flutter has detailed documentation on continuous integration and deployment to both Google Play and App Store. The work is easily done via CLI, and third-party libraries can be used if needed for complicated situations. Despite the huge community, RN has poor deployment instructions, especially for iOS. Libraries such as Bitrise are recommended to automate the process.

Testing and debugging

Since Flutter uses the same code for both mobile platforms, it requires fewer tests than React Native. Flutter also offers complete, built-in automatic testing tools including UI, widgets and integration.

On the other hand, React Native mostly focuses on the unit level and is lacking in other support. Some popular testing libraries for it are Jest and Jasmine while test, fluter_test and integration_test are popular with Flutter.

Regarding debugging, the contest is tied between the two platforms. Both have hot reload, which immediately reflects the changed UI and the progress of development. Each platform has its own built-in debug tools along with IDE.

However, it has been said that RN’s debugging system is more cumbersome, since problems can come from either JavaScript (code) or the native side (third-party libraries). While in Flutter, Chrome browser (or DevTools) and OEM debugger can go through the codebase step by step with breakpoints and expose the error. Flutter inspector and Flutter outline also help by displaying the widget trees or build method.

Final thoughts

Deciding between Flutter and React Native for your next project would depend on many factors, such as development time, performance and stability. Flutter seems to have huge support from Google with many built-in tools, and though the community is smaller than React Native’s, it is growing rapidly.

Flutter would work optimally with apps which require animation rendering or UI-focused, cost-effective, smooth and integrated solutions. Google Ads, Ebay, Alibaba or Hue by Philips are successful examples of Flutter development. RN is more for web developers due to JavaScript and can be useful for 3D animation.

Most of the mobile developers at Qvik would like to learn Flutter as an extra skill because of its popularity and rapid growth. We have experts in both native and cross-platform development, and are more than happy to help you with your digital solutions. Check out some of our projects here.

Further reading and resources

• Flutter vs React Native – What to choose in 2023?
• Announcing Flutter 2
• Compare Animation: Flutter vs React Native
• Flutter vs React Native
• Flutter vs. React Native – detailed framework comparison
• React Native vs Flutter: Which One is Better for 2023?
• Debugging with Android Gradle (Android)
• React native Vs. Flutter: Which Framework To Go with?

Ilustration: Midjourney