For one of our recent projects we needed to build a mobile application. We've done quite a few of those in React Native and Ionic, but the team felt it was time for a new challenge. We had heard great things about Google's Flutter technology and decided to give it a shot. In this blogpost, we'll present our team's experiences with Flutter and how it compares to React Native.

Flutter picture

Pros and cons

Robby, team lead on this project noted the following pros and cons on flutter development:

Pros

Cross platform

Flutter allows for out of the box cross-platform development, it's really useful for rapidly prototyping an app in order to create an MVP. But it's definitely also a valid option to develop a small to medium scale mobile app ready for prime time.

Strongly typed

Flutter is working with Dart, a strongly typed language, which is much better for collaborating in teams to ensure variable assignments match their static types. Even though this brings a bit of extra work compared to for example react native, it's less prone to produce unpredictable results at runtime.

Development perks

  • Very fast hot reload, with minimal delay. The stateful hot reload is really awesome, you don’t need to lose your widget’s state when hot reloading
  • Ahead-of-time (AOT) on production and just-in-time (JIT) on development mode makes developing the app feel seamless
  • Awesome VScode support
  • The named optional parameter is really useful, you can specify multiple optional parameters on the function definition, and call it by passing object-like parameters to the function/class
// definition:
 AppNotificationItem({@required this.notification, this.index, @required this.onSelect})
// usage: 
AppNotificationItem({ notification: notification, onSelect: onSelect });

Extensive Widget library

Flutter comes with a huge widget library out of the box. It's very easy to extend a widget, or to compose new widgets based on mixing multiple default flutter widgets. This gives us less compability issues to think about, Flutter’s widgets will work mostly for both platform. No need to scavange the internet for useful packages.

Cons

As the famous Dutch soccer player Johan Cruijff used to say: elk voordeel ep z'n nadeel (Every advantage has it's disadvantage) This was also the case for Flutter:

  • Flutter is less popular than React Native due to the popularity of their programming languages respectively (javascript vs dart). Because of this the community is a bit smaller
  • The nested widget could be a double edged sword, it's easy to produce kamehameha code and if not organised properly, it's very easy to get lost in the code
  • Limited library, in React Native or another popular framework you can find a variety of libraries for a certain challenge, thus you have more options to choose from
  • Widgets are basically built-in widgets, not platform widgets
  • App size is bigger

Comparison with React Native

Our frontend magician Ega spent some time comparing Flutter to React Native, comparing a few different topics, these are his findings

Programming Language

React Native and jsx is easy to learn for any Javascript developer coming from a web environment. The templates are basically HTML with a specific element set and it's easy to get started. Dart is somewhat different but if you have experience with object oriented programming languages it should also be straightforward to pick up. The Dart syntax although makes it somewhat harder to keep the code nice and tidy.

UI components

The out of the box library of flutter components makes it very easy to start building and there is no need to use any third party plugins as you would need to do with React Native. The issue with working with third party plugins and React Native components is that you sometimes need to create different code for iOS or Android (for example for touch experience), or you often need to configure some platform specific settings on the native iOS and Android files while installing these third party packages.

With Flutter we didn't need to worry about this and we could easily create the same seamless experience on both platforms. Flutters rich component set is also easily extend ible, which is not the always the case with npm packages. So on the UI components part Flutter definitely enjoys some advantages over React Native and overall a better developer experience.

IDE - Visual Studio & type sensitivity

Ega also really enjoyed the plug and play Flutter plugin on Visual Studio, where you can control everything easily from the GUI. Similar VS code plugins exist for React Native but project control still mostly happens via the terminal. The Visual Studio fast coding feature with ctrl + space seems to be a lot more accurate with Flutter, we can easily get intellisense like suggestions which is great for productivity. This is of course thanks to the type sensitivy, which also helps the IDE more quickly detect potential issues, which are presented to us on buildtime.

Summary

Overall this experiment with Flutter was a great learning experience with a very nice result as well. We'll create a blogpost on the project as well soon. We're very happy to have Flutter in our toolbox of innovative technologies to help us create great software products.

Stay Tuned

Submit your email to stay informed about app development updates and best practices.