Flutter — a React-Native Developers’ Perspective

RN and Flutter. Two application development frameworks, which are the source of much debate among developers. They both allow developers to create apps for multiple platforms (Android and iOS) from the same code-base, with near-native performance and both have an ever growing fanbase who champion them. Rather than discuss their pros and cons, I will describe my teams’ experiences with Flutter as RN developers.

Our Background with React-Native

Our teams’ experience with RN development is varied and extensive. For years we have created and maintained a multitude of RN apps for the Fieldin company. We chose to develop in RN, because it allowed us, as a lean development team, to quickly develop quality apps for both Android and iOS platforms. We have also been keeping up-do date with the framework , from version 0.33 to version 0.63 and all the improvements and transformations it has undergone over the years.

Fieldin always strives to find and use the most innovative solutions in development and thus we developed an interest in the relatively new framework (first released in 2018) Flutter. What mainly makes Flutter attractive is that they developed a full array of custom native components and custom sdk, using the google SKIA engine to allow the code to interact more directly with the native platform. It results with potentially more performative apps than RN, which uses an intermediary ‘bridge’ between the JS code and native components.

Preparing for Flutter

When approaching to Flutter development, we wanted to test its capabilities using scenarios, workflows and features we implemented in our current apps using RN. Those include:

• Navigation
• Rendering large lists (500 or more items)
• Integration with google maps
• Multiple animations (change opacity, rotate object, draw object and more)
• Transitioning between right-to-left and left-to-right layouts
• Scanning bar codes

We divided the tasks between us and went to work.

Jumping Into The Deep End

While acclimating to Flutter and its programming language Dart, we rapidly came across pleasant surprises such as:

• Flutter apps are composed of element trees (“widget trees”) which are similar to the RN component trees.
• Creating apps from scratch is a faster process than in RN, due to the abundance of pre-built elements provided by Flutter.
• Adapting to Dart was an easier process than we originally planned, although this is partially because we are typescript developers. For native JS developers, it could prove more of a hurdle.

Other aspects were more of a challenge, like:

• Styling elements in Flutter is done inline, on the element itself, which makes the code much less elegant and readable.
• Flutter elements are class based elements with a dedicated lifecycle, while the most up-to-date RN elements (since React 16.8) are functional components with hooks, making the transition positively jarring

Overall, We dedicated a week to grasp the basics of Flutter development and a couple more days to complete our tasks.

Impressions

After reviewing our results we found the following:

• Navigation — Flutter has several built-in forms of navigation, which are easy to use and implement. RN is also to achieve this, but by using third party libraries such as react-navigation.
• Rendering large lists — large lists of 100 plus items are constant and major issue in RN which is most often the result of its design and bridge intermediary between code and native. Flutter has no such issue, and is able to easily render 5000 items in a list, without any lag or strain on the device.
• Integration with google maps — both frameworks utilize third party libs to connect to google maps, but the difference in performance is apparent. In Flutter, the map tile loading speed and reaction to interaction is unquestionably better, showing 60fps response time. For RN, it can achieve, at best, 30 fps.
• Rendering animations — Flutter has an abundance of pre-built animation tools and widgets which made it very easy to implement simple animations such as changing the opacity, moving an element on screen, etc. The animations were smooth and non-obtrusive to the rest of the app, something which can be achieved on RN through the react-native-reanimated lib and simplified by the excellent react-native-redash lib.
• Transitioning between right-to-left and left-to-right layouts — In RN, changing the layout direction between rtl and ltr, necessitates either restarting the app or applying a component wide custom config. In Flutter, however, just by adding a single attribute to the overall styling config (theme), the layout changes in the push of a button. Disclaimer: we only checked texts and layouts. We didn’t check the layout of inputs.
• Scan barcodes — RN and Flutter are both similar in those regards. They both require third party libs to implement this feature, with both being successful in scanning barcodes and QR codes successfully

Overall, a very positive experience, with a lot of benefits compared to RN. However we did encounter some issues, along the way, which would prove to future challenges.

Future Challenges

One snag we came across with Flutter is that its main list tool “listView” has issues with stateful elements and thus does not support item reordering and filtering without some compromises. This stems from the way the Flutter element tree is structured. this is a familiar approach for native developers (Android and iOS), but it is not to RN and web developers.

Another issue is that Flutter, for all its advantages, is still quite young and its’ community relatively small compared to RNs’. Thus, it’s still missing official integrations to several platforms such as Mixpanel analytics, Microsoft code-push and more. There are alternatives, but the option has to be considered that there are Flutter tools or Flutter integrations that haven’t been finalised or created as of yet.

Final Thoughts

Our initial experience with Flutter was much more pleasant than we initially thought.

We had a very enjoyable time with Flutter and we intend to incorporate it to our metaphorical development tool-belt. We also plan to explore more avenues of Flutter, such as automated testing, storage management and many more. However, we plan to continue working with RN as well. Although Flutter has many advantages, RN still has many features that are hard to overlook, including its expansive community, its very easy entry for developers with a JS background and its constant evolution.

I would urge you to do the same and decide by your needs and your apps’ needs, what framework will serve you best.