Our Experience With Flutter

Recently, the virtual office learning team set off to learn a new framework in the interest of keeping up-to-date with the best tools available for development. Given the popularity, we decided Flutter was the best new technology to learn. 

Flutter is a Google open source framework that allows for one codebase to be deployed to iOS, Android, Web, Mac and Windows. Mobile cross-platform development is the hardest given the current tools, so that is what we focused on. What's interesting about Flutter is that, unlike other cross platform frameworks, it actually compiles down to native code. 

Instead of using a bridge (like React Native) or a WebView (like ionic), it is packaged up with the same code you would get if you created the app in iOS or Android directly. That is a major leap forward in cross platform development, as poor performance and lack of native feel was present in all other available options. This is a major reason why we chose to focus on Flutter.

Learning Flutter's language

Flutter apps are written using the Dart programming language, also created by Google. It is very similar to other C-style languages, as well as having a lot of similarities with Javascript. Because of this, learning Dart was easy for developers from a wide range of backgrounds. Everyone felt comfortable with most of the syntax. 

Each developer on the team picked up the language easily within about a week, which means that in the future, assembling a team to build Flutter applications will be a breeze. The Flutter framework itself also comes with an interesting structure. In Flutter, everything is a widget. Similar to React, all parts of the UI are composed of widgets, which are small chunks of UI code that are meant to easily be wrapped and composed with other widgets.

Some examples of widgets are Padding, FlatButton and even the app itself is a widget. This architecture simplifies writing UI code and with features like hot reload, it leads to rapid development speed.

When we started, no one on the team had previous experience with Flutter applications. This gave us a great opportunity to get a wide range of experiences in starting out with Flutter. 

Starting to learn a new framework is often difficult for many. Each one has its own set of eccentricities or gotchas, and the learning curve is usually fairly steep to get to a solid understanding of the framework. This was not true for Flutter. Almost everyone was able to pick up Flutter and get a grasp of the framework in a matter of weeks. 

Even without having a high-level understanding, many developers were able to start working on pieces of code comfortably in a matter of days, without ever even seeing Flutter code before. As we worked in Flutter, it was unanimous that everyone loved it. The hot reload feature was a breath of fresh air for those of us that came from mobile development.

Flutter widgets

There are many options for what IDE to use for Flutter development, including  Android Studio and VS Code. Both have a Flutter plugin that can launch your app to the iOS simulator or the Android emulator. You can even launch on both devices at once and see your changes in real time on both platforms. This was a major help when needing to see how the app rendered on different devices. 

For most of the app we were building, the UI was the same, but there are things that are specific to Android or specific to iOS. Things like the list scrolling, back button, the way that they transition from screen to screen or things like the different switch style are some of the little things that users of each platform expect. When these UI elements have the native look and feel, they allow the app to feel at home on the platform. 

Luckily, with Flutter you get a lot of these for free. The Flutter team has built out an impressive library of Material style widgets and Cupertino (iOS) style widgets, so making an app that looks like it belongs on that device is as easy as it can get.

After working with Flutter for a while, the major advantages became very clear to us: speed of development of complex layouts and features, performance, easy onboarding and of course, one code base for multiple platforms without losing the look and feel of native. One of the greatest assets Flutter gives you is a massive catalog of pre-built widgets that makes normally difficult tasks, say animation or pulling down an image from a URL, no-brainers. Just drop in a pre-built widget and go.

These sorts of advantages come from the fact that Flutter is not a very old framework so it could learn from issues that the other frameworks have. Performance was one of our most shocking discoveries. Flutter renders directly to the screen using the Skia rendering engine, instead of using native UI components, so there is no middleman to slow things down or hold us back. 

In Android, for example, inflating a view is very expensive. In Flutter on the other hand, it is very cheap to render and re-render a view. This allows for animations to run at up to 120 FPS. Cheap renders enable time-saving features like hot reload. 

Imagine you have a flow that is five screens long, and there is a network call on each step. Now, a change is required to the last screen in the flow. In other frameworks, you would have to recompile the app, redeploy the app and navigate through the entire flow just to see the change you made. This is a painfully long and slow feedback loop. With hot reload, you make your change and it is immediately visible, with the previous state still intact.

The stakeholder effect

Even though this was a learning team, we still had a stakeholder. Jena Axe was kind enough to fill that role. Towards the end of the development, we had a conversation with her about our experience. We told her about how we constantly had new developers jumping on the team and old developers leaving. 

She was shocked. She said that she could not tell at all that there was turnover and was actually really impressed with how fast we put out new features and the consistency of the app and demos. This is some of the highest praise you can get from a stakeholder. Not only did she feel that we were moving unusually fast (to the point that she took notice), but that from her perspective, the team was solid and consistent. 

When developing an app for a client, the client's perception of the process is extremely important. Keeping this steady and fast pace would not have been easy (if it was possible at all) in any other framework, given our high turnover and breadth of skills.

When it was all said and done, the only thing left to do was ship our apps to the respective stores. Because they easily deployed to both platforms in native code, this was a breeze. It worked exactly like we made these apps in their native platforms. Apple only took a day and a half to approve our app, and if you have ever experienced trying to deploy to the Apple App Store, you know this is a feat in and of itself.

In conclusion, our experience was positive from virtually every aspect. Given everything that we learned and now know about Flutter, we are confident that Flutter will be a dominate player in the app development space very soon. It has already reached or surpassed alternatives that have been around for much longer. If you have been or would like to build mobile applications, we cannot think of a better technology to learn today.