Jethro Magaji Frontend Engineer and Ui/Ux Designer

Why Flutter is overtaking React Native

4 min read 1315

React Native Logo and Flutter Logo

Introduction

As a developer, it’s difficult to build applications for multiple screen sizes or different operating systems, but cross-platform languages revolutionized software development.

There are plenty of cross-platform languages making software development very easy, but Flutter is gaining recognition over the existing cross-platform technologies like React Native, NativeScript, Xamarin, etc.

Flutter-built apps use Dart, which applies to both client and server-side development. Dart is a programming language developed by Google that is open source and object-oriented.

Flutter is a complete SDK for building apps and not just a framework. This implies that it includes everything required to build a user interface (UI), including the Material Design and Cupertino widgets. This lets developers easily render the UI on both iOS and Android.

What is cross-platform development?

Cross-platform development is the process of designing software products or services for different platforms or software environments.

Cross-platform development enables developers to build applications once and run them on every platform or software environment.

Statistics

According to Google Trends search results from January 2020 to January 2021, comparing search results on Google between Flutter and React Native shows Flutter to be the most searched term.

Flutter Search Trends
Source Google Trends

According to Google Trends showing search results from January 2020 to January 2021 comparing search results on Google between Flutter, React Native, Xamarin, and NativeScript shows Flutter to be the most searched term.

Flutter Search Trends Showing Popularity
Source Google Trends

The benefits of using Flutter vs. React Native

User interface(UI)

Flutter uses Material Design and Cupertino for its widget, which provides an expressive and flexible UI that enables developers to easily render the UI on both iOS and Android platforms with fast prototyping.

Performance

For both Android and iOS, because Flutter is compiled into the native ARM code, performance problems are further mitigated. Flutter allows programmers to use a single code base, this unifies teams, decreases risk, and speeds time to market. All while having the advantages of natives look and efficiency.

We made a custom demo for .
No really. Click here to check it out.

Cross-platform

Flutter uses a single codebase for both web and mobile development.

Firebase support

When it comes to using Google Firebase for cloud services, Flutter has well-documented support on Firebase installation, making it easy for developers to integrate Flutter apps to Firebase.

Community support

React Native has great community support, but the Flutter community is promising with Flutter being an open-source tool backed by Google with 105k GitHub stars and 14.6k GitHub forks, and also a good community engagement with developers on Discord, Meetup, Gitter, Medium, and Stack Overflow.

Hot reload

With Stateful Hot Reload, Flutter provides a quick development cycle, the ability to reload the code of a live running app without restarting or losing app status. If programmers change some code when building Flutter apps and when it’s re-compiled, they don’t have to navigate back or manually recreate the state to see what changed.

How Flutter works

Flutter builds a native app with a beautiful UI using a single codebase without compromising on speed, quality, or performance.

The approach in cross-platform development uses only a single code base, but it involves either a web view in which the app creates HTML and displays it in a web view on the platform, or building a bridge from code in a common language like JavaScript to those native UI components like buttons and menus.

In contrast to this, Flutter renders the app itself instead of letting the platform do so, eliminating any bridge or context needed to go between the app and platform. All it requires of the platform is a canvas in which to render the widgets so they can appear on the device screen and access events like finger taps and services like the camera and geolocation. This makes the app super fast and responsive and can run on any platform.

Flutter System Overview
Source morioh.com

Flutter consists of a framework built with Dart and a rendering engine designed mainly in C++, because everything in the top region is Dart, you get a full stack trace for better debugging. In Flutter everything you can see on the screen is a widget. A widget can be described as a structural element like a button or a menu, a stylistic element like a font or a color scheme, and even a layout like padding.

DART provides both just in time (JIT) compilation, and also ahead of time compilation, which enables a lightning-fast development experience with a feature called Hot Reload, which allows you to see your code changes in less than a second.

Getting started with Flutter

Installing the SDK

To begin Flutter development, you will need to download the SDK from the official Flutter site here and choose the operating system version you are installing.

Setting up the code editor

Next, set up your code editor depending on your preference, for this tutorial I will use visual studio code, you can download it here if you don’t have it. After setting up the code editor, go to the Extensions tab, and in the Extensions search section, type “Flutter”, pick Flutter from the list and then click Install.

Creating a test app

Go to the View tab and select the Command palette.

Command Palette in View Tab

Type “Flutter” and select the Flutter: New Project.

Flutter New Project Dropdown

Next, enter a project name such as “my_first_flutter_app” and then create or select a parent directory folder for your project.

Enter Project Name and Select Folder

Finally, wait for your project creation to finish and you will see a libs folder and in it, you will see the main.dart file. The libs folder is where you will write most of the code using the Dart programming language.

Main.dart File

Testing the app

To test it, select an emulator device to run your app. I’m using an Android emulator to run the app:

Android Emulator
Source Flutter Github page

To use the Hot Reload, change the code, and then click on the hot reload key or save the changes to see the changes in your emulator or device.

Changing Hot Reload

Building a Flutter UI using NoCode

Using Flutter studio, a Flutter UI (user interface) NoCode platform, you can build a user interface by simply dragging and dropping elements.

Flutter Studio Interface
Screenshot from FlutterStudio

From the Material tab, drag and drop the FloatingActionButton and the BottomNavigationBar to the mobile screen, and then drag and drop the BottomNavigationIcon three times into the BottomNavigationBar and edit the icons.

Drag-and-dropping Elements
Screenshot from FlutterStudio

Copy the source code and the pubspec code from the source code and pubspec tabs, respectively, and paste the source code in the main.dart file and the pubspec code in the pubspec.yaml file.

Pasting into pubspec.yaml File
Screenshot from FlutterStudio

After pasting the code, Hot Reload, and you will see the fresh changes to the app.

Changes After Refresh

The link to the GitHub source code can be found here.

Flutter use cases

Flutter is used by many companies today including Realtor, Tencent, The New York Times, Google Assistant, and Pickio.

Integrations

  • Firebase: Firebase is a cloud service designed to power real-time, collaborative applications
  • Android SDK: An SDK that provides you the API libraries and developer tools necessary to build, test, and debug apps for Android
  • Dart: A new web programming language with libraries, a virtual machine, and tools
  • Socket.IO: Realtime application framework (Node.JS server)
  • Google Admob: Monetize and promote your app
  • Pub.dev: A package manager for the Dart programming language

Conclusion

In this post, we have learned why Flutter is overtaking React. We also looked at how Flutter cross-platform development works and how easy it is to get started with building Flutter applications using Flutter studio, an online NoCode platform.

References

 

: 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.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

.
Jethro Magaji Frontend Engineer and Ui/Ux Designer

5 Replies to “Why Flutter is overtaking React Native”

  1. This is the first article i read about flutter so far and i’m beginning to fall in love with flutter 😏, thanks to Jethro Magaji. 👍🏻

  2. – Flutter is an english word, comparing google trends is useless.
    – All the great features expained are also available on React Native, except the compilation to ARM code.
    – Dart requires a new language to learn, RN is just JS + JSX syntax.
    – RN community BY FAR exceeeds the size of the flutter community.

    I guess you wrote the title to be as clickbaity as possible and then tried to prove your point.
    Flutter is a great tech, it’s not overtaking RN afaik and your arguments are true for both platforms.

  3. “In this post, we have learned why Flutter is overtaking React.”

    Well…. we’ve seen that Google’s statistics say that Googles product is getting more popular.

    I’m not knocking Flutter, I applaud any non-javascript solution.

    Also; the flutter websites says that the web side of things is in beta so it’s not overtaking react for that.

    ps: I hate react, but let’s stick to the facts.

  4. The comparison in Google trends doesn’t make any sense as “flutter” alone is related to a lot of other queries, since it’s an American word… Just scroll and look at “related queries” in google trends and you will see that it’s an irrelevant comparison.
    And since that’s the only argument in favour of flutter in this article…

  5. A total puff piece with absolutely no substance on comparing react native to flutter – it barely mentions RN at all. You might as well say Chinese is the most popular language in the world because China has the most population in the world, without giving any thought on what ‘popular’ really means.

Leave a Reply