Starting Flutter as a React Native Developer
First Impression and Beyond
Flutter is developing rapidly, with a focus on performance and development experience, and is actively engaging the community. And while React Native was a great alternative to other frameworks when it was released in 2015, its paradigms might be somewhat dated for the needs and demands of mobile development in 2021.
The purpose of this article is not to list all the differences between Flutter and React Native or go over all the cons and pros— there’s plenty of other sources that would do a much better job — but rather to describe things that struck me as different as a React Native developer.
Composition vs Inheritance
One of the best features of Flutter is the ability to extend existing classes, in contrast to React Native, which discourages inheritance in favour of composition. Flutter’s comprehensive documentation and tutorials make it easy to find the right class to extend.
Not only does it greatly reduce the amount of code you have to write yourself, but also practically removes the need for third-party plugins, since virtually any lacking functionality can be easily added on top of existing code.
Documentation
In order to make sense of Flutter you’ll have to do some reading, perhaps even more so than with React Native. Without a good grasp of basic Flutter concepts, some errors can be hard to understand and will slow you down significantly.
That said, Flutter documentation is very rich with plenty of examples, and there’s a widget for everything, so reading the docs will save you a lot of time. Also, there’s many ways to achieve the same result, and having the knowledge will help you pick the right one.
Dart vs TypeScript
If you’re used to TypeScript, Dart will feel familiar, with the exception that TypeScript is a strongly typed superset of JavaScript, while Dart is a complete programming language. There’s already plenty of Dart vs TypeScript articles around, so I won’t go over all the cons and pros here.
Learning Dart felt surprisingly easy with the language tour and code samples available on the Dart website. Dart is also perfectly suited for this purpose given the Flutter coding style and the common practice of extending Flutter classes.
Components vs Widgets
Say goodbye to JSX, and say hello to aggressive composability. Although after JSX components Flutter widgets might seem a little verbose, once you get used to the new way of doing things, there’s plenty of ways to make it more concise and readable.
Although performance is paramount in Flutter, you can’t always expect it to do the work for you. Just like in React Native there are some considerations you have to make as a developer in order to keep your code performant and avoid bottlenecks.
State Management
State management using Provider/Consumer is surprisingly simple, although some of its limitations might make you build odd workarounds. That said, there’s plenty of other options, including Redux, so you’re never tied to a single solution.
For the rest, if you’re already familiar with the React concepts of State, Provider, Container and Context, using state in Flutter won’t feel much different. Likewise, you’ll have to consider whether something has to be in the local or in the global state.
Debugging
Flutter DevTools is surprisingly similar to React Native Debugger, but runs in the browser, much like React Chrome Developer Tools. It offers a similar set of features and interface, which doesn’t take long to get used to for a React Native developer.
As far as error messages are concerned, I’m tempted to say that React Native does it better, although I might be biased. As mentioned earlier, understanding Flutter errors requires some background knowledge, and can quickly become frustrating without it.
Conclusion
Despite what feels like a higher entry barrier at first, learning Flutter is a rewarding experience. Once you get past the initial learning curve and gain some momentum, you’ll be surprised how powerful it really is.
