Comparison between Flutter & React Native

Introduction

Flutter is a Mobile UI cross-platform Framework, developed by Google for creating native apps for iOS and Android. The very basic reason why should we used it is, it circles around a single code base. You probably be thinking what is a single code base?

Well, it means that you only have to write the code for one device and it will sync in with other devices or in short we only have to write our app once for multiple devices.

The language here, we will be using is the programming language called “DART”. Dart is a language developed by Google for mobile, desktop and web applications. It is similar to other programming languages as it uses classes, functions etc.

Design Pattern/ Widgets

Widgets, sounds like pretty cool. Well, it’s cool for me if for you not. Flutter, it is all about widgets. You must be thinking what are widgets?

Well, anything you want to place in your app screen, whether it is text, a button, row, column, search box etc. each of these lie under the category of widget and flutter consists of many widgets, the hierarchy is explained below. I have made sure that I keep it as simple as possible.

I have highlighted the places on the screen in order to define the widgets.

• Root: The Root widget is the whole main screen on which everything else will fall in place.
• App-Bar: It can be called as the title bar for the screen.
• Text: Text in app bar is basically the title of the screen, which you want to name it either Dashboard, Main Screen, Map screen etc.
• Container: All the related work which you want to do or place like button and everything are placed in your container.
• Text: The text widget used in container has been used as an example. You can try on any widget you have in Flutter to make it look better.

Why should we use Flutter?

You probably be thinking why should we use it, as React Native is already there in the market and people are familiar with it now, so why use a new one?

Well, that’s a brilliant question my dear friend. Let us go through all the pros and cons of React Native and Flutter.

Flutter vs React Native

Let us discuss first what features, they have in common.

1. Have one code base.
2. Have good layout methodologies.
3. Can work with Firebase.
4. Can use Material design.
5. Hot Reloading.
6. Very smooth and quick experience while running apps.

Now coming to the showdown between the two frameworks, let us discuss which one is really better and why?

Programming Language and Architecture Design

While talking about the programming language, Flutter uses Dart which is though not popular enough like JavaScript (used by React Native) but is very easy to learn as its syntax is quite similar to Java, Kotlin and Swift. That’s one point for React Native, because being popular is a main thing. But wait, being popular in a language is not enough, architecture matters as well.

React Native uses an architecture involving a JavaScript bridge which then translates the call into native API, consuming time and impacting performance, whereas Flutter has all the components built-in.

Yes, we should know that:

React Native works on run-time while Flutter on compile-time.

That’s one thing to note down. So it may make files a bit larger but is smoother than React Native.

Community and Packages

Being older than Flutter, React Native has made its place quite well. It has all the necessary packages and libraries to work on whether it is of maps or Bluetooth etc. and it has a larger community than Flutter as well. But Flutter is making its way up day by day, and its community is getting bigger as well, so we will be able to see lots of new things in this new tech as well.

User Interface

We are talking about cross platform UI Frameworks, so as the name suggests UI is one of the most important things in any of the cross platform frameworks.

React Native has a lot of third party options for making its UI look better, but Flutter wins the race in this one. Though not having third party libraries is a problem but Flutter itself has a lot of things to offer. It makes up for this problem by having built-in components including Material Design and Cupertino Widgets etc.

Documentation and Tutorials

Though having documentation, React Native documentation is complicated and poorly maintained (that’s not what I am saying only), whereas Flutter has all the things we need in one place with not only in text but graphics and video tutorials as well.

Flutter Documentation: https://flutter.dev/docs/get-started/install

React Native Documentation: https://reactnative.dev/docs/getting-started

Code Re-usability

There are some parts of the code which are reusable while some apps will want at least a bit of the code to be platform specific. Flutter solves this issue, by allowing the developers to overwrite the code to fit the platform better, unlike React Native which requires a lot more adjustments than it.

Release

Releasing on the app stores is a hectic process, especially if we are talking about cross platform frameworks. React Native release process is pretty standard, though manual. However, Flutter has all of it in its documentations.

It has an official documentation on Fastlane deployment and here is the link for that:

https://flutter.dev/docs/deployment/cd#fastlane

Now, you can also deploy apps from CLI as well.

Size

Having all the perks, Flutter can be beaten by React Native on the basis of size. I mean, React Native apps takes a lot of space too but not as larger than Flutter.

Conclusion

Well both have their pros and cons. React Native is good in a sense that it has a bigger community and third party libraries but a part from this Flutter is making its way and will rise up to a top position in times to come.

I hope, I have defined many things clearly but if not comment section is always open for you to ask any thing. Constructive criticism can absolutely be done any time and will appreciate it. I hope you like it, and kindly let me know if you want me to keep writing on different techs.

Have a great day, will be having a conversation soon.

Thank you.