And 5 reasons you will enjoy Flutter too
Recently, I’ve been dabbling with Flutter for building cross-platform mobile apps. Initially, I was afraid of the learning curve as I had zero knowledge of Dart (the language Flutter uses) or the framework itself.
After giving Flutter a try, I was totally impressed with the framework. As a React developer, I could relate entirely to the way Flutter works. Here are five reasons why.
Declarative
One of the key features of React is that it is declarative. As compared to imperative styles where we need to manually construct a full-fledged UI, declarative method allows us to simply describe the current UI and leaves the harder aspects like transitioning and state management to the framework powering it.
One great similarity between Flutter and React is the declarative approach. Just as how we use JSX to describe what the UI looks like in React, similarly, in Flutter we describe the views using widgets.
Components and Widgets
In React, we have component hierarchy where one parent component can have multiple children components. In Flutter, the same applies where everything is a widget from the screen to the tab bar, to the text.
This is no surprise because Flutter’s widgets are inspired by React. Flutter comes with a huge library of widgets by default. This concept of widgets is so relatable where we decompose large views into small individual ones and construct them bottom-up. Such a paradigm also reinforces creating reusable components across the app!
States and Props
Just as React allows us to manage the component states and dynamically hooks them to the UI, Flutter also offers states.
Flutter has two main types of Widgets: Stateless and Stateful. In Stateful widgets, we can trigger a rebuild of the Widget by calling setState(). Sounds familiar, right?
In fact, React has the exact same name setState() to update states. Just as React updates the DOM tree, Flutter constructs a new Widget tree every time it rebuilds.
Also, we can pass props to Widgets in Flutter just the way we do in React. Props can be variables or even callback functions which alert the parent widget to re-render itself.
Almost Like JavaScript
Flutter is written in Dart. To be honest, I never really thought it would be so similar to JavaScript. In fact, I literally didn’t even need to study Dart to pick up Flutter.
The major difference between JavaScript and Dart is that Dart supports typed language with both loose and strong prototyping. We can specify the type of parameters, either explicitly or implicitly. Being a compiled language, Dart can find most errors at compile time.
In contrast, JavaScript is an interpreted language, which supports both dynamic and duck typing. Duck typing is a concept where the type of the class or the class of an object is less important than the methods it defines. Hence, with duck typing, instead of checking the types, we check for the presence of a given method or attribute.
The type safety and compile-time error finding by Dart is certainly one of the major differences and a great feature.
The Developer Community
One of the most important factors in me or any developer adopting a particular technology is the level of support it has from the developer community.
Looking at the trend, the popularity of Flutter has exploded in recent years with many adopting the framework to build for iOS and Android platforms simultaneously.
Why Not React Native?
Let’s address the elephant in the room. There have been numerous comparisons between Flutter and React Native. Of course, as a React developer, the first instinct is for me to look at React Native. I’ve had my fair share of experience with React Native and, in fact, during Flutter’s early days when adoption wasn’t as prevalent as today, I had recommended React Native strongly to my fellow developers. I think times may have changed now.
I’m definitely not putting down React Native. It has an excellent community, great documentation, features, and its own strengths. However, there are some quirks with it.
Native apps
Firstly, React Native isn’t really native. It runs more like a sandboxed environment that mimics the native experience as close as possible. Flutter’s pixel-by-pixel drawing of the code translates into a more native, fluid experience for users.
Quality of packages
Secondly, while there are countless packages for React Native, I feel that long-term support for these is limited. In fact, I came across too many abandoned packages which made me think twice before using external packages. I felt Flutter, on the other hand, has great libraries which are also well maintained.
Documentation
Thirdly, I felt Flutter has great detailed documentation with guides, videos, and examples. React Native’s documentation seems to be more for web developers and had some gaps.
Community
Last, but not least, the community presence!
Stack Overflow trends show a clear rise in the popularity of Flutter and it has already overtaken React Native. This is a really important factor because, as a developer, I want to know other developers are into the technology too. When I need support, this assures me that I can depend on my tribe of fellow developers! A framework or technology is only as strong as the community that adopts, maintains, and develops it.
That’s All Folks
There you go — five reasons why React developers would love Flutter. Give Flutter a try for your next side project and leave your comments below!
Happy Hacking!