From Apache Flex / AIR to Flutter

Hey everyone, in this article I’m going to discuss my experience moving from Apache Flex and AIR to Flutter. I know a lot of Flex, Starling and AIR developers are interested in Flutter, so I decided to share my experience from rebuilding and app.

My Background as Mobile Developer

I am a Software Engineering graduate with and hold and MSc in Mobile computing. I started as a Java developer but soon I discovered I enjoy Mobile apps. My first apps were done for Windows Mobile 2006 which soon led to Android but never tried iOS.

In 2009 I was introduced in Flex (owned by Adobe back then) which used ActionScript3 and an XML base UI, and was able to use one code base to compile for both Desktop and Web. Later, in 2011, Flex released a version to target Android and iOS. That allowed the developers to target Web, Windows, Mac, Android, iOS (and Blackberry too!), compiling to native code for some targets while using a VM for others. Sounds familiar? During the later years I made a lot of apps, some of which became hits and many didn’t 😂. But how I ended up in Flutter?

Looking for something fresh

As years passed, the Flex SDK was donated to apache and little by little it lost its shine. Community started shrinking while bugs started increasing. I started looking for alternatives that would work for me. I tried all the available options, Xamarin, React Native, ionic, titanium etc. but none was really for me. Then people started talking to me about this cool framework that would soon reach v1 and is awesome for building apps. So, I started studying Flutter, Dart and how to change my mindset while developing.

Why Flutter you ask? There are many clear advantages over the rest.

1. Dart — The language is similar to AS3, Java, C# so it is easy to adopt and comes with a clean and powerful sytnax.
2. Huge community — Flutter became very popular and comes with a huge community to learn from and ask for help when needed.
3. Blazing Fast — Flatter apps compile to native binaries which results in a steady 60fps experience in most devices or even 120fps if the device support it. Coming from cross-platform frameworks, none of my apps have ever been so smooth and fast.
4. Easy to Learn — Flutter comes with an excellent documentation, tutorials, courses etc, which make it fairly easy to start.

The first complete Flutter app

Fast forward to a few days ago, and to my decision to use what I learnt in the last 2 years, to migrate my first app, from Apache Flex to Flutter. The candidate, an event app, my company built for TEDxAthens, back in 2016. The app was simple enough, yet it used a lot of everyday used patterns. All the UI Components used in Flex are of course available in Flutter accompanied by many more.

Some examples:

As you can see most of the UI Components are easy to understand and use. In Flutter everything is a widget, buttons, text, appbar, Container. As in Flex, you can build your own if the existing components don’t satisfy your needs. Flutter comes with a complete set of Material Design components (similar to how Flex came with Sparks) and Cupertino style components.

Apart from that, many of Flex / AIR developers working with mobile, are familiar with ANEs (AIR Native Extensions), which allow the usage of native device futures. These are also here, called Packages and at the time of writing, there are more than 10.000 available!

But let’s see what the final result was.

Left: Home screen of the original app in Flex. Right: Home screen of the copy app in Flutter

Some more

Left: Sessions screen of the original app in Flex. Right: Sessions screen of the copy app in Flutter

Left: Program Details screen of the original app in Flex. Right: Program Details screen of the copy app in Flutter

As you can see the two apps are practically identical.

Is it all perfect?

Coming from any traditional OOP Framework, means you have to adapt to Flutter’s declerative UI and Reactive way of programming. This was my biggest issue when started.

In most of my apps I tend to override createChildren(), measure() or set data. I use the binding a lot ([Bindable]) and also I abuse the id.property as most of Flex and AIR developers do. However, these are not concepts you can migrate to Flutter. As the UI update, is really fast, you can rebuilt it when something changes, using the setState() method.

Also, Flutter doesn’t come with a forced MVC design like Flex did. You can use whatever you want and there are many solutions out there for MVC. In this app, I decided to replicate the project structure, as much as possible.

Left: The project structure I use for the Flex App. Right: The project structure I use for the Flutter App.

The verdict

Flutter is a great tool to have in your toolset, if you are a Mobile app developer. Getting used to it, might take some time as things are done differently than we are used too, but the ease of use, available features and performance definitely worth the pain through learning curve. I wouldn’t suggest it for games, but if you are making apps (business, entertainment, etc.) it is the way to go. As I already discussed, this is a cross-platform framework so you are able to export for Android, iOS, Windows, Mac and web, which helps deliver your app to more people.

If you are looking for a way to start you can hit the official page flutter.dev .
I personally prefer a more structured way to start, so I followed the course “The Complete 2020 Flutter Development Bootcamp with Dart” which was created in collaboration with the Flutter team.

You can find the Android app here and I after people asked, I added a web release as well.

Thank you for reading!